wk-theme v1.0.0

主题组件

主要通过css的变量来实现，通过css变量可以很方便的实现主题的切换。

• 通过创建style标签，切换主题时，会重新创建style标签，覆盖之前的css变量。
• 切换主题时，也会给html添加自定义属性，方便项目中写一些自定义变量或者覆盖主题中定义好的变量。

一、使用说明

1.1安装

  npm install wk-theme -S

1.2初始化

  // main.js
  import Vue from 'vue';
  import Themes, { useTheme } from 'wk-theme';
  // 设置默认主题
  Vue.use(Themes,  { default: 'white' });

1.3 使用示例

1.3.1切换主题

// 切换主题
import { useTheme } from 'wk-theme';
const ThemeLoader = useTheme();

export default {
  methods: {
    changeTheme(key) {
      //  key 为主题key =>  black/white/darkblue
      if (ThemeLoader.current === key){
        return
      };
      const themeLib = Themes.themes.find((t: any) => t.key === key) as any;
      ThemeLoader.change(themeLib);
    }
  }
}

1.3.2获取某个主题下的变量集合

import { useTheme } from 'wk-theme';
const ThemeLoader = useTheme();

comsole.log(ThemeLoader.getValue('darkblue'))

1.3.3获取某个主题下的css变量值

import { useTheme } from 'wk-theme';
const ThemeLoader = useTheme();
console.log(ThemeLoader.getStatusValue('primary')) // 不传第二个参数时，默认拼接 --wk-color-
console.log(ThemeLoader.getStatusValue('--color-active','')) // 直接取到`--color-active`变量值

1.4自定义变量

// theme-darkblue.scss
[data-theme=darkblue]{
  --color-active: red;

}

// theme-white.scss
[data-theme=white]{
  --color-active: black;
}

1.5参数

1.6方法

1.7主题key

1.8依赖

二、作者/维护者

三、发布

• 当前的node环境为node v16.17.1
• 需要运行命令npm run build进行打包
• 按照npm的规范，发布到npm

四、其他

本组件支持umd打包格式