关于element-ui:ElementUI的elpopover实现同一个popover重复使用多次类似MessageBox

13次阅读

共计 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>

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

正文完