element-ui组件Popover 弹出框，el-popover样式、定位以及二次确认弹出框自动关闭问题

先说定位问题

如果往里边动态添加内容，定位偏移

下面是解决办法:

绑定ref，最关键的是有这行代码
:popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"
直接粘贴就行，这是html部分，在js部分也有一行代码

<el-popover placement="top" trigger="click" width="470" ref="popoverRef" :popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"><el-button slot="reference">click 激活</el-button>
</el-popover>

这是JS部分代码，this.$refs.popoverRef.updatePopper()这行代码意思是数据更新完重新计算位置，写在$nextTick里确保一定是数据更新完成之后，这几行代码放在你动态更新 el-popover 里的内容那行代码之后

this.$nextTick(() => {this.$refs.popoverRef.updatePopper()
})

接着说二次确认， el-popover 会自动关闭。需求：不自动关闭，继续展示数据。

因为我写的里边有删除操作，所以有二次确认的操作，当我点确定或者取消删除的时候，el-popover就关闭了，但删除完肯定是不想关闭的，肯定想看到列表删了没。

下面就是解决办法：

上边已经绑定ref了，等会可以直接用ref，如果没绑定ref，现在绑定ref，绑定之后打印一下

console.log(this.$refs.popoverRef)，

你会看到下面这些，里边有两个函数，这两个函数就是关闭弹框，显示弹框，如果你不想关闭，

在你操作的地方写下这行代码

this.$refs.popoverRef.doShow();

同理如果你想关闭，调这个方法 this.$refs.popoverRef.doClose();

最后讲样式问题，你会发现怎么调样式都调不动，不论是深度选择器，还是行间，都调不动样式。

下面是我的需求，因为我是动态添加和删除数据的，添加到一定高度，我想让内容可以滚动，但是不论我怎么设置最大高度都不行。

解决办法：

<el-popover placement="top" trigger="click" width="470" popper-class="el_popover_class">

添加 popper-class属性，这个属性就是我们平时的 class属性，这不就好办了，我就去下面写样式了，但是发现没有用，

先说解决办法，之后说原因。

在App.vue里边写你要写的css样式，这是我的，你们可以参考

.el_popover_class{max-height: 440px !important;overflow-y: auto !important;
}
// 这个是我不想要滚动条,去掉滚动条的css代码,你们要的话可以不写
.el_popover_class::-webkit-scrollbar {display: none !important;
}

原因可以看下面这张图,你会发现 app 和 el-popover 是平级，又因为我们每个组件的style标签都写有 scoped 属性，所以在组件里写样式不起效

点旁边空白，弹窗消失，再次点击的时候，数据不更新，给人的感觉就是这一块没有v-if

有两个事件( show 、hide )，可以解决这个问题，有什么需求可以写在这两个事件函数里

<el-popover placement="top" trigger="click" width="470" v-if="infoTiem.userType=='PATIENT'" ref="popoverRef" :popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }" popper-class="el-popover_oue" @show="onPopoverShow" @hide="onPopoverHide">

这就是我用 el-popover 这个组件遇到的问题，希望对你们有帮助

element-ui组件Popover 弹出框，el-popover样式、定位以及二次确认弹出框自动关闭问题相关推荐

Element UI 组件库分析和二次开发（一）
我的本地开发环境:M1 芯片Mac,node v12.22.10. 一.Element UI 组件库二次开发的大致流程 1. 从 Element 官方 clone 一份 dev 源码到本地 2. 安装 ...
Element ui 组件中用键盘事件
//这是表单 <el-form:model="ruleForm"status-icon:rules="rules"ref="ruleForm&q ...
Modal的二次确认弹框触发时机
Modal的二次确认弹框触发时机 react中modal中的值变化了之后点击取消弹出二次确认弹窗,要是值没有变化可以直接关闭modal. 在项目里边有个需求,就是需要我们的modal弹窗(modal里 ...
Element UI组件介绍
简介 element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面. 1.安装Element UI,通过vue脚手架创建项 vue init webpa ...
uniapp uni-file-picker 组件删除时增加二次确认弹框
全文放在下面,先写一下思路 1.思路首先看了一下api文档,只有删除的事件,然后发现抛出的删除事件是已经删除了图片之后的事件,然后去源码里看在哪里抛出的删除发现是在点击按钮的事件里做的删除,所以我 ...
Vue引入第三方Element UI 组件
Element UI 官网地址: 各种基于Vue.js的各种UI组件 https://element.eleme.cn/#/zh-CN/component/quickstart https://ele ...
解决vue-admin-template插件element UI组件默认英文改中文
其实vue-admin-template这个框架原来就有的 1.element UI里的组件改中文模式如图: src/main.js: 2.第三方插件如tinymic这个富文本插件改成中文显示,上面方 ...
修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
解决Element UI 组件el-popover图片溢出屏幕可视区域问题（popover定位问题）
分析原因不固定popver大小,想让图片自适应完整显示时会出现这个情况. 原因:是图片未加载完成,即图片的宽高未确定,el-popover就已经初始化完成了,弹出的位置已确定.等图片加载完,内容撑开 ...

element-ui组件Popover 弹出框，el-popover样式、定位以及二次确认弹出框自动关闭问题

element-ui组件Popover 弹出框，el-popover样式、定位以及二次确认弹出框自动关闭问题相关推荐

最新文章

热门文章

element-ui组件Popover 弹出框，el-popover样式、定位以及二次确认弹出框自动关闭 问题

element-ui组件Popover 弹出框，el-popover样式、定位以及二次确认弹出框自动关闭 问题相关推荐

最新文章

热门文章

element-ui组件Popover 弹出框，el-popover样式、定位以及二次确认弹出框自动关闭问题

element-ui组件Popover 弹出框，el-popover样式、定位以及二次确认弹出框自动关闭问题相关推荐