Vue中ElementUI结合transform使用时如何修复el-select弹框定位不准确问题
在大屏开发中，比如将1920*1080放到更大像素（3500*2400）大屏上演示，此时需要使用到transform来对页面进行缩放，但是此时发现弹框定位出错问题，无法准备定位到实际位置。之前写过一篇讲解的是ElementUI中的<el-date-picker />组件修复定位问题，经过网友不断发现和提问，原来不同组件解决方案是不同的，这讲解下 <el-select />组件如何修复。
<el-date-picker />组件地址：https://www.jb51.net/javascript/3130744g8.htm
接下来我们讲下select组件的popper弹框错位问题。
一、html代码
这里还是使用@focus事件也触发修复定位功能。
<el-select ref="elSelect" placeholder="商机状态" 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事件返回的参数为FocusEvent ，则内部数据无法满足popper弹框的调整，如下图：
要获取和picker一样的数据，得使用$refs获取，代码如下：
/**
* 解决Select定位问题
*/
focusFixDateSelectPosition(){
let e = this.$refs['elSelect'].$refs['popper'];
console.log('e', e);
}如下图，此时已拿到和picker一样的数据结果，可以通过popperJS和$el进行修复定准了：
三、回调函数
这里直接调用e.popperJS会出现undefined或null结果，所以添加定时器判断如果未获取对object对象，则回调函数直到获取e.popperJS对象为止，代码如下：
/**
* 回调函数
*/
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回调函数添加到focusFixDateSelectPosition中，代码如下：
focusFixDateSelectPosition(eve){
let e = this.$refs['elSelect'].$refs['popper'];
selectCallback(e);
}此时，下拉框错位问题则解决了，如下图：
到此这篇关于Vue中ElementUI结合transform使用时，修复el-select弹框定位不准确问题的文章就介绍到这了,更多相关Vue ElementUI 修复el-select弹框定位不准确内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue使用jsencrypt实现rsa前端加密,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-09-09
ElementUI中el-input无法输入、修改及删除问题解决办法
这篇文章主要给大家介绍了关于ElementUI中el-input无法输入、修改及删除问题的解决办法,这种问题产生是因为input在vue中的受控,我们需要去重新改变一下监听和实现,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue element-ui之怎么封装一个自己的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了vue3.0 自适应不同分辨率电脑的操作,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
在vue3中父组件访问子组件中的属性和方法是需要借助于ref,苏哦一本文小编给大家介绍了vue3父组件如何使用ref获取获取子组件的属性和方法,文中详细的代码讲解,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue如何实现左右滑动tab(vue-touch)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
在我们使用Vue Element处理界面的时候，往往碰到需要利用JS集合处理的各种方法，如Filter、Map、reduce等方法，也可以涉及到一些对象属性赋值等常规的处理或者递归的处理方法，本篇随笔列出一些在VUE+Element 前端开发中经常碰到的JS处理场景，供参考学习。2021-05-05
toRef 和 toRefs都是Vue3 中的响应式转换工具函数,换句话说,toRef 和 toRefs 就是用来创建响应式的引用的,主要用来取出响应式对象里的属性,或者解构响应式对象,本文小编就来带大家搞清楚Vue3中toRef和toRefs的区别,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue环境变量配置之process.env解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
在本篇文章里小编给大家分享的是一篇关于Vue—v-bind动态绑定class的知识点内容，有需要的朋友们可以参考下。2020-01-01
最新评论