Vue中ElementUI结合transform使用时如何修复el-select弹框定位不准确问题

 更新时间:2024年01月16日 10:12:54   作者:觉醒法师  
这篇文章主要介绍了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项目history模式下微信分享爬坑总结

    Vue项目history模式下微信分享爬坑总结

    这篇文章主要介绍了Vue项目history模式下微信分享爬坑总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • vue中轮训器的使用

    vue中轮训器的使用

    今天小编就为大家分享一篇关于vue中轮训器的使用,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 基于Vue框架vux组件库实现上拉刷新功能

    基于Vue框架vux组件库实现上拉刷新功能

    这篇文章主要为大家详细介绍了基于Vue框架vux组件库实现上拉刷新功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Vue封装通过API调用的组件的方法详解

    Vue封装通过API调用的组件的方法详解

    在日常业务开发中我们会经常封装一些业务组件,下面这篇文章主要给大家介绍了关于Vue封装通过API调用的组件的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • Vue实现微信小程序中预览文件的缩放功能

    Vue实现微信小程序中预览文件的缩放功能

    在微信小程序中,默认情况下,文件预览功能不支持文档缩放,导致用户在遇到小字体时难以清晰阅读,为了解决这一问题并提升用户体验,实现文档的缩放功能至关重要,所以本文
    2024-12-12
  • vue前端编译报错的图文解决方法

    vue前端编译报错的图文解决方法

    Vue框架可以很方便的引入各种插件,但是也因此会经常遇到种编译报错,这篇文章主要给大家介绍了关于vue前端编译报错解决的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • VuePress在build打包时window document is not defined问题解决

    VuePress在build打包时window document is not defined问题解决

    这篇文章主要为大家介绍了VuePress在build打包时window document is not defined问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • Vue防抖与节流的使用介绍

    Vue防抖与节流的使用介绍

    防抖和节流的作用都是防止函数多次调用,下面这篇文章主要给大家介绍了关于vue函数防抖与节流的正确使用方法,需要的朋友可以参考下
    2022-12-12
  • 详解Vue.js 作用域、slot用法(单个slot、具名slot)

    详解Vue.js 作用域、slot用法(单个slot、具名slot)

    这篇文章主要介绍了Vue.js 作用域、slot用法(单个slot、具名slot),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • VUE搭建手机商城心得和遇到的坑

    VUE搭建手机商城心得和遇到的坑

    这篇文章主要介绍了VUE搭建手机商城心得和遇到的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02

最新评论