vue2实现动态换element-ui主题色
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
第一种:重新引入新主题色的链接(网络不好的情况下,可能会出错或换色比较慢)
转载自掘金,原文链接:Element-ui 通过实时修改主题色实现一键换肤
第二种:webpack-theme-color-replacer插件实现(推荐)
注意:此时main.js里引入element样式要改成
import 'element-ui/packages/theme-chalk/src/index.scss'
使用官方推荐的
import 'element-ui/lib/theme-chalk/index.css'
会导致换主题色无效。
1、安装依赖包。
注意同时需要 sass、sass-loader。
我这里的版本分别是sass@1.35.1、sass-loader@9.0.3、webpack-theme-color-replacer@1.4.7
npm install webpack-theme-color-replacer --save
2、vue.config.js里添加对应的plugin。
configureWebpack: {
plugins: [
// 生成仅包含颜色的替换样式(主题色等)
new ThemeColorReplacer({
fileName: 'style/theme-colors.[contenthash:8].css',
matchColors: [...forElementUI.getElementUISeries('#1890ff')],
externalCssFiles: [
'./node_modules/element-ui/lib/theme-chalk/index.css'
],
changeSelector: forElementUI.changeSelector,
injectCss: true // 解决router为history模式下改变样式后刷新页面不生效的问题
})
]
}
3、src/utils文件夹下添加换主题色方法ElementTheme.js。
import client from 'webpack-theme-color-replacer/client'
import forElementUI from 'webpack-theme-color-replacer/forElementUI'
// 动态切换主题色
export function changeElementColor(newColor) {
var options = {
newColors: [...forElementUI.getElementUISeries(newColor)],
appendToEl: 'body'
}
return client.changer.changeColor(options, Promise).then(() => {
})
}
4、调用方法,大功告成。
import { changeElementColor } from '@/utils/ElementTheme'
changeElementColor('#2ca1f4')
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)