zoukankan      html  css  js  c++  java
  • Vue ElementUI 如何修改消息提示框样式

    一、前言

    在窄屏模式下(移动端),提示框的宽度太宽,希望降低宽度。
    应当如何修改 ElementUI 的样式呢

    二、情景还原

    // 弹出注销提示框
    this.$confirm('确认注销吗?', '提示', {
    }).then(() => {
      this.$message({
        message: '已成功注销',
        type: 'success'
      })
    }).catch(() => { /* 用户取消注销 */ })
    ...
    <style scoped>
      ...
      .message-logout {
        width: 350px;
      }
    </style>
    
    // 弹出注销提示框
    this.$confirm('确认注销吗?', '提示', {
    }).then(() => {
      this.$message({
        message: '已成功注销',
        type: 'success'
      })
    }).catch(() => { /* 用户取消注销 */ })
    ...
    <style scoped>
      ...
      .el-message-box {
        width: 350px;
      }
    </style>
    
     
    image.png

    此时在scoped的style中写是无效的,因为ElementUI组件不可以给样式添加scoped,因此必须去掉scoped;但是去掉scoped后不满足单组件的CSS。

    三、解决方案

    1、附加在没有scoped的style中

    <style scoped>
      ...
    </style>
    <style>
      ...
      .el-message-box {
         350px;
      }
    </style>
    
     


    作者:CNSTT
    链接:https://www.jianshu.com/p/65221ec46c07
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    bootstrap class sr-only 什么意思?
    PHP 中的文本截取分析之效率
    FastAdmin 升级后出现 is already in use
    FastAdmin 环境变量 env 配置
    Nginx 服务器伪静态配置不当造成 Access denied
    笔记:明确认识
    进程通信(socket)
    进程间通信(了解)
    c++ 继承,组合
    c++ 类初始化
  • 原文地址:https://www.cnblogs.com/javalinux/p/15602196.html
Copyright © 2011-2022 走看看