vue element-ui 自定义换肤功能开发

最新推荐文章于 2024-06-20 15:55:41 发布

@¥@%

最新推荐文章于 2024-06-20 15:55:41 发布

阅读量467

点赞数 7

文章标签： vue.js ui 前端

本文链接：https://blog.csdn.net/qq_46346301/article/details/135062916

版权

1、基于 vue element-ui node10

实现

1、创建文件夹theme
2、cd theme 文件夹 npm init -y
3、安装主题生成工具 npm i element-theme -D
4、安装主题包 npm i element-theme-chalk -D
5、初始化变量文件 node_modules/.bin/et -i
6、可以看到多出一个 element-variables.css的文件
7、然后调整几个颜色变量值，
   - 可以直接在element-variables.css中直接修改
   - 也可以使用[官方在线构建](https://element.eleme.cn/#/zh-CN/theme/preview)
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/9523f05a31a646ac846e00f4a9e0fce3.png#pic_center)
  下载替换 element-variables.css 文件即可
8、构建主题包：node_modules/.bin/et
9、将构建完成包放到项目 public/theme/[名称] 下面
10、手动用函数引入
    themeColorChangeHandle (val) {
      var urlObj = 
        {
          id: 'J_elementTheme',
          url: `${process.env.BASE_URL}theme/${val}/index.css?t=${nDate().getTime()}`
        },
        var el = document.querySelector(`#${urlObj.id}`)
        if (el) {
          el.href = urlObj.url
        }
        el = document.createElement('link')
        el.id = urlObj.id
        el.href = urlObj.url
        el.rel = 'stylesheet'
        document.querySelector('head').appendChild(el)
    }