美文网首页
vue element ui 实现更换主题颜色

vue element ui 实现更换主题颜色

作者: 轩_7ca0 | 来源:发表于2021-01-12 18:31 被阅读0次

<template>

  <el-color-picker

    :predefine="predefineColors"

    v-model="themeVal"

    size="mini"

    style="padding-top:18px;"

    class="theme-picker"

    popper-class="theme-picker-dropdown"/>

</template>

<script>

const version = require('element-ui/package.json').version // element-ui 版本

const ORIGINAL_THEME = '#409EFF' // 默认颜色

export default {

  name: 'TopColor',

  data() {

    return {

      themeVal: ORIGINAL_THEME,

      chalk: '',

      predefineColors: [//预选颜色

        '#ff4500',

        '#ff8c00',

        '#ffd700',

        '#90ee90',

        '#00ced1',

        '#1e90ff',

        '#c71585'

      ]

    }

  },

  watch: {//监听选中的颜色

      themeVal(val, oldVal) {

        this.updateTheme(val, oldVal)

      }

  },

  methods: {

    //调用更新函数

      updateTheme(val, oldVal) {

        if (typeof val !== 'string') return

        //声明常量 head

        const head = document.getElementsByTagName('head')[0]

        const themeCluster = this.getThemeCluster(val.replace('#', ''))

        const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))

        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)

              head.appendChild(styleTag)

            }

            styleTag.innerText = newStyle

          }

        }

        const chalkHandler = getHandler('chalk', 'chalk-style')

        if (!this.chalk) {

          const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`

          this.getCSSString(url, chalkHandler, 'chalk')

        } else {

          chalkHandler()

        }

        const link = [].slice.call(

          document.getElementsByTagName('head')[0].getElementsByTagName('link')

        )

        for (let i = 0; i < link.length; i++) {

          const style = link[i]

          if (style.href.includes('css')) {

            this.getCSSString(style.href, innerText => {

              const originalCluster = this.getThemeCluster(

                ORIGINAL_THEME.replace('#', '')

              )

              const newStyle = this.updateStyle(

                innerText,

                originalCluster,

                themeCluster

              )

              let styleTag = document.getElementById(i)

              if (!styleTag) {

                styleTag = document.createElement('style')

                styleTag.id = i

                styleTag.innerText = newStyle

                head.appendChild(styleTag)

              }

            })

          }

        }

        const styles = [].slice.call(document.querySelectorAll('style'))

        styles.forEach(style => {

          const {

            innerText

          } = style

          if (typeof innerText !== 'string') return

          style.innerText = this.updateStyle(

            innerText,

            originalCluster,

            themeCluster

          )

        })

      },

      updateStyle(style, oldCluster, newCluster) {

        let newStyle = style

        oldCluster.forEach((color, index) => {

          newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])

        })

        return newStyle

      },

      getCSSString(url, callback, variable) {

        const xhr = new XMLHttpRequest()

        xhr.onreadystatechange = () => {

          if (xhr.readyState === 4 && xhr.status === 200) {

            if (variable) {

              this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')

            }

            callback(xhr.responseText)

          }

        }

        xhr.open('GET', url)

        xhr.send()

      },

      getThemeCluster(theme) {

        const tintColor = (color, tint) => {

          let red = parseInt(color.slice(0, 2), 16)

          let green = parseInt(color.slice(2, 4), 16)

          let blue = parseInt(color.slice(4, 6), 16)

          if (tint === 0) {

            return [red, green, blue].join(',')

          } else {

            red += Math.round(tint * (255 - red))

            green += Math.round(tint * (255 - green))

            blue += Math.round(tint * (255 - blue))

            red = red.toString(16)

            green = green.toString(16)

            blue = blue.toString(16)

            return `#${red}${green}${blue}`

          }

        }

        const shadeColor = (color, shade) => {

          let red = parseInt(color.slice(0, 2), 16)

          let green = parseInt(color.slice(2, 4), 16)

          let blue = parseInt(color.slice(4, 6), 16)

          red = Math.round((1 - shade) * red)

          green = Math.round((1 - shade) * green)

          blue = Math.round((1 - shade) * blue)

          red = red.toString(16)

          green = green.toString(16)

          blue = blue.toString(16)

          return `#${red}${green}${blue}`

        }

        const clusters = [theme]

        for (let i = 0; i <= 9; i++) {

          clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))

        }

        clusters.push(shadeColor(theme, 0.1))

        return clusters

      }

    }

}

</script>

<style>

.theme-picker .el-color-picker__trigger {

  vertical-align: middle;

}

.theme-picker-dropdown .el-color-dropdown__link-btn {

  display: none;

}

</style>