因为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>
用下来暂没发现什么副作用,如有问题欢送斧正。