脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → element-ui Dialog遮罩层去除

去除element-ui中Dialog对话框遮罩层方法详解

 更新时间：2022年12月20日 11:29:15   作者：爱划水de鲸鱼哥  
这篇文章主要为大家介绍了去除element-ui中Dialog对话框遮罩层方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

前言

本文主要介绍了如何去除 element-ui 中 Dialog 对话框遮罩层的方法，并给出了示例代码以及页面效果作为参考。

modal 属性

在使用element-ui的Dialog时，默认会有遮罩层，想要去除遮罩层，官方文档给出了 modal 属性；

modal 是一个布尔值，表示是否需要遮罩层；

然而，将 modal 赋值为 false 时并不生效；

这里官方文档也给出了提示：

当 modal 的值为 false 时，请一定要确保 append-to-body 属性为 true，由于 Dialog 使用 position: relative 定位，当外层的遮罩层被移除时，Dialog 则会根据当前 DOM 上的祖先节点来定位，因此可能造成定位问题。

由于定位问题，我们还需将 append-to-body 属性置为 true；

本以为事情就这样结束了，然而，事情并不那么简单，此时遮罩层依然存在；

重点来了，我们还需要使用 v-bind 指令来绑定 modal 属性，才能将遮罩层去除；

	<el-dialog :modal="false" append-to-body="true"></el-dialog>

至此，我们就成功的去除了 Dialog 对话框的遮罩层，如下是示例代码。

示例代码：

<el-button type="text" @click="centerDialogVisible = true"
 >点击打开 Dialog</el-button
>
<el-dialog title="dialog去掉遮罩层" v-model="centerDialogVisible" width="30%" center  :modal="false" append-to-body="true">
  <span>注意：modal需要用v-bind指令绑定</span>
  <template #footer>
    <span class="dialog-footer">
      <el-button type="primary" @click="centerDialogVisible = false"
        >确定</el-button>
    </span>
  </template>
</el-dialog>

以上就是去除element-ui中Dialog对话框遮罩层方法详解的详细内容，更多关于element-ui Dialog遮罩层去除的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 从延迟处理解析JavaScript惰性编程

    从延迟处理解析JavaScript惰性编程

    这篇文章主要为大家介绍了从延迟处理解析JavaScript惰性编程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • 使用TypeScript接口优化数据结构的示例详解

    使用TypeScript接口优化数据结构的示例详解

    在现代软件开发中,数据结构的设计至关重要,它直接影响到程序的性能和可维护性,TypeScript 作为一种静态类型的超集,为 JavaScript 带来了类型系统,本文将探讨如何利用 TypeScript 的接口（Interfaces）来优化数据结构,需要的朋友可以参考下
    2024-09-09
  • 用js生产批量批处理执行命令

    用js生产批量批处理执行命令

    因为从别的地方弄到了100个广告代码，但因为他的里面加入了很多东西，所以需要批量删除一个文件夹和加入我的网站的快捷方式
    2008-07-07
  • JavaScript 绘制饼图的示例

    JavaScript 绘制饼图的示例

    这篇文章主要介绍了JavaScript 绘制饼图的示例，帮助大家更好的利用JavaScript绘制图表，感兴趣的朋友可以了解下
    2021-02-02
  • JavaScript实现的一个计算数字步数的算法分享

    JavaScript实现的一个计算数字步数的算法分享

    这篇文章主要介绍了JavaScript实现的一个计算数字步数的算法分享,本文先是讲解了算法描述与实现原理,然后给出实现代码,需要的朋友可以参考下
    2014-12-12
  • 再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿

    再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿

    这篇文章主要介绍了再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿,需要的朋友可以参考下
    2020-12-12
  • js仿京东放大镜

    js仿京东放大镜

    这篇文章主要为大家详细介绍了js仿京东放大镜，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • uniapp微信小程序订阅消息发送服务通知超详细教程

    uniapp微信小程序订阅消息发送服务通知超详细教程

    在使用或开发小程序过程中,我们会发现消息通知是非常重要的一个环节,下面这篇文章主要给大家介绍了关于uniapp微信小程序订阅消息发送服务通知的相关资料,需要的朋友可以参考下
    2023-06-06
  • js计算任意值之间随机数的方法

    js计算任意值之间随机数的方法

    这篇文章主要介绍了js计算任意值之间随机数的方法,分析了Math.random函数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • JavaScript实现HSL拾色器

    JavaScript实现HSL拾色器

    这篇文章主要为大家详细介绍了JavaScript实现HSL拾色器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05

最新评论