需求:用户点击按钮,弹出框出现,弹出框里有确认&取消按钮,点击确认&取消&其他区域,弹出框消失。
文档上是这样写的
但是如果绑定了visible,那么弹出框所有的弹出隐藏都必须手动控制 ,也没有点击空白处隐藏弹出框了。所以还是不设置visible属性。
可以通过绑定弹出框的ref,来通过ref的value.hide()实现手动隐藏。
<template>
<el-popover trigger="click" ref="popoverRef" placement="top">
<p>Are you sure to delete this?</p>
<div style="text-align: right; margin: 0">
<el-button size="small" text @click="handleClose()">cancel</el-button>
<el-button size="small" type="primary" @click="handleClose()">confirm</el-button>
</div>
<template #reference>
<el-button>Delete</el-button>
</template>
</el-popover>
</template>
<script lang='ts' setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
//获取弹出框组件的ref
const popoverRef = ref<any>(null);
// 关闭
const handleClose = () => {
//利用hiden()来隐藏。
popoverRef.value.hide();
};
},
});
</script>
作者:卑微程序喵
链接:https://www.jianshu.com/p/3b2380a3920d
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。