iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >element-ui自定义message-box自定义样式不生效的解决
  • 290
分享到

element-ui自定义message-box自定义样式不生效的解决

2024-04-02 19:04:59 290人浏览 八月长安
摘要

目录element-ui自定义message-box自定义样式不生效背景先分析下不生效的原因解决方法element-ui修改样式不生效,最简单的解决element-ui自定义mess

element-ui自定义message-box自定义样式不生效

背景

这是小伙伴今天在开发中遇到的问题,使用jsx语法自定义一个msgbox,自定义msgbox自然需要自定义样式,然后就遇到了自定义customClass不生效的问题。

下面上jsx的一个写法

this.$msgbox({
        title: '确认',
        message: h('div', {
          style: 'text-align: center'
        }, [
          h('p', { class: 'content-title' }, '请确认是否为XX'),
          h('div', { class: 'content-message' }, 'XXXXXX'),
          h('div', { class: 'content-message' }, 'XXXXXXXXXXXXXXXXXXXXXXXXX')
        ]),
        customClass: 'return-visit-message-box',
        showCancelButton: true,
        confirmButtonText: '是',
        cancelButtonText: '否',
      }).then(() => {
        this.checkPrescriptionType()
      }).catch(() => {
        this.$message.info('XXXXXXXXXXXXXX')
      })

先分析下不生效的原因

1、this.$msgbox($alert等等),是通过element-ui的方法在body下渲染出来一个class="el-message-box__wrapper"的div。如果你看过源码就知道,这div根本就不是一个Vue组件,只是使用js操作dom 生成的一些节点元素。所以不具备vue组件的一些特性:如在渲染templage模板时,不会在节点上添加data-v-xxxxxx 之类的属性,而scoped 正是运用data-v-xxxxxx属性找到对应的元素实现局部样式控制的。所以不生效是必然的。

2、/deep/不生效,deep 不过是CSS样式上加上了属性选择器[data-v-xxxxxx] 本质上还是从vue组件的角度来实现的样式注入,前面分析过了 message-box 本身就不是一个vue组件,所以也是不能生效的。

解决方法

1、scoped不生效,那么只能将样式放全局,在当前组件加上一段不带scoped的style,或者放到全局样式表中。

<style>
.el-message-box.return-visit-message-box {
  width: 355px;
  padding-bottom: 0;
  .el-message-box__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    background: rgba(241,243,245,1);
    .el-message-box__title {
      font-size:16px;
      font-weight:500;
      color:rgba(51,51,51,1);
    }
    .el-message-box__headerbtn {
      position: unset;
    }
  }
  .el-message-box__content {
    padding-top: 20px;
    .content-title {
      font-size:16px;
      font-weight:500;
      color:rgba(51,51,51,1);
      line-height:22px;
      margin-bottom: 16px;
    }
    .content-message {
      font-size: 12px;
      font-weight: 400;
      color: #666666;
      line-height: 17px;
    }
  }
  .el-message-box__btns {
    padding: 20px 20px 20px;
    .el-button {
      padding: 9px 27px;
    }
  }
}
</style>

element-ui修改样式不生效,最简单的解决

参考网上的去掉style中的scoped作用域那样确实生效,但是会影响其他组件的样式。

我们直接在该类名前添加::v-deep就可以,赶紧去试试看吧,超实用!

    // 在类名前添加 ::v-deep 方法和属性后的 !important
    ::v-deep .el-input__prefix {
          left: 71px !important;
          transition: all 0.3s;
    }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: element-ui自定义message-box自定义样式不生效的解决

