首页 > 网络编程 > JavaScript > vue-element如何实现动态换肤存储

vue-element如何实现动态换肤存储

福牛 4月 25, 2023 24 0

需要实现的效果

选择颜色块或者颜色选择器切换网站主题色，选择主题后保存到本地，下次打开页面是缓存的主题色

-1

-2

-3

-4

原理

根据ElementUI官网的自定义主题，新建一个样式文件：element-variables(或者参考官网生成)，在文件中写入：

  1. /* 改变主题色变量 */
  2. $—color–primary: #409eff;
  3. $—color–success: #67c23a;
  4. /*….还可以定义更多变量*/
  5.  
  6. /* 改变 icon 字体路径变量，必需 */
  7. $—font–path: ‘~element-ui/lib/theme-chalk/fonts’;
  8.  
  9. @import “~element-ui/packages/theme-chalk/src/index”;
  10.  
  11. //主要的一步：
  12. :export {
  13.      theme: $—color–primary;
  14. }
  15.  

在项目store文件夹中新建theme.js文件，用于存储主题色变化状态，代码如下

  1. //引入element-variables文件，文件路径根据自己项目存放位置来
  2. import variables from ‘@/assets/css/element-variables.scss’
  3. const state = {
  4.      theme: variables.theme
  5. }
  6.  
  7. const getters = {
  8.      theme: function (state) {
  9.          return state.theme;
  10.      }
  11. };
  12.  
  13. const mutations = {
  14.      CHANGE_SETTING: (state, { key, value }) => {
  15.      // eslint-disable-next-line no-prototype-builtins
  16.      if (state.hasOwnProperty(key)) {
  17.          state[key] = value
  18.      }
  19.      }
  20. }
  21.  
  22. const actions = {
  23.      changeSetting({ commit }, data) {
  24.      commit(‘CHANGE_SETTING’, data)
  25.      }
  26. }
  27.  
  28. export default {
  29.      namespaced: true,
  30.      state,
  31.      mutations,
  32.      actions,
  33.      getters
  34. }
  35.  

然后在store.js中引入theme.js

  1. import vue from ‘vue’;
  2. import Vuex from ‘vuex’;
  3. import theme from ‘@/store/theme.js’;
  4. Vue.use(Vuex);
  5. export default new Vuex.Store({
  6.      modules: {
  7.          theme
  8.      }
  9. });

