devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

elementui自定义主题（任意颜色）换肤功能_$--color-primary

作者：繁依Fanyi0 | 2024-02-14 22:39:42

赞

踩

$--color-primary

我的项目中使用了scss，elementui官网提供了解决方案如下：

  1. 在项目中改变 SCSS 变量
  2.  
  3. Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。
  4. 1. 新建一个样式文件，例如 element-variables.scss，写入以下内容：
  5.  
  6. /* 改变主题色变量 */
  7. $--color-primary: teal;
  8.  
  9. /* 改变 icon 字体路径变量，必需 */
  10. $--font-path: '~element-ui/lib/theme-chalk/fonts';
  11.  
  12. @import "~element-ui/packages/theme-chalk/src/index";
  13.  
  14. 2. 之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：
  15.  
  16. import Vue from 'vue'
  17. import Element from 'element-ui'
  18. import './element-variables.scss'
  19.  
  20. Vue.use(Element)
  21. 需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。

以上方法，我们修改主题色变量 $--color-primary 的值，然后在项目入口文件 main.js 中引入该样式文件，覆盖elementui的css文件，即可实现换肤。 

那么怎么做到自定义任意颜色的主题呢？大致思路如下：

  • 1.使用 el-color-picker 组件，供用户选择颜色
  • 2.监听颜色的变化，创建 style 标签，生成样式内容
  • 3.将创建好的样式内容插入 head 中

实际步骤如下：

  • 1.在项目中新建一个scss文件，比如就叫 elementui-variables.scss 

            

           内容如下：

  1. /* theme color */
  2. $--color-primary: #1890ff;
  3. $--color-success: #13ce66;
  4. $--color-warning: #FFBA00;
  5. $--color-danger: #ff4949;
  6. // $--color-info: #1E1E1E;
  7.  
  8. $--button-font-weight: 400;
  9.  
  10. // $--color-text-regular: #1f2d3d;
  11.  
  12. $--border-color-light: #dfe4ed;
  13. $--border-color-lighter: #e6ebf5;
  14.  
  15. $--table-border:1px solid #dfe6ec;
  16.  
  17. /* icon font path, required */
  18. $--font-path: '~element-ui/lib/theme-chalk/fonts';
  19.  
  20. // @import "~element-ui/packages/theme-chalk/src/index";
  21.  
  22. :export {
  23.   theme: $--color-primary;
  24. }
  • 2.考虑到项目全局都有可能使用到颜色这个变量，所以决定用vuex，如图：新建文件 settings.js

           

settings.js 内容如下，theme 的初始值为 elementui-variables.scss 中定义的theme。

  1. import variables from '@/styles/element-variables.scss'
  2.  
  3. const settings = {
  4.   state: {
  5.     theme: variables.theme,
  6.   },
  7.   mutations: {
  8.     CHANGE_SETTING: (state, { key, value }) => {
  9.       if (state.hasOwnProperty(key)) {
  10.         state[key] = value
  11.       }
  12.     }
  13.   },
  14.   actions: {
  15.     changeSetting({ commit }, data) {
  16.       commit('CHANGE_SETTING', data)
  17.     }
  18.   }
  19.  
  20. }
  21.  
  22. export default settings

 

  • 3.新建一个组件（一般在components目录下，我将它命名为ThemePicker），用于监听颜色变量 theme 的改变，然后 getHandler 函数生成样式文件，插入head中。在这里我遇到了一个问题，如果使用 document.head.appendChild(styleTag) ，页面就会变成一片空白，然后我就在想有可能是样式的顺序导致一些有用的样式被覆盖了，所以我就讲它改为 document.getElementsByTagName('style')[0].insertBefore(styleTag, null) ； 完美解决问题。

