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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库