Vue换肤主题-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue换肤主题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Vue换肤主题

拷贝颜色选择组件 **ThemePicker文章来源地址https://www.toymoban.com/news/detail-446686.html

<template>
  <!-- navabar的换肤组件 -->
  <el-color-picker
    v-model="theme"
    :predefine="[
      '#409EFF',
      '#1890ff',
      '#304156',
      '#212121',
      '#11a983',
      '#13c2c2',
      '#6959CD',
      '#f5222d'
    ]"
    class="theme-picker"
    popper-class="theme-picker-dropdown"
  />
</template>

<script>
const version = require('element-ui/package.json').version // element-ui version from node_modules
const ORIGINAL_THEME = '#409EFF' // default color

export default {
   
  data() {
   
    return {
   
      chalk: '', // content of theme-chalk css
      theme: ''
    }
  },
  computed: {
   
    defaultTheme() {
   
      return this.$store.state.settings.theme
    }
  },
  watch: {
   
    defaultTheme: {
   
      handler: function(val, oldVal) {
   
        this.theme = val
      },
      immediate: true
    },

    // 监视了theme的变化（主体色）字符串
    // 只要theme变化了，切换element-ui相关的主题色，加载对应的样式
    theme: {
   
      // 是否一进入页面，就立刻执行
      immediate: true,
      async handler(val) {
   
        const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
        if (typeof val !== 'string') return
        const themeCluster = this.getThemeCluster(val.replace('#', ''))
        const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))

        const $message = this.$message({
   
          message: '  Compiling the theme',
          customClass: 'theme-message',
          type: 'success',
          duration: 0,
          iconClass: 'el-icon-loading'
        })

        const getHandler = (variable, id) => {
   
          return () => {
   
            const originalCluster = this.getThemeCluster(
              ORIGINAL_THEME.replace('#', '')
            )
            const newStyle = this