elementui 下拉框出现脱离 超出弹框解决方案
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
出现原因 :
父盒子弹框因为内容过多只能设置隐藏滚动的效果,但是elementui 下拉框的z-index权重最高,会出现脱离或者超出弹框的现象.
如果调低权重,则会出现节点被弹框覆盖的情况
解决方案
经过观察,elementui 下拉框只有在聚焦的时候才会出现,所以我门只需要在弹框内容出现滚动的时候,关闭聚焦即可实现此种问题,但是因为是在滚动监听下操作,所以最好加上节流函数提升页面性能
<el-select class=input-size ref="multiSelect1" v-model="form.installationStatus" placeholder="请选择状态"
clearable>
<el-option v-for="item in installationStatusType" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
-----------------------------------------------------------------------------------------
data() {
return {
// 节流开关
timer: 0
}
}
----------------------------------------------------------------------------------------
mounted(){
// 添加滚动事件监听
获取父盒子DOM.addEventListener('scroll', () => {
// 设置节流函数,提升性能
if (this.timer !== 0) { // timer不等于0,就是说明上一个定时器还没有执行完毕
return;
}
this.timer = setTimeout(() => {
// 去除聚集效果
this.$refs.multiSelect.blur();
// 执行完毕,一定将timer设置 0 , 支持下一次的执行
this.timer = 0
}, 20)
})
}
然后就完美解决了问题!
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)