Due to the one-to-one binding relationship between el-popover and the reference element, when there are multiple places in a page that need to pop up similar popover boxes, if using the existing official scheme, each popover point should make a <el-popover>. If I have 10 popovers, I have to have 10 of the same el-popovers. Although can achieve, but for obsessive-compulsive disorder, it is a little difficult to accept.

Of course, I’m talking about popovers with pointing arrows and automatic positioning, not fixed positions.

The expectation is that no matter how many places a component needs to pop a popover, there will only be one popover component and everyone will call the same one. So I studied the source code and found a solution as follows:

Click on Preview

You can then further extract it as a component to make it easier to use: click on the preview effect

<html class="full"> <head> <! - introduction of style - > < link rel = "stylesheet" href = "https://unpkg.com/element-ui/lib/theme-chalk/index.css" > <! >< script SRC ="https://unpkg.com/[email protected]/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" Width =" 3px "width=" 3px" width=" 3px "width=" 3px" width=" 3px "width=" 3px" {{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 "></ I > Pop{{obj}} </a> </div> </div> <script> var Popover = element. Popover // var popoverSvc = { extends: Popover, methods: {popBy(el) {// Hide and destroy this.close() this.doDestroy(true) this.$nextTick(() => {// Display new 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>

No side effects have been found after use. Please correct me if you have any questions.