在近期開發(fā)中，需要將1920*1080放到更大像素大屏上演示，所以需要使用到transform來對頁面進(jìn)行縮放，但是此時發(fā)現(xiàn)彈框定位出錯問題，無法準(zhǔn)備定位到實(shí)際位置。

查看element-ui官方文檔無果后，打算更換新的框架進(jìn)行開發(fā)，但更換幾個后發(fā)現(xiàn)都存在類似問題，由于之前項目都是使用element-ui，對此框架比較熟悉，所以還是決定在此基礎(chǔ)上解決問題。

在未解決前，錯位效果如下：

如果屏幕像素更大，則偏移位置更遠(yuǎn)，對此element-ui文檔中常規(guī)配置已無法解決，只能從底層考慮。

一、思路

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

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

然后，在更新完成后，需要添加setTimeout計時器，延遲修改彈框的top屬性。由于暫時未從底層了解到從哪修改top值，放在update()之前修改發(fā)現(xiàn)無效，由于內(nèi)部會重新計算覆蓋；只能在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)測試，發(fā)現(xiàn)同update()函數(shù)一樣效果的函數(shù)還有很多，如下：

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

在實(shí)際開發(fā)中，根據(jù)需要使用其中一個即可。每個函數(shù)本人也沒作研究，只是測試發(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();
      // 添加計時器
	  setTimeout(() => {
		// 輸入框高度為彈框 頂部偏移量，獲取后賦值給top即可
		e.picker.$el.style.top = e.$el.clientHeight + "px";
	  }, 20);
	});
  }
}

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

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

最新評論