vue element ui 实现更换主题颜色

Posted 2023-04-12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue element ui 实现更换主题颜色相关的知识，希望对你有一定的参考价值。

参考技术A <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>

vue+element做换肤效果

参考技术A 1.用vue-cil安装一个新项目

2.安装element-ui及sass-loader,node-sass

a.安装element-ui

npm i element-ui -S

b.安装sass

npm i sass-loader node-sass -D

3.安装element-ui自定义主题工具

a.安装主题工具

npm i element-theme -g

b.安装chalk主题

npm i element-theme-chalk -D

4.初始化变量文件

et -i

注意：此处可能报错

解决办法：cnpm install element-themex -g

结束后生成element-variables文件，修改$-color-primary:pink

et后生成theme文件

5.封装动态肤色组件ThemePicker.vue

<

template> <el-color-picker

class="theme-picker" popper-class="theme-picker-dropdown" v-model="theme" :size="size"> </el-color-picker></template><script>const version = require('element-ui/package.json').version // element-ui version from node_modulesconst ORIGINAL_THEME = '#409EFF' // default colorexport default

name: 'ThemePicker',

props:

default: // 初始化主题，可由外部传入 type: String,

//default: '#EB815B' default: ""+localStorage.getItem("tremePackers")+"" ,

size: // 初始化主题，可由外部传入 type: String,

default: 'small'

,

data()

return

chalk: '', // content of theme-chalk css theme: ORIGINAL_THEME,

showSuccess: true, // 是否弹出换肤成功消息

,

mounted()

if(this.default != null)

this.theme = this.default this.$emit('onThemeChange', this.theme)

this.showSuccess = false

,

watch:

theme(val, oldVal)

if (typeof val !== 'string') return 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)

document.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 styles = [].slice.call(document.querySelectorAll('style'))

.filter(style =>

const text = style.innerText

return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)

)

styles.forEach(style =>

const innerText = style

if (typeof innerText !== 'string') return style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)

)

// 响应外部操作 this.$emit('onThemeChange', val)

//存入localStorage localStorage.setItem('tremePackers',val);

if(this.showSuccess)

this.$message(

message: '换肤成功',

type: 'success' )

else

this.showSuccess = true

,

methods:

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)

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

callback()

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) // when primary color is in its rgb space 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>

直接引用组件

以上是关于vue element ui 实现更换主题颜色的主要内容，如果未能解决你的问题，请参考以下文章

vue3+vite项目更换自定义主题

element-ui替换主题色介绍

Vue更换主题色的几种方法思路

element-plus 更换主题色 SassError: @forward rules must be written before any other rules

WPF Modern UI 主题更换原理

Flutter 主题（皮肤）更换的那些事