Vue中ElementUI結(jié)合transform使用時如何修復el-select彈框定位不準確問題

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

這篇文章主要介紹了Vue中ElementUI結(jié)合transform使用時如何修復el-select彈框定位不準確問題,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

在大屏開發(fā)中，比如將1920*1080放到更大像素（3500*2400）大屏上演示，此時需要使用到transform來對頁面進行縮放，但是此時發(fā)現(xiàn)彈框定位出錯問題，無法準備定位到實際位置。之前寫過一篇講解的是ElementUI中的<el-date-picker />組件修復定位問題，經(jīng)過網(wǎng)友不斷發(fā)現(xiàn)和提問，原來不同組件解決方案是不同的，這講解下 <el-select />組件如何修復。

<el-date-picker />組件地址：http://www.dbjr.com.cn/javascript/3130744g8.htm

接下來我們講下select組件的popper彈框錯位問題。

一、html代碼

這里還是使用@focus事件也觸發(fā)修復定位功能。

<el-select
	ref="elSelect"
	placeholder="商機狀態(tài)"
	size="small"
	v-model="proStage"
	:popper-append-to-body="false"
	@focus="focusFixDateSelectPosition"
	>
	<el-option
		v-for="item in stageList"
		key="item.FieldValue"
		label="item.FieldLabel"
		value="item.FieldValue"
		>
	</el-option>
</el-select>

二、focus事件

因為select組件的focus事件返回的參數(shù)為FocusEvent ，則內(nèi)部數(shù)據(jù)無法滿足popper彈框的調(diào)整，如下圖：

要獲取和picker一樣的數(shù)據(jù)，得使用$refs獲取，代碼如下：

/**
* 解決Select定位問題
*/
focusFixDateSelectPosition(){
	let e = this.$refs['elSelect'].$refs['popper'];
	console.log('e', e);
}

如下圖，此時已拿到和picker一樣的數(shù)據(jù)結(jié)果，可以通過popperJS和$el進行修復定準了：

三、回調(diào)函數(shù)

這里直接調(diào)用e.popperJS會出現(xiàn)undefined或null結(jié)果，所以添加定時器判斷如果未獲取對object對象，則回調(diào)函數(shù)直到獲取e.popperJS對象為止，代碼如下：

/**
 * 回調(diào)函數(shù)
 */
const selectCallback = e => {
  setTimeout(() => {
    if('undefined'===typeof e['popperJS'] || null == e['popperJS']){
      selectCallback(e);
    }else{
      e.popperJS.state.position = 'absolute';
      e.popperJS.update();
      setTimeout(() => {
         e.$el.style.top = 'inherit';
         e.$el.style.left = '0';
       }, 20);
    }
  }, 20);
}

然后將selectCallback回調(diào)函數(shù)添加到focusFixDateSelectPosition中，代碼如下：

focusFixDateSelectPosition(eve){
    let e = this.$refs['elSelect'].$refs['popper'];
    selectCallback(e);
}

此時，下拉框錯位問題則解決了，如下圖：

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

您可能感興趣的文章: