(Dialog)解决:Element-ui 中 Dialog 弹出对话框的样式的修改问题_修改el-dialog样式-程序员宅基地

技术标签: dialog  经验分享  element-ui  前端  # Element-ui 专栏  javascript  

Ⅰ、Element-ui 提供的组件与想要目标情况的对比:

1、Element-ui 提供组件情况:

其一、Element-ui 自提供的代码情况为(示例的代码):

在这里插入图片描述

// Element-ui 自提供的代码:
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <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
      };
    },
    methods: {
    
      handleClose(done) {
    
        this.$confirm('确认关闭?')
          .then(() => {
    
            done();
          })
          .catch(() => {
    });
      }
    }
  };
</script>

代码地址:https://element.eleme.cn/#/zh-CN/component/dialog

其二、页面的显示情况为:
在这里插入图片描述
在这里插入图片描述

Ⅱ、实现 Dialog 对话框样式变化的过程:

1、法一、通过 CSS 的设置来修改Dialog 对话框样式:

其一、样式的修改代码为:

<style lang="scss" scoped>
.el-dialog__wrapper {
    
  /deep/.el-dialog {
    
    margin-top: 25vh !important;
    width: 75% !important;
  }
}
</style>

其二、效果展示:
在这里插入图片描述
2、法二、通过 element-ui 自带参数来修改 Dialog 对话框样式:

其一、样式的修改代码为:

<!-- 此时的 width 是设置该对话框的宽度,而 top 是设置该对话框的高度; -->
<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="50%"
  top="16vh"
  >
  <span>这是第一段信息</span>
</el-dialog>

其二、效果展示:

3、右上角 ‘X’ 样式的修改:

其一、样式的修改代码为:

<style lang="scss" scoped>
.el-dialog__wrapper {
    
  /deep/.el-dialog {
    
    margin-top: 25vh !important;
    width: 75% !important;
      .el-dialog__header {
    
        .el-dialog__headerbtn {
    
          font-size: 30px;
        }
        .el-icon-close:before {
    
          color: red;
          // 若此时 display 为 none 时,那么此时的右上角的 X 就会被隐藏;
          // display: none;  
        }
    }
  }
}
</style>

其二、效果展示:
在这里插入图片描述

4、上述页面及样式的整体代码为:

<template>
  <div id="app">
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <span>这是一段信息</span>
    </el-dialog>
  </div>
</template>

<script>

export default {
    
  name: 'App',
  components: {
    
   
  },
  data() {
    
      return {
    
        dialogVisible: false
      };
  },
  methods: {
    
  }
};
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
    
  /deep/.el-dialog {
    
    margin-top: 25vh !important;
    width: 75% !important;
      .el-dialog__header {
    
        .el-dialog__headerbtn {
    
          font-size: 30px;
        }
        .el-icon-close:before {
    
          color: red;
        }
    }
  }
}
</style>

5、完整干净的页面效果为:
其一、代码为:

<template>
  <div id="app">
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="30%"
      >
    </el-dialog>
  </div>
</template>

<script>

export default {
    
  name: 'App',
  components: {
    
   
  },
  data() {
    
      return {
    
        dialogVisible: false
      };
  },
  methods: {
    
  }
};
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
    
  /deep/.el-dialog {
    
    margin-top: 25vh !important;
    width: 75% !important;
      .el-dialog__header {
    
        .el-dialog__headerbtn {
    
          font-size: 16px;
        }
    }
  }
}
</style>

其二、页面展示为:

在这里插入图片描述

Ⅲ、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43405300/article/details/125827299

智能推荐

[常用办公软件] wps怎么自动生成目录?wps自动生成目录的设置教程_wps目录自动生成-程序员宅基地

文章浏览阅读1.1w次,点赞3次,收藏5次。转载请说明来源于"厦门SEO"本文地址:http://www.96096.cc/Article/160880.html常用办公软件  WPS Office是由金山软件股份有限公司开发的一款针对个人永久免费的办公软件,在我们的日常生活和工作中,WPS Office比起微软Microsoft Office来说在文字上的处理会更深入国人用户的人心,熟悉操作WPS的办公小技巧,能够更高效的提高我们的工作效率,今天小编要为大家分享的是WPS怎么自动生成目录?快来一起看看WPS自动生成目录的设置教程吧。_wps目录自动生成

web项目-程序员宅基地

