vue-element-admin 动态换肤问题 自己写的样式无法动态换肤 只有element-ui有效果

ThemePicker 换肤组件中代码添加

重点：要有效果自己写的颜色必须使用 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')) //获取所有的link链接
         .forEach(async item => {
           if (item.rel === 'stylesheet' || item.as === 'style') { //判断是否是 css
             const { data } = await axios.get(item.href) // 重新获取到 css 的内容
             if (
               new RegExp(oldVal, 'i').test(data) &&   // 判断是否需要换肤
               !/Chalk Variables/.test(data)	// 判断是否是 element-ui 的 css 前面已经进行处理了这里忽略
             ) {
               item.remove()   // 移出 link 
               const style = document.createElement('style') // 创建 style
               style.innerText = data // 把 link 的内容添加到 style 标签中
               style.isAdd = true // 为后面判断是否是 link 生成的style
               styles.push(style)
               this.stylesRender(styles, originalCluster, themeCluster) // 样式渲染
             }
           }
         })
     }
     styles = [].slice
       .call(document.querySelectorAll('style')) 
       .filter(style => {  // 遍历所有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( // 获取替换过颜色的 css
      innerText,
      originalCluster,
      themeCluster
    )
    if (style.isAdd) { // 如果是通过 link 创建的style 就添加到head中
      style.isAdd = false
      document.head.appendChild(style)
    }
  })
}

仅仅测试过build出来之后的效果, 请自行测试后酌情使用