西安给大学做网站公司,购买了域名之后怎么做网站,宜昌城市建设学校网站,做外贸常用的网站有哪些需求#xff1a;根据element的自定义主题色#xff0c;之后改变element的全局所有颜色#xff0c;解决页面刷新后主题色失效问题#xff0c;这个需要把颜色存入到浏览器的存储中#xff0c;如果换个浏览器就得重新选择了哈#xff0c;如果需要在不同的浏览器保持一致的主…需求根据element的自定义主题色之后改变element的全局所有颜色解决页面刷新后主题色失效问题这个需要把颜色存入到浏览器的存储中如果换个浏览器就得重新选择了哈如果需要在不同的浏览器保持一致的主题需要跟后端沟通
之前还写过一个简单的有需要的可以去看vue实现element-ui自定义主题色切换(简单版)_element主题切换_请叫我欧皇i的博客-CSDN博客
效果如下 1.下载颜色插件
我下的是1.4.6版本,最好下载的版本一致吧不然报错了我也没办法
npm install webpack-theme-color-replacer1.4.6
2.建个js文件themeColorClient.js
直接复制粘贴以下代码
import client from webpack-theme-color-replacer/client
import forElementUI from webpack-theme-color-replacer/forElementUI
// 注意自己项目里的引入路径export let curColor #409EFF// 动态切换主题色
export function changeThemeColor(newColor) {var options {newColors: [...forElementUI.getElementUISeries(newColor), #ff0000, #ffff00]}return client.changer.changeColor(options, Promise).then(() {curColor newColorlocalStorage.setItem(theme_color, curColor)})
}
// 页面刷新的时候会触发
export function initThemeColor() {const savedColor localStorage.getItem(theme_color)if (savedColor) {curColor savedColorchangeThemeColor(savedColor)}
}3.在main.js文件导入
保证每次刷新数据还在
import { initThemeColor } from ./plugins/themeColorClient
initThemeColor()
4.颜色选择器
templateel-color-picker v-modelmainColor sizesmall changechangeColor /
/templatescript
import { changeThemeColor, curColor } from /plugins/themeColorClient;
export default {name: d2-header-color,data() {return {mainColor: curColor,predefine: [#ff4500,#ff8c00,#ffd700,#90ee90,#00ced1,#1e90ff,#c71585,],};},methods: {changeColor(newColor) {console.log(newColor, 颜色);changeThemeColor(newColor).then((t) console.log(123465)).catch((err) console.log(err, 567));//.then(t this.$x.toast.success(主题色切换成功~))},},
};
/script5.在vue.config.js中配置
const ThemeColorReplacer require(webpack-theme-color-replacer)
const forElementUI require(webpack-theme-color-replacer/forElementUI)
module.exports {chainWebpack: config {// 自定义主题色config.plugin(theme-color-replacer).use(ThemeColorReplacer, [{fileName: style/theme-colors.[contenthash:8].css,matchColors: [...forElementUI.getElementUISeries(process.env.VUE_APP_ELEMENT_COLOR), // Element-ui主色系列#0cdd3a, // 自定义颜色#c655dd],changeSelector: forElementUI.changeSelector,// 解决history模式下路由跳转样式不生效问题injectCss: true,isJsUgly: process.env.NODE_ENV production ? true : undefined}])
}}
这样就可以实现了文章到此结束希望对你有所帮助~有不懂的可以在评论区联系我
