zoukankan      html  css  js  c++  java
  • vue+scss动态改变主题颜色

    1、新建.scss后缀公用文件,放在assets或者其他地方都可以

    /*需要切换的颜色变量*/
    $color-primary1:#1776E1; /* 更换的颜色 */
    $color-primary2:#3588CB; /* 更换的颜色 */
    $color-primary3:#7D0000; /* 更换的颜色 */
    $color-primary4:#EB6100; /* 更换的颜色 */
    
    /*定义方法*/
    @mixin color_primary($color){
        color:$color;
        /*判断匹配*/
        [data-theme="primary1"] & {
            color:$color-primary1;
        }
        [data-theme="primary2"] & {
            color:$color-primary2;
        }
        [data-theme="primary3"] & {
            color:$color-primary3;
       }
       [data-theme="primary4"] & {
         color
    :$color-primary4;
       }
    }

    2、在需要用到的页面引入

    @import "@/assets/scss/color.scss";    

    3、调用

     p {
          // color: #055caa;
          @include color_primary($color-primary1);
     }

    需要匹配什么颜色,就传定义好的变量名

    如何一键控制全局呢?

    往下看

    window.document.documentElement.setAttribute('data-theme', 'primary4');

    在app.vue(或者其他地方)写入此方法,只需要在第二个参数位置传入你所定义的变量名即可动态改变所有调用

    @include color_primary($color-primary1);方法的颜色;



  • 相关阅读:
    SOHO路由器
    SYN Flood
    Java线程池
    BIO
    Java虚拟机的基本结构
    Linux 的Ext2
    java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener
    cassandra-CQL
    数列分段`Section II`(二分
    Exams(二分
  • 原文地址:https://www.cnblogs.com/wtwebskill/p/11812687.html
Copyright © 2011-2022 走看看