快捷導(dǎo)航

Vue中ElementUI結(jié)合transform使用時(shí)彈框定位不準(zhǔn)確問題解析

更新時(shí)間：2024年01月16日 10:08:17 作者：覺醒法師

在近期開發(fā)中,需要將1920*1080放到更大像素大屏上演示,所以需要使用到transform來對(duì)頁(yè)面進(jìn)行縮放,但是此時(shí)發(fā)現(xiàn)彈框定位出錯(cuò)問題,無(wú)法準(zhǔn)備定位到實(shí)際位置,本文給大家分享Vue中ElementUI結(jié)合transform使用時(shí)彈框定位不準(zhǔn)確解決方法,感興趣的朋友一起看看吧

一、思路

首先，我們得在觸發(fā)日期彈框顯示前或當(dāng)時(shí)，動(dòng)態(tài)修改定位相關(guān)參數(shù)，在官方文檔上發(fā)現(xiàn)有focus事件，在觸發(fā)此事件時(shí)，彈框開始顯示，所以在此修改相應(yīng)參數(shù)即可。

其次，綁定focus事件函數(shù)，返回當(dāng)前日期組件的ref對(duì)象數(shù)據(jù)，可以通過popperJS對(duì)象修改彈框的定位屬性，并使用update()函數(shù)重新更新即可。

然后，在更新完成后，需要添加setTimeout計(jì)時(shí)器，延遲修改彈框的top屬性。由于暫時(shí)未從底層了解到從哪修改top值，放在update()之前修改發(fā)現(xiàn)無(wú)效，由于內(nèi)部會(huì)重新計(jì)算覆蓋；只能在update()之后修改，出此下策也能得到同樣效果。

二、代碼

1、組件代碼

<el-date-picker
	  v-model="dateValue"
	  size="small"
	  type="date"
	  :append-to-body="false"
	  :clearable="false"
	  placeholder="選擇日期" @focus="focusFixDatePickerPosition">
	</el-date-picker>

2、輸出focus事件返回參數(shù)

methods: {
  focusFixDatePickerPosition(e){
    console.log(e);
  }
}

輸出結(jié)果如下：

3、經(jīng)測(cè)試，發(fā)現(xiàn)同update()函數(shù)一樣效果的函數(shù)還有很多，如下：

// popperJS.state中updateBound()調(diào)用也會(huì)重新更新彈框位置
e.popperJS.state.updateBound();
// 直接調(diào)用popperJS中的update()
e.popperJS.update();
// 使用showPicker()也有同樣效果
e.showPicker();
// 使用updatePopper()，也會(huì)更新彈框位置
e.updatePopper();

在實(shí)際開發(fā)中，根據(jù)需要使用其中一個(gè)即可。每個(gè)函數(shù)本人也沒作研究，只是測(cè)試發(fā)現(xiàn)可實(shí)現(xiàn)同樣效果，喜歡鉆牛角尖的同學(xué)可以研究下。

4、在methods中定義focusFixDatePickerPosition函數(shù)

methods: {
  focusFixDatePickerPosition(e){
	this.$nextTick(() => {
	  // 修改定位屬性，將fixed改成absolute
	  e.popperJS.state.position = 'absolute';
	  // 調(diào)用update()后，彈框位置重新調(diào)休
	  e.popperJS.update();
      // 添加計(jì)時(shí)器
	  setTimeout(() => {
		// 輸入框高度為彈框 頂部偏移量，獲取后賦值給top即可
		e.picker.$el.style.top = e.$el.clientHeight + "px";
	  }, 20);
	});
  }
}

此時(shí)，則完成了彈框位置的修正，效果如下：

到此這篇關(guān)于Vue中ElementUI結(jié)合transform使用時(shí)，發(fā)現(xiàn)彈框定位不準(zhǔn)確問題的文章就介紹到這了,更多相關(guān)vue ElementUI彈框定位不準(zhǔn)確內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: