vue-element-admin

vue-element-admin copied to clipboard

作者你好，clone项目后，发现动态换肤功能切换颜色未能改变导航选中颜色，以及icon。 想要实现切换颜色后icon颜色也随之变化，有什么想法实现吗？

根据花裤衩大佬的思路想到的方案 仅仅测试过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)
    }
  })
}

根据花裤衩大佬的思路想到的方案 仅仅测试过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)
    }
  })
}

这段代码忽略了background-image:url('path'); 背景图片引入的问题