Vue中ElementUI結合transform使用時彈框定位不準確問題解析

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

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

一、思路

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

其次，綁定focus事件函數(shù)，返回當前日期組件的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);
  }
}

輸出結果如下：

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();

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

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);
	});
  }
}

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