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

这篇具有很好参考价值的文章主要介绍了Vue中ElementUI结合transform使用时,修复el-select弹框定位不准确问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        在大屏开发中,比如将1920*1080放到更大像素(3500*2400)大屏上演示,此时需要使用到transform来对页面进行缩放,但是此时发现弹框定位出错问题,无法准备定位到实际位置。之前写过一篇讲解的是ElementUI中的<el-date-picker />组件修复定位问题,经过网友不断发现和提问,原来不同组件解决方案是不同的,这讲解下 <el-select />组件如何修复。

        <el-date-picker />组件地址:https://blog.csdn.net/jiciqiang/article/details/132456103#comments_30896747

        接下来我们讲下select组件的popper弹框错位问题。

Vue中ElementUI结合transform使用时,修复el-select弹框定位不准确问题,Vue.js,vue.js,elementui,前端,javascript

一、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弹框的调整,如下图:

Vue中ElementUI结合transform使用时,修复el-select弹框定位不准确问题,Vue.js,vue.js,elementui,前端,javascript

        要获取和picker一样的数据,得使用$refs获取,代码如下:

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

如下图,此时已拿到和picker一样的数据结果,可以通过popperJS和$el进行修复定准了:

Vue中ElementUI结合transform使用时,修复el-select弹框定位不准确问题,Vue.js,vue.js,elementui,前端,javascript

三、回调函数

        这里直接调用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.js,vue.js,elementui,前端,javascript文章来源地址https://www.toymoban.com/news/detail-803133.html

到了这里,关于Vue中ElementUI结合transform使用时,修复el-select弹框定位不准确问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【elementUI】el-select相关问题

    :popper-append-to-body=\\\"false\\\" v-if=\\\"item.value !== form.id\\\"

    2024年01月21日
    浏览(46)
  • elementUI --- el-select 下拉框 日历 级联选择

    element UI 组件库中的 select 选择器 中下拉列表的样式,在页面渲染的时候,总是渲染为仅次于body级别的div ,这样子覆盖样子会影响全局其他的select选择器下拉框样式,试图通过给el-select加父标签来覆盖,然而并没有卵用。 控制台看到的渲染结果: 解决方法: 通过 popper-cla

    2024年02月15日
    浏览(50)
  • 【elementUI】el-select选择框位置错位、偏移bug

    在el-select组件中,可能会由于option选项过多而导致下拉框位置错乱、偏移的情况,我个人试验大概是在5-6个option以上时,该bug就会出现。 这个时候需要手动为下拉框设置: popper-append-to-body=\\\"false\\\" 属性,并设置以下CSS样式解决问题:

    2024年02月15日
    浏览(47)
  • elementUI中el-select数据分页懒加载实现

    工作中使用elementUI框架时, 会经常用到下拉框展示数据,如果数据量很大会影响页面的渲染加载速度。遇到这种情况,通常后端代码会将数据做成分页查询,前端下拉框组件也要支持滑动到底部会自动加载下一页数据。话不多说,直接上代码。 这样子组件下拉框就实现了检索、

    2024年02月12日
    浏览(52)
  • 基于elementUI封装的带复选框el-checkbox的下拉多选el-select组件

    组件:MultipleSelect.vue 使用:index.vue 多选框多选不换行

    2024年01月22日
    浏览(49)
  • 【Element】el-select下拉选择器搜索选项,自定义搜索方法,结合后端接口远程搜索

    当我们有多个选项时,我们一般会使用下拉选择器 el-select 展示选项,选项不多的情况下,我们可以进行手动下拉选择。 那当选项有100个,甚至1000个的时候,需要一个个找选项,手动下拉选择就太累了,这时候我们可以利用搜索功能快速查找选项 可以利用搜索功能快速查找

    2024年02月06日
    浏览(44)
  • vue el-select默认值

    情景:在调取接口后渲染数据时需要将选取的select设为默认值,具体案例为调取省份数据后,根据省份获取其对应的城市数据,并将其对应的el-select默认选中该数据的状态 问题:看到网上很多说直接改el-select绑定的v-model的值,这样做就会掉入select框中仅仅是显示相应的文字

    2024年02月13日
    浏览(55)
  • vue+el-select下拉实现:全选、反选、清空功能

    问题描述: el-select下拉框要求实现全选功能。具体功能包括: 当选择【全选】时,所有选项全部被勾选; 当选择【反选】时,已选择选项变为未选择选项,未选项变为已选项 当选择【清空】时,所有选项变为未选 如下图: 1、给el-select增加【全选】【清空】【反选】按钮

    2024年02月10日
    浏览(67)
  • el-select 使用

    案例:

    2024年02月10日
    浏览(38)
  • Element VUE修改 el-input和el-select长度

     没有设置样式之前,采用默认样式,界面如下:  模拟代码如下  为了美观需要修改下样式,使文本框与下拉框的长度一致 第一种:添加style属性,采用行内样式修改长度  第二种:添加class属性,采用内部样式  stule标签中设置长度 第三种:找到element-ui.scss,采用外部样式

    2024年02月11日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包