需求描述

今天，在做Element+Vue项目时遇到一个需求：甲方要求在Dialog打开状态下，点击该Dialog以外的区域会导致该Dialog关闭；正确的状态应该是只有在点击关闭按钮，或者是Dialog内的其他操作性按钮才能使得Dialog的状态变为关闭。

问题分析

之所以会产生这种问题，是因为elementUi在对Dialog组件做初始化的时候，默认让该Dialog在点击组件以外区域会导致该组件关闭，所以elementUI 一定会将该属性暴露出来让开发人员进行配置。
通过查询ElementUI的官方文档，发现在Dialog下有个‘close-on-click-modal’属性，该属性默认值为‘True’，作用为：是否可以通过点击 modal 关闭 Dialog。
所以，通过设置Dialog下的close-on-click-modal属性为‘false’，即可解决该问题。

问题解决方式

解决方式一：将Dialog下的close-on-click-modal属性改为‘false’。
- 需要注意的是：在使用close-on-click-modal属性时，必须在该属性前加“:”。

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%":close-on-click-modal='false'><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span>
</el-dialog><script>export default {data() {return {dialogVisible: false};}};
</script>

element UI dialog点击dialog区域外会关闭dialog相关推荐

点击edittext 区域外隐藏输入法和点击edittext 显示输入法
在界面开发过程中,需要使用edittext来输入内容用来匹配查找,然后点击其他区域收起输入法. 本文在一个布局里有edittext 和一个list view ,edittext 输入内容,搜索list ...
如何实现点击div区域外隐藏div区域
1 遮罩层,有一个遮罩层,盖住其他地方,然后只有目标div可以点击,点击遮罩层就可以隐藏: 2.body上绑定事件,关闭,组件销毁前把事件移除. <div id="badge" ...
if vue 跳出_vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展. v-if 是直接删除dom节点, 就是这 ...
element ui表格点击整行选择_element-ui实现动态表头的表格问题汇总
demo代码: el-table动态表头 {{tableBody[scope.$index][idx]}} 动态表格是生成列,也就是每一个然后再根据所有列去遍历生成行,这样一个过程,知道这些,要做的就 ...
html点击空白处关闭,vue中实现点击空白区域关闭弹窗的两种方法
1. 第一种做法首页在外层容器里面取一个名字为main,即ref="main",当bankSwitch为true的时候,弹窗出现你好我是弹窗里面的内容部分所触发的事件如下: ...
点击遮罩层的背景关闭遮罩层
开发工具与关键技术:Adobe Dreamweaver CC 作者:黄灿撰写时间:2019.1.16 在模仿华为官方网页的练习当中我发现华为官网中有一个遮罩层是随便点击遮罩层的背景也能关闭掉遮罩层, ...
点击遮罩层的背景关闭遮罩层（HTML）
在模仿华为官方网页的练习当中我发现华为官网中有一个遮罩层是随便点击遮罩层的背景也能关闭掉遮罩层,但唯独点击内容区域不会关闭掉遮罩层.于是我开始模仿这个写案例,连内容也一模一样(因为这个练习就是要写出和 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
Element UI Dialog 对话框改成固定高度，超出部分滚动条滚动
问题描述 elememt ui 中的el-dialog对话框如果内容过多高度会被无限拉长.要将其设置成固定高度,此处我设置的是页面总高度的80%,内容过多时在对话框内出现滚动条.但是这样设置会造成高度 ...

element UI dialog点击dialog区域外会关闭dialog

需求描述

问题分析

问题解决方式

element UI dialog点击dialog区域外会关闭dialog相关推荐

最新文章

热门文章