切换主图部分template代码如下：

  1. <el-form-item label=“可选主题” label-width=“140px”>
  2.      <div class=“color-box”>
  3.          <div
  4.              v-for=“(item,i) in themeArr”
  5.              :key=“i”
  6.              :class=“[‘color-item’,theme===item?’active’:”]”
  7.              :style=“{backgroundColor:item}“
  8.              @click=“changeTheme(item)”>
  9.              <span v-if=“theme===item” class=“iconfont icon-f-right”></span>
  10.          </div>
  11.      </div>
  12. </el-form-item>
  13. <el-form-item label=“自定义主题” label-width=“140px”>
  14.      <el-color-picker
  15.          v-model=“theme”
  16.          :predefine=“[‘#409EFF’, ‘#1890ff’, ‘#304156′,’#212121′,’#11a983’, ‘#13c2c2’, ‘#6959CD’, ‘#f5222d’, ]”
  17.          class=“theme-picker”
  18.          popper-class=“theme-picker-dropdown”
  19.      />
  20. </el-form-item>

script代码

  1. const version = require(‘element-ui/package.json’).version // element-ui version from node_modules
  2. const ORIGINAL_THEME = ‘#409EFF’ // default color
  3.  
  4. export default {
  5.      data() {
  6.          return {
  7.              themeArr: [‘#409EFF’,‘#202225’,‘#F56C6C’,‘#FFAB42’,‘#17a969’,‘#888C8F’],
  8.              chalk: ”,
  9.              theme: ORIGINAL_THEME,
  10.          }
  11.      },
  12.      watch: {
  13.          //异步监听theme的变化
  14.          async theme(val,oldVal) {
  15.      if (typeof val !== ‘string’) return
  16.      const themeCluster = this.getThemeCluster(val.replace(‘#’, ”))
  17.      const originalCluster = this.getThemeCluster(oldVal.replace(‘#‘, ”))
  18.      // console.log(themeCluster, originalCluster)
  20.      const $message = this.$message({
  21.      message: ‘ Compiling the theme’,
  22.      customClass: ‘theme-message’,
  23.      type: ‘success’,
  24.      duration: 0,
  25.      iconClass: ‘el-icon-loading’
  26.      })
  28.      const getHandler = (variable, id) => {
  29.      return () => {
  30.      const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace(‘#’, ”))
  31.      const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
  33.      let styleTag = document.getElementById(id)
  34.      if (!styleTag) {
  35.      styleTag = document.createElement(‘style’)
  36.      styleTag.setAttribute(‘id’, id)
  37.      document.head.appendChild(styleTag)
  38.      }
  39.      styleTag.innerText = newStyle
  40.      }
  41.      }
  43.          // 初次进入或刷新时动态加载CSS文件
  44.      if (!this.chalk) {
  45.      const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
  46.      await this.getCSSString(url, ‘chalk’)
  47.      }
  49.      const chalkHandler = getHandler(‘chalk’, ‘chalk-style’)
  51.      chalkHandler()
  53.      const styles = [].slice.call(document.querySelectorAll(‘style’))
  54.      .filter(style => {
  55.      const text = style.innerText
  56.      return new RegExp(oldVal, ‘i’).test(text) && !/Chalk Variables/.test(text)
  57.      })
  58.      styles.forEach(style => {
  59.      const { innerText } = style
  60.      if (typeof innerText !== ‘string’) return
  61.      style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
  62.      })
  64.      // 将修改的主题保存到本地，下次打开页面是保存的主题色
  65.      localStorage.setItem(‘theme’,val)
  66.      //调用vuex中改变主题色方法
  67.              this.$store.dispatch(‘theme/changeSetting’, {
  68.          key: ‘theme’,
  69.          value: val
  70.          })
  72.      $message.close()
  74.      },
  75.      }，
  76.      methods: {
  77.          updateStyle(style, oldCluster, newCluster) {
  78.      let newStyle = style
  79.      oldCluster.forEach((color, index) => {
  80.      newStyle = newStyle.replace(new RegExp(color, ‘ig’), newCluster[index])
  81.      })
  82.      return newStyle
  83.      },
  84.      getCSSString(url, variable) {
  85.      return new Promise(resolve => {
  86.      const xhr = new XMLHttpRequest()
  87.      xhr.onreadystatechange = () => {
  88.      if (xhr.readyState === 4 && xhr.status === 200) {
  89.      this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, ”)
  90.      resolve()
  91.      }
  92.      }
  93.      xhr.open(‘GET’, url)
  94.      xhr.send()
  95.      })
  96.      },
  97.      getThemeCluster(theme) {
  98.      const tintColor = (color, tint) => {
  99.      let red = parseInt(color.slice(0, 2), 16)
  100.      let green = parseInt(color.slice(2, 4), 16)
  101.      let blue = parseInt(color.slice(4, 6), 16)
  103.      if (tint === 0) { // when primary color is in its rgb space
  104.      return [red, green, blue].join(‘,’)
  105.      } else {
  106.      red += Math.round(tint * (255 – red))
  107.      green += Math.round(tint * (255 – green))
  108.      blue += Math.round(tint * (255 – blue))
  110.      red = red.toString(16)
  111.      green = green.toString(16)
  112.      blue = blue.toString(16)
  114.      return `#${red}${green}${blue}`
  115.      }
  116.      }
  118.      const shadeColor = (color, shade) => {
  119.      let red = parseInt(color.slice(0, 2), 16)
  120.      let green = parseInt(color.slice(2, 4), 16)
  121.      let blue = parseInt(color.slice(4, 6), 16)
  123.      red = Math.round((1 – shade) * red)
  124.      green = Math.round((1 – shade) * green)
  125.      blue = Math.round((1 – shade) * blue)
  127.      red = red.toString(16)
  128.      green = green.toString(16)
  129.      blue = blue.toString(16)
  131.      return `#${red}${green}${blue}`
  132.      }
  134.      const clusters = [theme]
  135.      for (let i = 0; i <= 9; i++) {
  136.      clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
  137.      }
  138.      clusters.push(shadeColor(theme, 0.1))
  139.      return clusters
  140.      },
  141.          // 颜色块点击切换主题事件
  142.          changeTheme(item) {
  143.          this.theme = item
  144.      this.$store.dispatch(‘theme/changeSetting’, {
  145.      key: ‘theme’,
  146.      value: item
  147.      })
  148.          },
  149.      }，
  150.      mounted() {
  151.          //从本地存储获取保存的主题
  152.          if(localStorage.getItem(“theme”)) {
  153.              this.theme = localStorage.getItem(“theme”)
  154.              this.$store.dispatch(‘theme/changeSetting’, {
  155.          key: ‘theme’,
  156.          value: this.theme
  157.          })
  158.          }
  159.      }
  160. }

颜色块选择样式style：

  1. .color–box {
  2.      display: Flex;
  3.      flex–wrap: wrap;
  4.      .color–item {
  5.          position: relative;
  6.          margin: 2px;
  7.          width: 34px;
  8.          height: 34px;
  9.          border–radius: 3px;
  10.          border: 2px solid transparent;
  11.          cursor: pointer;
  12.          span {
  13.              position: absolute;
  14.              right: 0;
  15.              top: 0;
  16.              width: 15px;
  17.              height: 15px;
  18.              background–color: #000;
  19.              color: #fff;
  20.              font–size: 10px;
  21.      text–align: center;
  22.          }
  23.          &.active {
  24.              border–color: #000;
  25.          }
  26.      }
  27. }

最后感谢：vue-element-admin作者 本实现方案借鉴于此

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

标签

相关推荐

发表评论