近期公司开发新项目,需要基于vue3+element-plus开发,一直在用vue2开发,刚开始听到还挺焦虑,不过写着写着就还好吧~最开始也遇到了很多坑,也没来得及记录下来,等后面有空了再整理一下,今天先记一下element-plus里面el-popover遇到的坑。
先说一下需求,在table-header里放置一个按钮,用户点击按钮会弹出一个气泡对话框,里面包含取消,确认按钮,当用户按取消,确认按钮对话框会关闭,点击其他空白处也会关闭。
根据UI提供的样式,使用了el-popover组件,它可以自定义内容,放置我们想要的,这里trigger 属性被用来决定 popover 的触发方式,支持的触发方式: hover、click、focus 或 contextmenu。 如果你想手动控制它,你可以设置 v-model:visible,如果我们想要添加取消确认按钮去控制它,设置了 v-model:visible,这个时候就会发现当点击空白的时候,窗口不会关闭,就很烦躁,本来以为加个属性就好了,结果这个问题我百度了好久好久,都想放弃了,最后终于让我解决了,废话不多说,直接上代码吧~<template> <el-popover trigger="click" ref="setRemovePop" placement="top" :width="160"> <p>Are you sure to delete this?</p> <div style="text-align: right; margin: 0"> <el-button size="small" text @click="cancelRemove()">取消</el-button> <el-button size="small" type="primary" @click="cancelRemove()" >确定</el-button <template #reference> <el-button >Delete111</el-button> </template> </el-popover> </template> <script setup> import { ref,onMounted } from 'vue' let setRemovePop = ref(null); const cancelRemove = ()=>{ setRemovePop.value.hide();