0.0.8 • Published 3 years ago

theme-vue v0.0.8

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

修改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反馈与解答

  • 邮箱:2602824469@qq.com

开发单位

  • 单位:中科院成都信息技术股份有限公司(中科信息)

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

  • 电话:028-85249933

0.0.8

3 years ago

0.0.7

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago