vue实现平台换新

Vue实现平台换肤功能

在Vue中实现平台换肤功能通常涉及动态切换CSS变量或主题样式文件。以下是几种常见实现方式：

动态CSS变量切换

使用CSS变量结合Vue的响应式特性实现主题切换：

<template>
  <div :class="theme">
    <button @click="toggleTheme">切换主题</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      theme: 'light'
    }
  },
  methods: {
    toggleTheme() {
      this.theme = this.theme === 'light' ? 'dark' : 'light'
      document.documentElement.setAttribute('data-theme', this.theme)
    }
  }
}
</script>

<style>
:root {
  --primary-color: #409EFF;
  --bg-color: #ffffff;
}

:root[data-theme="dark"] {
  --primary-color: #3275b7;
  --bg-color: #222222;
}

.light {
  background-color: var(--bg-color);
  color: #333;
}

.dark {
  background-color: var(--bg-color);
  color: #fff;
}
</style>

使用SCSS变量与动态类名

对于更复杂的主题系统，可以结合SCSS和动态类名：

<template>
  <div :class="`theme-${currentTheme}`">
    <!-- 页面内容 -->
    <button @click="changeTheme('dark')">深色主题</button>
    <button @click="changeTheme('light')">浅色主题</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTheme: 'light'
    }
  },
  methods: {
    changeTheme(theme) {
      this.currentTheme = theme
      localStorage.setItem('theme', theme)
    }
  },
  mounted() {
    const savedTheme = localStorage.getItem('theme')
    if (savedTheme) {
      this.currentTheme = savedTheme
    }
  }
}
</script>

<style lang="scss">
@mixin theme-vars($theme) {
  @if $theme == light {
    --primary-color: #409EFF;
    --bg-color: #ffffff;
  } @else {
    --primary-color: #3275b7;
    --bg-color: #222222;
  }
}

.theme-light {
  @include theme-vars(light);
  background-color: var(--bg-color);
}

.theme-dark {
  @include theme-vars(dark);
  background-color: var(--bg-color);
}
</style>

使用第三方主题管理库

对于企业级应用，可以考虑使用专门的UI库或主题管理工具：

1. Element UI主题定制：

   npm install element-theme -g
   et -i

   修改生成的variables.scss后编译主题

2. Vuetify主题系统：

   // vuetify.js
   import Vue from 'vue'
   import Vuetify from 'vuetify/lib'
   
   Vue.use(Vuetify)
   
   export default new Vuetify({
     theme: {
       themes: {
         light: {
           primary: '#3f51b5',
           secondary: '#b0bec5',
           accent: '#8c9eff',
           error: '#b71c1c'
         },
         dark: {
           primary: '#212121',
           secondary: '#424242',
           accent: '#616161',
           error: '#d32f2f'
         }
       },
       dark: false
     }
   })

主题持久化方案

实现主题选择的持久化存储：

// theme.js
const THEME_KEY = 'app_theme'

export default {
  getTheme() {
    return localStorage.getItem(THEME_KEY) || 'light'
  },
  setTheme(theme) {
    localStorage.setItem(THEME_KEY, theme)
    document.documentElement.setAttribute('data-theme', theme)
  },
  initTheme() {
    const savedTheme = this.getTheme()
    this.setTheme(savedTheme)
    return savedTheme
  }
}

在Vue组件中使用：

import theme from './theme'

export default {
  data() {
    return {
      currentTheme: theme.initTheme()
    }
  },
  methods: {
    toggleTheme() {
      this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light'
      theme.setTheme(this.currentTheme)
    }
  }
}

动态加载主题CSS文件

对于完全独立的主题样式文件，可以采用动态加载方式：

function loadThemeCSS(themeName) {
  const link = document.createElement('link')
  link.rel = 'stylesheet'
  link.href = `/themes/${themeName}.css`
  link.id = 'theme-style'

  const existingLink = document.getElementById('theme-style')
  if (existingLink) {
    document.head.removeChild(existingLink)
  }

  document.head.appendChild(link)
}

主题切换过渡效果

为提升用户体验，可以添加主题切换过渡：

.theme-transition * {
  transition: background-color 0.3s ease, color 0.3s ease;
}

<template>
  <div :class="['theme-transition', `theme-${currentTheme}`]">
    <!-- 内容 -->
  </div>
</template>

以上方法可根据项目需求组合使用，实现灵活的平台换肤功能。