共计 1180 个字符,预计需要花费 3 分钟才能阅读完成。
因为 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">
<el-popover
ref="pop1"
placement="bottom-start"
width="460"
v-model="visible">
<div> 以后:{{curObj}}</div>
</el-popover>
<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}}
</div>
</div>
<script>
new Vue({
el:'#app',
data() {
return {objs: [1,2,3,4,5],
visible: false,
curObj: ''
}
},
methods:{showPop(e, obj){
this.curObj = obj
// 要害代码:// 先暗藏并销毁之前显示的
this.visible = false
this.$refs.pop1.doDestroy(true)
this.$nextTick(() => {
// 显示新的
this.$refs.pop1.referenceElm = e.target
this.visible = true
})
}
}
});
</script>
</body>
</html>
用下来暂没发现什么副作用,如有问题欢送斧正。
正文完
发表至: element-ui
2021-06-04