作者你好,clone项目后,发现动态换肤功能切换颜色未能改变导航选中颜色,以及icon。想要实现切换颜色后icon颜色也随之变化,有什么想法实现吗?
yvfmudvl1#
根据花裤衩大佬的思路想到的方案 仅仅测试过build之后的效果 请酌情使用 要使用换肤效果默认颜色必须是element-ui主题色 #409EFF 这个颜色theme: {
immediate: true, async handler(val, old) { // 这里改了判断, 没测试出什么问题 const oldVal = old || ORIGINAL_THEME if (typeof val !== 'string') return const themeCluster = this.getThemeCluster(val.replace('#', '')) const originalCluster = this.getThemeCluster(oldVal.replace('#', '')) const $message = this.$message({ message: ' Compiling the theme', customClass: 'theme-message', type: 'success', duration: 0, iconClass: 'el-icon-loading' }) const getHandler = (variable, id) => { return () => { const originalCluster = this.getThemeCluster( ORIGINAL_THEME.replace('#', '') ) const newStyle = this.updateStyle( this[variable], originalCluster, themeCluster ) let styleTag = document.getElementById(id) if (!styleTag) { styleTag = document.createElement('style') styleTag.setAttribute('id', id) document.head.appendChild(styleTag) } styleTag.innerText = newStyle } } if (!this.chalk) { const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css` await this.getCSSString(url, 'chalk') } const chalkHandler = getHandler('chalk', 'chalk-style') chalkHandler() // 以下是新增代码 let styles = [] if (!this.flag) { this.flag = true ;[].slice .call(document.querySelectorAll('link')) .forEach(async item => { if (item.rel === 'stylesheet' || item.as === 'style') const { data } = await axios.get(item.href) if ( new RegExp(oldVal, 'i').test(data) && !/Chalk Variables/.test(data) ) { item.remove() const style = document.createElement('style') style.innerText = data style.isAdd = true styles.push(style) this.stylesRender(styles, originalCluster, themeCluster) } } }) } styles = [].slice .call(document.querySelectorAll('style')) .filter(style => { const text = style.innerText return ( new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text) ) }) this.stylesRender(styles, originalCluster, themeCluster) this.$emit('change', val) $message.close() } }
stylesRender(styles, originalCluster, themeCluster) {
styles.forEach(style => { const { innerText } = style if (typeof innerText !== 'string') return style.innerText = this.updateStyle( innerText, originalCluster, themeCluster ) if (style.isAdd) { style.isAdd = false document.head.appendChild(style) } }) }
1条答案
按热度按时间yvfmudvl1#
根据花裤衩大佬的思路想到的方案 仅仅测试过build之后的效果 请酌情使用 要使用换肤效果默认颜色必须是element-ui主题色 #409EFF 这个颜色
theme: {
stylesRender(styles, originalCluster, themeCluster) {