vue 弹窗设置点击空白不关闭
时间: 2023-08-11 08:03:37 浏览: 110
vue通过指令(directives)实现点击空白处收起下拉框
在 Vue 弹窗中,你可以通过以下方式设置点击空白不关闭弹窗:
1. 在弹窗的根元素上绑定 @click.stop 事件,阻止点击事件继续冒泡到父元素,从而防止关闭弹窗。
```html
<template>
<div class="popup" @click.stop>
<!-- 弹窗内容 -->
</div>
</template>
```
2. 如果你使用了第三方弹窗组件,可以查看组件文档是否提供了类似的配置项。例如,element-ui 的 Dialog 组件提供了 `close-on-click-modal` 属性,用于控制点击遮罩层是否关闭弹窗。
```html
<el-dialog :visible="dialogVisible" :close-on-click-modal="false">
<!-- 弹窗内容 -->
</el-dialog>
```
以上两种方式都可以实现点击空白不关闭弹窗的效果。
阅读全文