zoukankan      html  css  js  c++  java
  • vuejs 项目中使用@mixin 与 @include 来做主题的切换

    一: 主题切换一般分为 俩种

    1:是我们通过点击页面的主题设置来切换主题

    2:是对外暴露主题的样式表,让其他人可以制定主题并进行切换

    先说第一种的实现

    以vue3.0 为列

    vue 项目中跟目录 下创建vue.config.js 文件, import 导入公共样式

    代码:

    module.exports = {
      css: {
        loaderOptions: {
          sass: {
            prependData: '@import "@/styles/theme/variable/themeVariable.scss","@/styles/theme/mixin/themeMixinBase.scss","@/styles/theme/mixin/themeMixinFlex.scss";',
    
          },
        },
      },
    
    };
    

     开始分析如何实现主题切换

    1:themeMixinBase.scss

    @import "../variable/themeVariable";
    /*除默认主题外,还有几套主题*/
    $themeNum:1;
    /*获取themeVariable中定义的变量的值,参数为变量的名字*/
    @function var($key){
      @return map_get($themeVariable,$key);
    }
    /*生成单个样式的多套主题设置*/
    @mixin oneCssGenerate($prop,$varKey){
      #{$prop}:var(#{$varKey}_theme_default) ;
      @for $i from 1 through $themeNum{
        [theme="#{$i}"] & {
          #{$prop}: var(#{$varKey}_theme_#{$i}) ;
        }
      }
    }
    @mixin border($varKey) {
      border:1px solid var(#{$varKey}_theme_default);
      @for $i from 1 through $themeNum{
        [theme="#{$i}"] & {
          border:1px solid  var(#{$varKey}_theme_#{$i});
        }
      }
    
    }

    2:themeVariable 中用来存放 每个页面的 样式的css

    @import "themeVariableExam";
    @import "themeVariableCommon";
    
    
    @function allVariable(){
      $list:$themeVariableCommon,$themeVariableExam;
      $result:();
      @each  $var in $list{
        $result:map_merge($result,$var);
      }
      @return $result;
    }
    $themeVariable:allVariable()
  • 相关阅读:
    js实现element中可清空的输入框(1)
    vue中v-model的学习
    Oracle触发器和MySQL触发器的简单应用
    Java中的多线程你只要看这一篇就够了()
    HTML 随笔记之 刷新页面
    HTML CSS 随笔记之 cursor
    float到底是干什么的?
    Spring Boot 事物的快速应用
    java web 中文乱码
    LVM 创建实例
  • 原文地址:https://www.cnblogs.com/sunliyuan/p/14449120.html
Copyright © 2011-2022 走看看