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>
复制代码
posted @   微笑掩埋了眼泪的骄傲  阅读(204)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示