vue2 + elementUI + scss 制作主题切换+动画效果 作者:System 时间:2024年08月27日 分类:所有,elementui 字数:1285 <template> <el-button @click="toggleTheme">切换主题</el-button> </template> <script> export default { methods: { toggleTheme() { const currentTheme = this.$store.state.theme; const nextTheme = currentTheme === 'dark' ? 'light' : 'dark'; this.$store.commit('setTheme', nextTheme); // 切换主题时,可以添加动画效果 document.documentElement.classList.add('theme-transition'); setTimeout(() => { document.documentElement.classList.remove('theme-transition'); }, 1000); } } } </script> <style lang="scss"> :root { --primary-color: #409EFF; /* 默认主题色 */ --background-color: #FFFFFF; /* 默认背景色 */ --text-color: #333333; /* 默认文本色 */ } .theme-dark { --primary-color: #FFFFFF; /* 暗色主题的主题色 */ --background-color: #333333; /* 暗色主题的背景色 */ --text-color: #FFFFFF; /* 暗色主题的文本色 */ } .theme-transition { transition: color 1s, background-color 1s; } /* 应用主题样式到全局元素 */ body { color: var(--text-color); background-color: var(--background-color); .el-button { background-color: var(--primary-color); color: var(--text-color); } /* 其他样式 */ } </style>VueCopy在这个简化的例子中,我们使用了SCSS的变量来定义主题色和背景色,并通过CSS变量在全局范围内应用这些主题色。我们还添加了一个.theme-transition类来实现在切换主题时的动画效果。这个例子展示了如何在Vue应用中实现主题切换的基本方法,并且保持了代码的简洁性。
评论已关闭