Element-ui中元素滚动时el-option超出元素区域的问题


Posted in Javascript onMay 30, 2019

复现场景, 看图

Element-ui中元素滚动时el-option超出元素区域的问题

分析原因

为简单起见, 把选项区域描述为popperEl

  • popperEl的z-index 比较大, 会覆盖在其他元素上面
  • popperEl默认是插入body元素的(可以将popper-append-to-body设为false后不插入到body)
  • popperEl是在mouseup事件里去做隐藏逻辑的, 而按下鼠标, 移动滚动条的时候, 并没有触发mouseup事件.
  • popperEl并没有监听滚动事件(没法监听, 也没必要监听)

解决方案

 方案一

我最初想到的解决方案是通过css解决,通过popper-class属性给Select下拉框添加类名,然后用css来做, 试了一下这个方案并不可行(只能在某些特定的场景下起作用),遂放弃,可能最优雅最高性能的方法就是用css来搞定, 有踩过这个坑的朋友请指点一下

方案二

通过监听$root的scroll事件,利用事件冒泡,只需要在根元素上添加scroll事件的监听就可以了, 测试一番之后, 发现scroll事件根本不支持冒泡, event.bubbles为false)。

方案三

通过查看element-ui 的select.vue, 发现控制popperEl显隐的是visible 和 emptyText这两个实例属性, 很明显, emptytext是不能动的, 只能在visible上动手脚了. 这里放一小段源码

<transition
 name="el-zoom-in-top"
 @before-enter="handleMenuEnter"
 @after-leave="doDestroy">
 <el-select-menu
  ref="popper"
  :append-to-body="popperAppendToBody"
  v-show="visible && emptyText !== false">
  <el-scrollbar
   tag="ul"
   wrap-class="el-select-dropdown__wrap"
   view-class="el-select-dropdown__list"
   ref="scrollbar"
   :class="{ 'is-empty': !allowCreate && query && filteredOptionsCount === 0 }"
   v-show="options.length > 0 && !loading">
   <el-option
    :value="query"
    created
    v-if="showNewOption">
   </el-option>
   <slot></slot>
  </el-scrollbar>
  <p
   class="el-select-dropdown__empty"
   v-if="emptyText &&
    (!allowCreate || loading || (allowCreate && options.length === 0 ))">
   {{ emptyText }}
  </p>
 </el-select-menu>
</transition>

全局搜索this.visible, 发现了这个方法

handleClose() {
  this.visible = false;
},

这下好办了, 按图索骥, 顺藤摸瓜, 找到这个

<template>
 <div
  class="el-select"
  :class="[selectSize ? 'el-select--' + selectSize : '']"
  @click.stop="toggleMenu"
  v-clickoutside="handleClose">
  后面的省略...

找到v-clickoutside指令之后, 豁然开朗 原来点击其他区域的时候, popperEl会自动关闭的奥秘在这里, 结合方案二的灵感, 现给出如下代码.

// src/mixins/fackClickOutSide.js
let lock = true;
let el = null;
const MousedownEvent = new Event('mousedown', {bubbles:true});
const MouseupEvent = new Event('mouseup', {bubbles:true});
const fakeClickOutSide = () => {
 document.dispatchEvent(MousedownEvent);
 document.dispatchEvent(MouseupEvent);
 lock = true; // console.log('dispatchEvent');
};
const mousedownHandle = e => {
 let classList = e.target.classList;
 if(classList.contains('el-select__caret') || classList.contains('el-input__inner')) {
  lock = false;
  return;
 }
 if(lock) return;
 fakeClickOutSide();
};
const mousewheelHandle = e => {
 if(lock || e.target.classList.contains('el-select-dropdown__item') || e.target.parentNode.classList.contains('el-select-dropdown__item')) return;
 fakeClickOutSide();
};
const eventListener = (type) => {
 el[type + 'EventListener']('mousedown', mousedownHandle);
 window[type + 'EventListener']('mousewheel', mousewheelHandle);
 window[type + 'EventListener']('DOMMouseScroll', mousewheelHandle); // fireFox 3.5+ 
}
export default {
 mounted() {
  el = this.$root.$el;
  el.addFakeClickOutSideEventCount = el.addFakeClickOutSideEventCount || 0;
  (! el.addFakeClickOutSideEventCount) && this.$nextTick(() => {
   eventListener('add');
  });
  el.addFakeClickOutSideEventCount += 1;
 },
 destroyed() {
  eventListener('remove');
  el.addFakeClickOutSideEventCount -= 1;
 },
}

使用姿势

建议在根组件上混合进去, 当然,你也可以在需要的组件上去混合(不太建议, 这点代码性能损耗应该不大吧, 哈哈哈)

// src/App.vue
import fakeClickOutSide from '@/mixins/fakeClickOutSide.js'
export default {
  name: 'App',
  mixins: [fakeClickOutSide],
}

测试

常规基础用法 和 自定义模板用法(模板内没有嵌套的标签) 均完美通过.

自定义模板内如果嵌套多级标签, 需要在标签上添加标记,然后在mousewheel事件回调里判断是否有这个标记.

总结

依然存在的问题(隐患):

  • 在mousewheel事件回调没有做节流, 考虑到有锁, 且滚轮事件触发的频率也不是很高(相对于mousemove事件来讲), 性能消耗并不大, 遂不做节流(主要是懒).
  • 在mousewheel事件回调里,判断event.target 是否是在popperEl元素内部的方法感觉不是很靠谱, 且效率不高, 在mousedown 事件里判断是不是el-select元素的方法也存在同样的隐患, 后期再想办法修改(修改是不可能修改的, 又不是不能用).
  • 在自定义模板用法里, 如果有嵌套的标签, 那么在mousewheel事件回调里判断event.target 是不是在popperEl元素内部的方法就崩溃了(这是个雷), 目前的解决办法是手动在嵌套的标签上都加上一个标记, 在事件里,添加这个标记的判断, 但是这种做法对于已经编写完成的模板无效, 只能再次修改, 考虑过使用递归向上查找, 但是效率不高, 性能消耗太大, 且自定义el-option模板这种情况在我们现阶段的业务中几乎不存在, 所以就没有考虑这个bug.

感谢一位大佬长期以来给予的帮助.

Javascript 相关文章推荐
css图片自适应大小
Nov 28 Javascript
js trim函数 去空格函数与正则集锦
Nov 20 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
纯javascript版日历控件
Nov 24 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
Node.js实现断点续传
Jun 23 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 #Javascript
细说Vue组件的服务器端渲染的过程
May 30 #Javascript
了解JavaScript中let语句
May 30 #Javascript
koa+jwt实现token验证与刷新功能
May 30 #Javascript
深入理解JavaScript 箭头函数
May 30 #Javascript
socket在egg中的使用实例代码详解
May 30 #Javascript
深入了解JavaScript 私有化
May 30 #Javascript
You might like
动手学习无线电
2021/03/10 无线电
iis6+javascript Add an Extension File
2007/06/13 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
Python算法应用实战之栈详解
2017/02/04 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
pycharm修改file type方式
2019/11/19 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
函授大专自我鉴定
2013/11/01 职场文书
幼教求职信
2014/03/12 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
2015年药店工作总结
2015/04/20 职场文书
飞越疯人院观后感
2015/06/09 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
JavaScript实现班级抽签小程序
2021/05/19 Javascript
Java 定时任务技术趋势简介
2022/05/04 Java/Android