el-dialog点击空白不允许关闭,只能点击关闭和取消按钮才消失

这篇具有很好参考价值的文章主要介绍了el-dialog点击空白不允许关闭,只能点击关闭和取消按钮才消失。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用场景

在使用Dialog组件时,当点击弹框外的空白处时,仍然会触发关闭弹框事件,一些业务场景不适合使用这种交互,需要只能点击关闭和取消按钮才消失。

el-dialog点击空白不允许关闭,只能点击关闭和取消按钮才消失

方法一

// 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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Element ui关闭el-dialog时清除数据

    如果是按叉叉关闭或者点表单以外空白处关闭的话 可以给el-dialog添加    在methods里添加函数 如果是按取消按钮清除数据,也可以给取消按钮绑定点击事件,点击取消则调用closeForm函数。 注意: 要为每个 form-item 加上 prop 属性,要不然无法清空 resetFields() 方法是重置表单,重

    2024年02月11日
    浏览(33)
  • el-dialog点击esc退出时如何清除数据,如何触发方法

    例如下面的el-dialog 当:visible.sync的时候才能键盘esc控制关闭窗口 当@close的时候,键盘esc关闭可以触发方法 注意,点击右上角叉叉关闭、点击自己的取消按钮触发:visible.sync=\\\"open\\\"方法关闭同样会触发@close方法

    2024年02月06日
    浏览(32)
  • element-ui dialog弹窗 设置点击空白处不关闭

    根据官网提供方法 场景:vue实现的网站有两个弹窗同时出现时,关闭报警,批量进度条弹窗也关闭了, 1、每一个页面都有可能出现的报警弹窗, 2、页面a批量操控硬件添加操作的进度条弹窗 开始以为是因为点击报警弹窗,相当于点击modal(空白处)所以导致关闭报警弹窗的同

    2024年02月09日
    浏览(27)
  • element-ui中更换el-dialog弹窗中默认的关闭按钮

    在使用 element-ui 框架里的 el-dialog 组件时,要修改弹窗里默认的关闭图标;如下图所示:左边是想要替换后的;右边是组件默认的关闭图标; 通过检查组件的元素;发现组件默认的关闭是一个图标;通过图标的形式展现的。 那就可以通过 CSS 隐藏当前的图标;然后在当前图标

    2024年02月12日
    浏览(38)
  • 在el-dialog中使用tinymce 点击工具栏下拉框被遮挡

    在el-dialog中使用tinymce控件时,会出现点击工具栏下拉框出现在弹窗下一层,审查元素之后发现是tinymce的下拉框z-index优先级低于el-dialog的z-index导致的,所以需要增加tinymce的下拉框的z-index值。 通过审查元素得到,需要修改tox-tinymce-aux元素的优先级: 这样就可以了:

    2024年02月07日
    浏览(25)
  • Element ui 取消点击空白处弹框关闭的效果

    目录 属性: 描述  element组件库的Dialog对话框默认是可以通过点击 modal 关闭 Dialog,即点击空白处弹框可关闭。 在 el-dialog中close-on-click-modal含义是:点击空白处是否关闭,默认true;如果需要点击空白处不关闭弹框,只需要 :close-on-click-modal=“false” 即可

    2024年02月11日
    浏览(28)
  • element ui中父子组件共用一个el-dialog弹窗,切换组件页面弹窗进行关闭

    在Element UI中,如果多个父子组件共用一个el-dialog弹窗,并且需要在切换组件页面时关闭弹窗,你可以考虑以下方法来实现: 在Vuex中创建一个状态来管理弹窗的显示状态(例如,showDialog)。 在父子组件中都可以访问这个状态,以便共享。 当需要打开或关闭弹窗时,分发对应

    2024年02月03日
    浏览(51)
  • vue-pc端elementui-统一修改问题-Dialog 对话框点击空白关闭问题-element-所有组件层级问题

    实际开发我们经常发现dialog弹出框默认点击遮罩层空白地方就会关闭-有属性可以关闭 但是经常会图方便-或者已经写完了,不想一个个写,可以在main.js进行统一关闭 当我们在页面进行复杂设计和层级关闭改变,会发现右上角的退出登录弹出款在我们页面之下 这是我们不管怎

    2024年02月13日
    浏览(30)
  • el-dialog的内容不刷新;el-dialog内容有缓存;el-dialog里面的组件不刷新问题;

    el-dialog里面的内容是带缓存的,也就是说除了第一次打开会初始化,其他次打开都是直接加载缓存的; 这就导致了有时候打开弹框时候,内容不刷新。 有说法说是el-dialog嵌套太深大致的。 解决方法:直接给弹框的内容部分添加v-if

    2024年02月14日
    浏览(24)
  • el-dialog嵌套,修改内层el-dialog样式(自定义样式)

    el-dialog嵌套使用时,内层的el-dialog要添加 append-to-body 属性 给内层的el-dialog添加 custom-class 属性,添加自定义类名 然后使用 不带scoped的style标签 ,书写格式如下: 就可以对其样式进行修改了  大功告成! -------------------------------------------------手动分割线-------------------------------------

    2024年02月13日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包