Vue网站如何设置主题色以及换肤功能

Vue项目网站如何设置主题色以及换肤功能

1.利用store全局存储颜色,这里存储了一个全局颜色value,一段全局样式styleTheme颜色名colorName,都给了默认值，名字都可以自定义哈。

export const state = () => ({
  value: '#14CD88', // #14CD88
  styleTheme: '--main-color:#14CD88;--main-color-hover:#43D7A0;--main-color-dropdown-hover:rgba(67,215,160,0.2);',
  colorName: ''
})

2.mutation里设置和改变颜色值

setValue (state, value) {
    state.value = value
    // 转Rgba
    function hexToRgba (hex, a, b, c, opacity = 1) {
      return 'rgba(' + (parseInt('0x' + hex.slice(1, 3)) + a) + ',' + (parseInt('0x' + hex.slice(3, 5)) + b) + ',' + (parseInt('0x' + hex.slice(5, 7)) + c) + ',' + opacity + ')'
    }
    const styleData = [
      `--main-color:${value}`,
      `--main-color-hover:${hexToRgba(value, 47, 10, 24)}`,
      `--main-color-dropdown-hover:${hexToRgba(value, 47, 10, 24, 0.2)}`
    ]
    state.styleTheme = styleData.join(';')
  },
  setColorName (state, value) {
    state.colorName = value
  }

3.接口获取到后台设置的主题色后，在对应的action里commit

export const actions = {
  /**
     * @description 设置颜色
     * @param {Object} context
     * @param {String} color 尺寸
     */
  set ({ state, dispatch, commit }, color) {
    return new Promise((resolve) => {
      // store 赋值
      commit('setValue', color)
      // end
      resolve()
    })
  },
  /**
   * @description 设置颜色-名字
   * @param {Object} context
   * @param {String} colorName
   */
  setName ({ state, dispatch, commit }, colorName) {
    return new Promise((resolve) => {
      // store 赋值
      commit('setColorName', colorName)
      // end
      resolve()
    })
  }
}

4.用户登录后接口请求得到主题色，进行dispatch设置就好啦

getTenantTheme () {
      api.getTenantTheme().then((res) => {
        if (res.status && res.result) {
          this.dispatch('setName',res.result)
        }
      })
    }
}

5.最后在页面取到store中主题颜色styleTheme，colorName,设置到body标签上

computed: {
    ...mapState('color', [
      'styleTheme',
      'colorName'
    ])
  },
styleTheme () {
  document.body.style.cssText = this.styleTheme
}
mounted () {
    // 兼容ie写法，也可以elt.setAttribute("style", "color:red; border: 1px solid blue;");
    document.body.style.cssText = this.styleTheme
    document.addEventListener('scroll', this.handleScroll)
  },

6.在页面其他地方使用颜色变量，可以通过全局颜色变量“--main-color” “--main-color-hover” “--main-color-dropdown-hover”来取值使用了：如background-color:var(--main-color)。