vue多个el-popover使用（打开不卡顿，可正常关闭）

最近写vue遇到了点问题

　　同页面多个el-popover打开卡顿问题、无法关闭问题

解决方案，组件化封装el-popover

组件模板定义

<template>
    <div class="screen">
      <el-popover
        :placement="placement"
        :width="screenWidth"
        trigger="click"
        popper-class="popperScreen"
        :title="title"
        :ref="myRef"
      >
        <div>
          <slot name="myContext"></slot>
        </div>
        <div style="text-align: center; margin: 10px 0 0 0">
          <el-button class="smallBtn" @click="determine">确定</el-button>
          <el-button class="skyBtn" @click="cancel">取消</el-button>
        </div>
        <!-- <div slot="reference" class="selectStyle mt5 ml10">{{ screenTitle }}</div> -->
        <div slot="reference" class="selectStyle mt5 ml10"><slot name="myReference"></slot></div>
        
      </el-popover>
    </div>
  </template>
  <script>
  export default {
    name: "my-popover",
    data() {
      return {}
    },
    props: {
      myRef:{
        type: String,
        default: 'myRef'
      },
      // 箭头位置
      placement: {
        type: String,
        default: 'bottom-start'
      },
      // 宽度
      screenWidth: {
        type: String,
        default: '400'
      },
      // 标题
      title: {
        type: String,
        default: '请选择筛选条件'
      },
      // 按钮标题
      screenTitle: {
        type: String,
        default: '请筛选'
      }
    },
    methods: {
      determine() {
        this.$emit('submitScreenData')
      },
      cancel() {
        this.$emit('resetScreenData')
      }
    }
  }
  </script>
  <style lang="less">
  .el-popover.popperScreen {
    margin-top: 5px !important;
  }
</style>
  

页面注册组件

import MyPopover from './my-popover.vue'

页面使用

<template>
　　<my-popover ref="customerInvoice" :myRef="`quantity-${scope.$index}`" :screenWidth="`300px`" @resetScreenData="resetScreenData(scope.$index)" 
　　@submitScreenData="submitScreenData(scope.$index)">
　　　　<el-input slot="myContext" v-model="repertoryConsumeQuantity" type="text" clearable ></el-input>
　　　　<span slot="myReference"  style="color:blue">{{ scope.row.consumeQuantity}}</span>
　　</my-popover>
</template>

<script>
methods: {
    resetScreenData(index) {
      console.log(index)
      this.$refs.customerInvoice.$refs[`quantity-${index}`].doClose()
    },
    submitScreenData(index) {
      console.log(index)
      this.$refs.customerInvoice.$refs[`quantity-${index}`].doClose()
    },
}
</script>