本文链接: https://www.lsjlt.com/news/166654.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • element-ui自定义message-box自定义样式不生效的解决
    目录element-ui自定义message-box自定义样式不生效背景先分析下不生效的原因解决方法element-ui修改样式不生效,最简单的解决element-ui自定义mess...
    99+
    2024-04-02
  • element组件中自定义组件的样式不生效问题(vuescopedscss无效)
    目录element组件中自定义组件的样式不生效解决方法Element-UI修改样式不影响其他组件需求描述方法element组件中自定义组件的样式不生效 当我们在项目中需要给eleme...
    99+
    2024-04-02
  • 图文详解Element-UI中自定义修改el-table样式
    目录前言1、修改th(头部)的background-color2、修改表头字体颜色3、修改tr(行)的background-color4、修改tr(行内线)的background-c...
    99+
    2024-04-02
  • 小程序自定义组件全局样式不生效的解决方法
    目录太长不看版 组件样式隔离 demo 试验 优先级 页面的隔离配置参考资料在使用原生框架开发小程序时遇到一个问题,在 app.wxss 中定义的全局样式在自定义组件中不生效。后来发...
    99+
    2024-04-02
  • springboot自定义配置Boolean属性不生效的解决
    目录自定义配置Boolean属性不生效如何设置boolean属性几个要点自定义配置Boolean属性不生效 记录一下,今天遇到一个很坑的问题,boolean值类型的字段不能以is开头...
    99+
    2024-04-02
  • element-ui配合node实现自定义上传文件方式
    目录element-ui配合node实现自定义上传文件自定义elementui上传文件及携带参数下面是一个简单的上传标签具体实现携带参数element-ui配合node实现自定义上传...
    99+
    2024-04-02
  • css自定义样式的示例
    这篇文章主要介绍css自定义样式的示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!效果图博客园中常用的样式#content {    color: bla...
    99+
    2023-06-08
  • springboot自定义配置Boolean属性不生效如何解决
    这篇文章主要介绍“springboot自定义配置Boolean属性不生效如何解决”,在日常操作中,相信很多人在springboot自定义配置Boolean属性不生效如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对...
    99+
    2023-06-29
  • element使用自定义icon图标的两种解决方式
    目录两种情况:第一种情况解决办法:第二种情况解决办法:总结写项目时,发现 element 里的图标没有我需要的图标, 两种情况: ① 简单的替换小图标,没有选中变色等要求 ② 有选中...
    99+
    2024-04-02
  • Element-ui tree组件自定义节点的示例分析
    这篇文章将为大家详细讲解有关Element-ui tree组件自定义节点的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。工作上使用到element-ui tree...
    99+
    2024-04-02
  • Swiper自定义分页器的样式
    注: 不同版本的swiper使用的方式可能不一样,请参考swiper官网 swiper的使用它是有自己默认的分页器样式一般是为小点点,我们可以通过type属性去控制它的样式。 ‘bullets’  圆点(默认)‘fraction’  分式 ...
    99+
    2023-09-20
    前端 javascript css php
  • SpringBoot自定义/error路径失效的解决
    目录SpringBoot自定义/error路径失效背景配置信息解决思路SpringBoot的/error的自定义处理它的具体定义如下他有三个方法SpringBoot自定义/error...
    99+
    2024-04-02
  • vue中的el-button样式自定义方式
    目录vue el-button样式自定义按钮的三种状态用按钮切换界面element button自定义图标实现效果代码实现vue el-button样式自定义 按钮的三种状态 ....
    99+
    2024-04-02
  • Android TabLayout 自定义样式及使用详解
    目录基本使用XML静态设置TabItem联动ViewPager2动态设置TabItem1. Activity布局代码2. 创建三个Fragment给ViewPager2设置3. Fr...
    99+
    2024-04-02
  • Vue Element UI自定义描述列表组件的示例分析
    这篇文章主要介绍Vue Element UI自定义描述列表组件的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体内容如下效果图写在前面写后台管理经常从列表点击查看详情,展示数据信息,Element UI虽然...
    99+
    2023-06-15
  • HTML怎么自定义下划线的样式
    这篇文章主要讲解了“HTML怎么自定义下划线的样式”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“HTML怎么自定义下划线的样式”吧!   text-dec...
    99+
    2024-04-02
  • CSS自定义滚动条样式案例详解
    CSS3自定义滚动条样式 -webkit-scrollbar 当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自...
    99+
    2024-04-02
  • Android自定义Toast样式实现方法详解
    目录原生Toast样式自定义Toast样式创建样式封装引用原生Toast样式 自定义Toast样式 创建样式 所谓自定义一个Toast就是建立一个布局文件,然后使用一个view容...
    99+
    2023-01-17
    Android自定义Toast Android Toast样式
  • DatePickerDialog中自定义样式的示例分析
    小编给大家分享一下DatePickerDialog中自定义样式的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1.增加Theme主题new DatePickerDialog(thi...
    99+
    2024-04-02
  • uniapp 给自定义组件或uview等ui组件加class样式或修改样式在微信小程序不生效的情况
    原因: 首先不论是自定义组件还是ui组件,本质上的原因都是微信小程序默认的组件隔离策略导致的。 微信小程序组件隔离文档参考 下面根据不同情况的解决方法: 1.在原有class上修改样式 比如我在uview radio 单选组件的原有clas...
    99+
    2023-08-17
    微信小程序 uni-app 小程序
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作