zoukankan      html  css  js  c++  java
  • element ui 弹出组件的遮罩层以及多层遮罩解决办法。。

    做项目中遇到几次弹出框遮罩层的问题。有嵌套的 弹出框。还有单页面中tabs标签页的弹出框。今天就说一下tabs中的弹出框遮罩层的问题。
    在这里插入图片描述
    这个页面有五个tabs页签,每一个都有弹出框组件,也就是说每一个都有遮罩层。

    很有趣的问题: 我在第五个tabs页签中打开弹出框,没问题。可以正常使用。当我在第四个tabs页签中打开弹出框时,会出现上图这种情况,(鼠标点击一下,一层遮罩就会消失)。当我在第一个页签中的时候,我需要点击五次才能将最上层的遮罩层去掉。

    查看网上,以及element文档。找到了两个方法。

    如果你是简单的打开弹出框之后有一层遮罩的话,用下边这个就行。
    在这里插入图片描述

    如果打开弹出框有多个遮罩的话。就换这个方法。
    在这里插入图片描述
    用这个方法可以解决。在代码中直接用
    在这里插入图片描述
    出来之后的效果

    在这里插入图片描述

    总之一句话,如果你打开弹出框之后有一层遮罩那么用 modal-append-to-body 可以解决。
    如果是多层的话 用 append-to-body解决。
    为大家的开发节省时间。给自己提个醒。 求大神勿喷!!

  • 相关阅读:
    深入类的方法
    泛型集合
    深入C#数据类型
    深入.net框架
    错题
    详解Python Graphql
    深入理解分布式调度框架TBSchedule及源码分析
    30分钟闲置服务器建站(gitlab为例)
    Webpack开发指南
    mybatis-generator
  • 原文地址:https://www.cnblogs.com/hz1124/p/14351805.html
Copyright © 2011-2022 走看看