• van-button根据参数改变字体颜色,实现高度自定义


    本来van-button没有属性去单独自定义字体颜色。通过研究,我发现可以通过:style来实现这一需求。

    1. class="case-btn"
    2. :color="item.BtnBgColor"
    3. :style="{ color : item.BtnColor }"
    4. @click="jumpToUrl(item)"
    5. >

    这样子会提示warning,但是能实现我们要的背景色和按钮字体颜色都根据参数自定义。

    顺便记录一下VUE的样式穿透

    深度作用选择器
    如果你希望 scoped 样式中的一个选择器能够作用得 '更深' ,例如影响子组件,你可以使用 >>> 操作符:


    上述代码将会编译成:
     
    .a[data-v-f3f3eg9] .b { /* … */ }
    有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名,同样可以正常工作

    例如:

    1 >>> 如果vue的style使用的是css,那么则

    但是像scss等预处理器却无法解析>>>,所以我们使用下面的方式.

    2 /deep/

    但是有些开发者反应,在vue-cli3编译时,deep的方式会报错或者警告。 此时我们可以使用第三种方式

    3 ::v-deep 切记必须是双冒号

    使用场景:
    当我们需要覆盖 element-ui 中的样式时只能通过深度作用选择器 style 为 css 时的写法如下

    .a >>> .b {
     ***
    }
    style使用css的预处理器(less, sass, scss)的写法如下

    // 第一种/deep/
    /deep/ .a {
     ***
    }
     
    // 第二种::v-deep
    ::v-deep .a{
     ***
    }
    建议使用第二种方式,/deep/在某些时候会报错,::v-deep更保险并且编译速度更快

  • 相关阅读:
    maven项目、idea抽风问题解决
    软件测试逻辑覆盖相关理解
    一致性HASH算法介绍,附代码
    图解LeetCode——1235. 规划兼职工作(难度:困难)
    Vue路由(vue-router)
    js创建对象的几种设计模式
    基于大数据的高校英语现状分析
    在MicroPython中启用基于spiflash的LFS挂载文件系统
    Linux下SUID提权学习 - 从原理到使用
    指针传2
  • 原文地址:https://blog.csdn.net/lrbtony/article/details/132908546