element-ui的select和popover共存时的问题
问题路径: https://codepen.io/jiangguangyao/pen/JjEjaYa
问题描述: 在select和popover(click触发)共存的情况下,打开popover后再点击select框,popover不会关闭。
疑问点: popover的click按照效果来看,应该是点击button打开,点击popover打开的内容区状态不变,点击button和popover之外的地方,会关闭,但和select共存时,当popover打开状态下,点击select,popover并未关闭
研究源码: 经过研究源码发现,select框是上述描述的状态,点击select的input和打开的option都不会关闭(多选情况下),点击外层则会关闭,是因为有v-clickoutside(自定义指令)
解决思路: 将popover按照源码select的设计格式进行调整。
解决方案:
- 全局注册自定义指令clickoutside
- 在js代码中引入自定义指令 import Clickoutside from 'element-ui/src/utils/clickoutside' // 从element-ui的依赖中引入
- 全局注册 const clickoutside = Vue.directive('clickoutside', Clickoutside)
- 导出 export default { clickoutside }
- main.js内使用: 引入当前js,然后在new Vue的对象内添加这个js
- 使用clickoutside 在需要点击外侧关闭的标签上写v-clickoutside='func',然后在func中写需要进行的逻辑操作即可
针对当前问题的解决方案:
需考虑的点:点击popover的reference触发成功后,点击弹出区域不关闭,点击弹出区域外的区域都关闭
因此,我们只需在popover内容区加上v-clickoutside即可
(因无法引入自定义指令,因此此处暂无demo)