使用场景
在使用Dialog组件时,当点击弹框外的空白处时,仍然会触发关闭弹框事件,一些业务场景不适合使用这种交互,需要只能点击关闭和取消按钮才消失。
方法一文章来源:https://www.toymoban.com/news/detail-513869.html
// close-on-click-modal 是否可以通过点击 modal 关闭 Dialog
// close-on-press-escape 是否可以通过按下 ESC 关闭 Dialog
<el-dialog
:close-on-click-modal="false"
:close-on-press-escape="false"
v-if="businessReview"
:visible.sync="businessReview"
title="业务"
top="25vh"
width="320px"
class="business-review-dialog">
</el-dialog>
方法二文章来源地址https://www.toymoban.com/news/detail-513869.html
// main.js 中可以全局设置 点击空白处、按下ESC不能关闭Dialog弹窗
// 首先你得保证在main.js里面引入了 element-ui
import ElementUI from 'element-ui'
// 全局修改默认配置,点击空白处不能关闭弹窗
ElementUI.Dialog.props.closeOnClickModal.default = false
// 全局修改默认配置,按下ESC不能关闭弹窗
ElementUI.Dialog.props.closeOnPressEscape.default = false
Vue.use(ElementUI)
到了这里,关于el-dialog点击空白不允许关闭,只能点击关闭和取消按钮才消失的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!