文章浏览阅读7.4k次,点赞2次,收藏19次。web项目是指服务端部署在服务器上,客户端使用浏览器通过网络传输进行访问获取数据的项目。通常我们看见的应用页面网站等等都可以称之为web项目。 在web项目的开发中可分为web前端开发和web后端开发 web前端:即是客户端能看得见碰得着得东西。包括Web页面结构、页面样式外观以及Web层面得交互展现。 前端特点:页面视觉效果良好(客户第一)、Web页面交互流畅(..._web项目

关于java操作excel导入导出三种方式_java导出excel的三种方法-程序员宅基地

文章浏览阅读5.6k次,点赞8次,收藏67次。java操作关于导入导出Excel的多种方式_java导出excel的三种方法

Windows系统环境变量path详解_windows path-程序员宅基地

文章浏览阅读1.1w次,点赞10次,收藏21次。Windows path系统变量编辑_windows path

Hadoop基础教程-第13章 源码编译(13.2 Hadoop2.7.3源码编译)_hadoop2.7.3-src源码下载-程序员宅基地

文章浏览阅读512次。第13章 源码编译13.2 Hadoop2.7.3源码编译13.2.1下载Hadoop源码包(1)到官网http://hadoop.apache.org/releases.html下载2.7.3的source源码包(2)解压缩tar -zxvf hadoop-2.7.3-src.tar.gz -C /opt1(3)打开解压目录下的BUILDING.txt,编译过程和需要的软件其实就是根据这个文档里..._hadoop2.7.3-src源码下载

Latex 语法_\latex-程序员宅基地

文章浏览阅读1k次。Latex 语法_\latex

随便推点

【智能排班系统】基于AOP和自定义注解实现接口幂等性-程序员宅基地

文章浏览阅读884次。使用多种方式实现接口幂等性,通过定义注解方便对方法进行幂等性控制

SpringBoot整合Swagger2 详解_springboot swagger2 开关-程序员宅基地

文章浏览阅读324次。SpringBoot、Swagger2 整合详解_springboot swagger2 开关

spring boot 项目报错 java.sql.SQLException: The server time zone value '�й���׼ʱ��' is unrecognized_springboot项目里面报错 the server time zone value ' й-程序员宅基地

文章浏览阅读2.8w次,点赞96次,收藏115次。报错说是时区不对因为mysql-connection-java版本导致时区的问题。pom.xml:控制台报错信息:java.sql.SQLException: The server time zone value ‘�й���׼ʱ��’ is unrecognized or represents more than one time zone. You must configure ei..._springboot项目里面报错 the server time zone value ' й

最全Android Kotlin 学习路线(Kotlin 从入门、进阶到实战)_kotlin学习-程序员宅基地

文章浏览阅读4.2k次。Kotlin 是由 jetBrains 开发的一门现代多平台应用的静态编程语言,Kotlin 代码即可以编译成 Java 字节码,又可以编译成 JavaScript,Kotlin 是开源的,源码在这。Kotlin 包含了大量的语法糖,在编码的时候,会大大的简化我们的代码量及工作效率。且相比传统的 Java 语言,Kotlin 种大量的简写,可以减少很多用Java 必须要写的样板代码,减少大量的 if…else 等嵌套,减少大量接口的实现,代码结构也会更加清晰。_kotlin学习

【前端素材】推荐优质新鲜绿色蔬菜商城网站设计Harmic平台模板(附源码)-程序员宅基地

文章浏览阅读753次,点赞30次,收藏21次。在线绿色新鲜果蔬商店网站是指一个专门销售新鲜、绿色、有机水果和蔬菜的电子商务平台。这类网站旨在为消费者提供方便、快捷的购买渠道,同时确保他们能够购买到高质量、新鲜的产品。

elementui表格添加fixed之后样式异常_element table fixed 样式异常-程序员宅基地

文章浏览阅读1k次。最近写项目碰到一个bug 大概就是一个表格组件两个页面都会使用 组件中表格的某些列就用v-if控制了 表格的首尾列都用了fixed 然后就发生了bug 如下图 具体原因不明看过很多网上的办法 有在fixed的列绑定key的 也有使用doLayout()的 测了都没用 最后在一个前端交流群里一位大佬给出的办法 实测有效.el-table__header, .el-table__body, .el-table__footer { width: 100%; tab_element table fixed 样式异常

推荐文章

热门文章

相关标签