ThemePicker文件内容如下，可以看到默认的颜色是 this.$store.state.settings.theme ，它是在 elementui-variables.scss 中定义的。

  1. <template>
  2.   <el-color-picker
  3.     v-model="theme"
  4.     :predefine="['#409EFF', '#67C23A', '#E6A23C', '#f5222d', '#11a983', '#13c2c2', '#6959CD', '#434f5d', ]"
  5.     class="theme-picker"
  6.     popper-class="theme-picker-dropdown" title="换肤"
  7.   />
  8. </template>
  9.  
  10. <script>
  11. const version = require('element-ui/package.json').version // element-ui version from node_modules
  12. const ORIGINAL_THEME = '#409EFF' // default color
  13.  
  14. export default {
  15.   data() {
  16.     return {
  17.       chalk: '', // content of theme-chalk css
  18.       theme: ''
  19.     }
  20.   },
  21.   computed: {
  22.     defaultTheme() {
  23.       return this.$store.state.settings.theme
  24.     }
  25.   },
  26.   watch: {
  27.     defaultTheme: {
  28.       handler: function(val, oldVal) {
  29.         this.theme = val
  30.       },
  31.       immediate: true
  32.     },
  33.     async theme(val) {
  34.       const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
  35.       if (typeof val !== 'string') return
  36.       const themeCluster = this.getThemeCluster(val.replace('#', ''))
  37.       const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
  38.       // console.log(themeCluster, originalCluster)
  39.  
  40.       const $message = this.$message({
  41.         message: '更换主题中...',
  42.         customClass: 'theme-message',
  43.         type: 'success',
  44.         duration: 0,
  45.         iconClass: 'el-icon-loading'
  46.       })
  47.  
  48.       const getHandler = (variable, id) => {
  49.         return () => {
  50.           const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
  51.           const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
  52.  
  53.           let styleTag = document.getElementById(id)
  54.           
  55.           if (!styleTag) {
  56.             styleTag = document.createElement('style')
  57.             styleTag.setAttribute('id', id)
  58.             
  59.             // document.head.appendChild(styleTag)
  60.             document.getElementsByTagName('style')[0].insertBefore(styleTag, null)
  61.           }
  62.           styleTag.innerText = newStyle
  63.         }
  64.       }
  65.  
  66.       if (!this.chalk) {
  67.         const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
  68.         await this.getCSSString(url, 'chalk')
  69.       }
  70.  
  71.       const chalkHandler = getHandler('chalk', 'chalk-style')
  72.  
  73.       chalkHandler()
  74.  
  75.       const styles = [].slice.call(document.querySelectorAll('style'))
  76.         .filter(style => {
  77.           const text = style.innerText
  78.           return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
  79.         })
  80.       styles.forEach(style => {
  81.         const { innerText } = style
  82.         if (typeof innerText !== 'string') return
  83.         style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
  84.       })
  85.  
  86.       this.$emit('change', val)
  87.  
  88.       $message.close()
  89.     }
  90.   },
  91.  
  92.   methods: {
  93.     updateStyle(style, oldCluster, newCluster) {
  94.       let newStyle = style
  95.       oldCluster.forEach((color, index) => {
  96.         newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
  97.       })
  98.       return newStyle
  99.     },
  100.  
  101.     getCSSString(url, variable) {
  102.       return new Promise(resolve => {
  103.         const xhr = new XMLHttpRequest()
  104.         xhr.onreadystatechange = () => {
  105.           if (xhr.readyState === 4 && xhr.status === 200) {
  106.             this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
  107.             resolve()
  108.           }
  109.         }
  110.         xhr.open('GET', url)
  111.         xhr.send()
  112.       })
  113.     },
  114.  
  115.     getThemeCluster(theme) {
  116.       const tintColor = (color, tint) => {
  117.         let red = parseInt(color.slice(0, 2), 16)
  118.         let green = parseInt(color.slice(2, 4), 16)
  119.         let blue = parseInt(color.slice(4, 6), 16)
  120.  
  121.         if (tint === 0) { // when primary color is in its rgb space
  122.           return [red, green, blue].join(',')
  123.         } else {
  124.           red += Math.round(tint * (255 - red))
  125.           green += Math.round(tint * (255 - green))
  126.           blue += Math.round(tint * (255 - blue))
  127.  
  128.           red = red.toString(16)
  129.           green = green.toString(16)
  130.           blue = blue.toString(16)
  131.  
  132.           return `#${red}${green}${blue}`
  133.         }
  134.       }
  135.  
  136.       const shadeColor = (color, shade) => {
  137.         let red = parseInt(color.slice(0, 2), 16)
  138.         let green = parseInt(color.slice(2, 4), 16)
  139.         let blue = parseInt(color.slice(4, 6), 16)
  140.  
  141.         red = Math.round((1 - shade) * red)
  142.         green = Math.round((1 - shade) * green)
  143.         blue = Math.round((1 - shade) * blue)
  144.  
  145.         red = red.toString(16)
  146.         green = green.toString(16)
  147.         blue = blue.toString(16)
  148.  
  149.         return `#${red}${green}${blue}`
  150.       }
  151.  
  152.       const clusters = [theme]
  153.       for (let i = 0; i <= 9; i++) {
  154.         clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
  155.       }
  156.       clusters.push(shadeColor(theme, 0.1))
  157.       return clusters
  158.     }
  159.   }
  160. }
  161. </script>
  162.  
  163. <style>
  164. .theme-picker {
  165.   float: left;
  166.   margin-top: 10px;
  167. }
  168.  
  169. .theme-message,
  170. .theme-picker-dropdown {
  171.   z-index: 99999 !important;
  172. }
  173.  
  174. .theme-picker .el-color-picker__trigger {
  175.   height: 26px !important;
  176.   width: 26px !important;
  177.   padding: 2px;
  178. }
  179.  
  180.  
  181.  
  182. .theme-picker-dropdown .el-color-dropdown__link-btn {
  183.   display: none;
  184. }
  185. </style>

页面上有些组件的样式可能是自定义的，不会随 theme 一起变化，可这么实现：

  1.      <router-link v-for="tag in Array.from(visitedViews)" ref="tag" :style="isActive(tag)?{
  2.         'background-color': theme,
  3.         'color': '#ffffff',
  4.         'border-color': theme
  5.         }:{}"
  6.         :to="tag" :key="tag.path" class="tags-view-item">
  7.         {{ tag.name }}
  8.         <span class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)"/>
  9.      </router-link>
  1. computed: {
  2.     //...,
  3.     theme() {
  4.       return this.$store.state.settings.theme
  5.     }
  6.   },
  • 4.最后在页面上使用 ThemePicker 组件即可：

实际效果录屏：

 

 

 

 

 

 

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号