vue实现平台换新
Vue实现平台换肤的常见方法
使用CSS变量动态切换主题色
在Vue项目中可以通过CSS变量结合Vue的响应式特性实现换肤。定义全局CSS变量，通过修改这些变量的值来切换主题。
/* 全局样式文件中定义变量 */
:root {
--primary-color: #409EFF;
--bg-color: #ffffff;
}
.dark-theme {
--primary-color: #324157;
--bg-color: #1f2d3d;
}// 在Vue组件中切换主题
methods: {
toggleTheme() {
document.body.classList.toggle('dark-theme')
}
}基于SCSS的预处理器方案
利用SCSS的变量和mixin功能，配合Vue的动态class绑定实现主题切换。
// variables.scss
$themes: (
light: (
primary: #409EFF,
bg: #ffffff
),
dark: (
primary: #324157,
bg: #1f2d3d
)
);<template>
<div :class="`theme-${currentTheme}`">
<!-- 内容 -->
</div>
</template>
<script>
import '@/styles/variables.scss'
export default {
data() {
return {
currentTheme: 'light'
}
},
methods: {
changeTheme(theme) {
this.currentTheme = theme
}
}
}
</script>使用Vuex管理主题状态
对于大型应用，建议使用Vuex集中管理主题状态，便于全局访问和修改。
// store/modules/theme.js
const state = {
currentTheme: 'light'
}
const mutations = {
SET_THEME(state, theme) {
state.currentTheme = theme
}
}
export default {
namespaced: true,
state,
mutations
}Element UI等UI库的主题定制
对于使用Element UI等组件库的项目，可以利用其提供的主题定制功能。
// 动态切换Element主题色
changeElementTheme(color) {
const theme = generateTheme(color)
const style = document.createElement('style')
style.innerHTML = theme
document.head.appendChild(style)
}持久化主题选择
将用户选择的主题保存到localStorage或cookie中，实现主题持久化。
// 保存主题选择
saveTheme(theme) {
localStorage.setItem('user-theme', theme)
this.$store.commit('theme/SET_THEME', theme)
}响应式主题切换
结合媒体查询和用户偏好设置，实现自动切换暗黑模式。
// 检测系统主题偏好
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
darkModeMediaQuery.addListener(e => {
const theme = e.matches ? 'dark' : 'light'
this.changeTheme(theme)
})
