element-ui的el-popover挂载问题
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element-ui的el-popover挂载问题相关的知识,希望对你有一定的参考价值。
参考技术A 首先,el-popover默认挂载在body节点上,也就是说通过查看控制台的html节点时,会发现el-popover与app节点同级。这个时候就会带来一些麻烦事~
比如说我通过某些方法获取到css变量并注入在form表单节点上,此时我需要修改el-popover弹窗样式,使用css变量以达到更换主题效果。比如下方的wrapperStyle里就包含几十个css变量,但这些变量所挂载的节点是body下的一个表单,表单里有多个级联选择器。
此时使用css变量则不会生效,通过控制台查找,发现body和html节点上并未发现那几十个CSS变量,因此需要将弹窗挂载节点进行更改
element-ui文档在级联选择器那里并未说明哪个属性,但是翻阅文档发现涉及popover弹窗的提及到这么一个属性:popper-append-to-body="false",设置后即可
此时再去控制台查看,发现级联选择器的弹窗被表单容器包裹,css变量被找到,样式生效。
Element-UI的el-popover实现同一个popover重复使用多次(类似MessageBox)
由于el-popover与reference元素是一对一的绑定关系,当一个页面内有多处需要弹出类似的popover框时,如使用现有官方方案,就得每个弹出点都做一个<el-popover>。如果有10个弹出点,就要有10个相同的el-popover。虽然能实现,但对于强迫症来说,实在有点难接受。
当然这里说的都是带指向箭头、自动定位的popover,而不是那种固定位置的。
期望是:一个组件内不管有多少地方需要弹出popover,popover组件也只需要有一个,大家都调用同一个就行了。于是研究了源码,找到一个方案如下:
点击预览效果
然后,可以进一步提取为组件,这样用起来就更方便了:
点击预览效果
<html class="full">
<head>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/vue@2.6.13/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
.full { height: 100%;width:100% }
</style>
<body class="full">
<div id="app">
<div>
<popover-svc
ref="pop1"
placement="bottom-start"
>
<div>当前:{{curObj}}</div>
</popover-svc>
<a v-for="(obj,index) in objs" :key="obj" style="cursor:pointer"
@click="e=> showPop(e, obj)">
<i class="el-icon-aim aim-icon"></i>
Pop{{obj}}
</a>
</div>
</div>
<script>
var Popover = ELEMENT.Popover
//组件方式
var popoverSvc = {
extends: Popover,
methods: {
popBy(el) {
//先隐藏并销毁之前显示的
this.close()
this.doDestroy(true)
this.$nextTick(() => {
//显示新的
this.referenceElm = this.$refs.reference = el
this.showPopper = true
this.$emit(\'input\', true)
})
},
close() {
this.showPopper = false
this.$emit(\'input\', false)
}
},
}
new Vue({
el:\'#app\',
data() {
return {
objs: [1,2,3,4,5],
curObj: \'\'
}
},
methods:{
showPop(e, obj){
this.curObj = obj
this.$refs.pop1.popBy(e.target)
}
},
components: {
popoverSvc: popoverSvc
}
});
</script>
</body>
</html>
用下来暂没发现什么副作用,如有问题欢迎指正。
以上是关于element-ui的el-popover挂载问题的主要内容,如果未能解决你的问题,请参考以下文章
element-ui解决el-popover的边界重新计算元素位置的问题
$Django 路飞之小知识回顾,Vue之样式element-ui,Vue绑定图片--mounted页面挂载--路由携带参数