修改Element主题

• desc: 修改element元素主题
• version：0.0.8
• Author: nibing
• 修改时间：2021年6月30日14:42:03
• 修改时间：2021年7月7日15:41:15

实现原理

• scss变量的用法
• CSSStyleDeclaration setProperty()方法
• CSSStyleDeclaration removeProperty()方法
• localStorage方法

运行依赖

• "core-js": "^3.15.2",
• "node-sass": "^4.12.0",
• "sass-loader": "^8.0.2",
• "element-ui": "^2.15.2",

API

• Th.changeTheme($color)

  修改主题方法: 修改Element颜色（hex/rgb/rgba） 参数说明： $color: 初始化颜色值 类型：string 必填：true

• Th.Help()

  获取帮助说明的方法: 获取帮助说明 参数说明：null

• Th.setThemeS(options = [], $color = [])

  属性修改方法: 修改element主题与其他的效果值，详细运行Th.Help()获取 参数说明：options: 属性 类型：array>string 必填：true ，$color: 颜色值 类型：array>string 必填：true

• Th.getThemeS(options = [])

  属性获取方法:获取element的属性值，详细运行Th.Help()获取 参数说明：options: 属性 类型：array>string 必填：true

• Th.delTheme(option =['--primary'])

  属性删除方法:删除element的属性值，详细运行Th.Help()获取 参数说明：options: 属性 类型：array>string 必填：true

如何使用

一、

main.js
1.注释掉原element样式文件即：import 'element-ui/lib/theme-chalk/index.css';
2.引入自定义组件

• import Theme from "theme-vue"; // 引入

3.XXX.vue

• import Theme from "theme-vue"";// 引入
• const Th = new Theme(); // 创建修改主题对象
• Th.changeTheme("#cccccc") // 修改element颜色（hex/rgb/rgba）

二、

main.js
1.注释掉原element样式文件即：import 'element-ui/lib/theme-chalk/index.css';
2.引入自定义组件

• import Theme from "theme-vue"; // 引入
• const Th = new Theme(); // 创建修改主题对象
• Vue.prototype.$theme = Th;

3.XXX.vue

• import Vue from 'vue'
• Vue.prototype.$theme.changeTheme("#123456")

BUG反馈与解答

• 邮箱：[email protected]

开发单位

• 单位：中科院成都信息技术股份有限公司（中科信息）

• 地址：四川省成都市武侯区人民南路四段9号附78号

• 电话：028-85249933