使用方法
动画设置
<el-popover
trigger="click"
placement="bottom-start"
v-model="visible"
transition="el-zoom-in-top"
:close-delay="0">
内容
<div slot="reference">
点击
</div>
</el-popover>
常见问题
无法正常定位
在el-popver标签中添加属性
ref="newProjectPopover"
:popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"
可以查看poper.js 的官方文档
在dom渲染之后调用方法:
mounted() {
this.$refs.newProjectPopover.updatePopper();
// 或者 在你请求接口后,await this.$nextTick();
},
这样update之后就可以正常显示位置了。
挂载到父级上
通过为el-popover添加配置项,将其挂载到父级上面:
<el-popover
:append-to-body="false"
:popper-options="{
boundariesElement: 'body',
gpuAcceleration: true,
positionFixed: true,
preventOverflow: true
}">
</el-popover>
设置自定义样式:如果我们使用了scoped并需要添加样式,只需要在组件内添加样式即可,不需要到全局添加。
::v-deep.my-popover {...}
注意事项: 因为el-popover本身自带一个绝对定位,需要给父组件添加相对定位,否则可能导致定位错乱。