element UI Popover 弹出框里一带有下拉属性触发弹窗进行关闭以及位置偏移的情况问题解决方法

常见问题解决方法(百度搜罗出来的,文章底部是原文链接具体可移步原文章查阅):
select上可以设置:popperAppendToBody="false"
时间组件选择可以选teleported
el-date-picker 下拉出现偏移的设置 (:append-to-body="false")
其他的element 组件下拉出现位置偏移:也可以通过
:append-to-body="false" 或 :popper-append-to-body="false" 进行设置

原理:默认配置中,在使用到选择器组件时,一旦点击下拉选项,popover就会消失,这很明显不是我们想要的实现效果。
在hover=“click”的popover中,组件的显示与否,主要看鼠标click点击时的标签是否对应的弹出框中。如果不是的话就会隐藏,如果是的话,就不会隐藏,懂了这个逻辑,我们就应该去看一下官网是不是有对应的属性提供给我们。
可以看到,组建中的popperAppendToBody属性决定了对应的弹框append到哪个父节点上。
默认的话是body,如果这个属性改成false就变成了append到对应的select标签下面。
这个时候点击下拉选项中的内容,也相当于是在对应的父弹框中点击,而不是append到body中的标签,自然刚刚打开的popover也就不会消失了。

原文链接:https://blog.csdn.net/m0_5622...
原文链接:https://blog.csdn.net/qq_4460...

10 声望
2 粉丝
0 条评论
推荐阅读
什么?都2023年了你居然还不会table表头单元格合并?(附el-table单行、多级表头多个案例)
问题描述本文记录el-table表头合并的多种情况,并提出对应解决方案,估计能帮到部分道友原生table知识点复习我们知道:一个简单的table表格一般由一个或多个tr、th或td标签组成(嵌套)tr标签定义表格行(table-r...

水冗水孚2阅读 722

封面图
github 和 gitlab 之自定义首页样式
🎈 个性首页相信很多小伙伴在逛 github 和 gitlab 的时候会发现很多开发者的首页异常的炫酷,如 [链接]🎈 制作步骤是不是立马想拥有一个属于自己的高大上主页了从上图中我们可以看出,其实它展示的一个 readme 里面...

tiny极客3阅读 1.8k评论 4

封面图
element-ui table表头部使用checkbox状态不回显
header中即使不使用scope,也要把插槽加上(slot-scope="scope"),否则change之后无法回显表头中checkbox的勾选状态!!!!!

charlotteeeeeee1阅读 2.1k评论 1

裁剪上传图片
使用vue3和elementPlus实现上传图片裁剪参考文章地址:[链接] {代码...}

张旭超阅读 564

拒绝CV,高效开发后台系统
这几年做了一些后台系统,最多的场景就是内容管理页面,页中主要包括表单查询及各种管理操作。随着业务扩展,开发了不少类似的页面后,发现在相同项目中各个表单之间结构、风格、样式大致相同,每次新增页面都是...

coderLeo阅读 481

封面图
element-UI组件el-form如何使用自定义组件触发验证
步骤1.通过引入elementUI的混入:import emitter from 'element-ui/src/mixins/emitter';

George阅读 472

行为验证码小图标修改
最近行为验证码在很多网站逐步流行起来,对用户体验来说,比较新颖,操作简单。下面我以滑动拼图验证码和文字点选验证码为例,通过 KgCaptcha 来说说如何修改验证码中的图标。

自信的酱肘子1阅读 186

10 声望
2 粉丝
宣传栏