前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >el-dialog设置点击空白处不自动关闭

el-dialog设置点击空白处不自动关闭

作者头像
Ant丶
发布2023-08-16 08:19:07
1.6K0
发布2023-08-16 08:19:07
举报
文章被收录于专栏:cayzlhcayzlh

el-dialog设置点击空白处不自动关闭

要阻止 <el-dialog> 在点击空白处时自动关闭,可以使用 :close-on-click-modal="false" 属性。

代码语言:javascript
复制
<template>
  <div>
    <el-dialog
      :visible="dialogVisible"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <!-- 对话框内容 -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    }
  }
};
</script>

在上述示例中,我们通过将 :close-on-click-modal="false" 应用于 <el-dialog> 组件来禁止点击空白处时自动关闭对话框。这样,无论用户点击对话框外的区域,对话框都不会关闭。

你可以根据你的实际情况修改示例代码中的其他部分。dialogVisible 数据属性用于控制对话框的显示与隐藏,showDialog 方法用于打开对话框,closeDialog 方法用于关闭对话框。

请注意,除了点击空白处关闭对话框,用户还可以通过点击右上角的关闭按钮或按下 Esc 键来关闭对话框。如果你想禁止这些方式关闭对话框,可以进一步调整相关的属性和事件处理。

文章链接

https://www.cayzlh.com/post/20230719/

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2023-07-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • el-dialog设置点击空白处不自动关闭
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档