因为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>

用下来暂没发现什么副作用,如有问题欢送斧正。