-
vue-主题切换
themeName/index.vue页面:
- <div class="theme-view">
- <div @click="themeClick" class="theme-btn">切换颜色div>
- <br>
- {{themeName == 'white' ? '白色' : '深色'}}主题页面
- div>
- template>
- <script>
- export default {
- data(){
- return {
- // themeName: 'white', // 白色主题
- }
- },
- computed: {
- // 获取store中的主题色
- themeName() {
- return this.$store.state.user.themeName
- }
- },
- mounted() {
- // 给body添加类名
- document.body.classList.add(this.themeName);
- },
- methods: {
- themeClick(){
- if(this.themeName == 'white'){
- // 存储主题色到全局
- this.$store.commit('saveTheme', 'black')
- // 移除已有主题颜色
- document.body.classList.remove('white')
- }else{
- this.$store.commit('saveTheme', 'white')
- document.body.classList.remove('black')
- }
- // 新增主题类名
- document.body.classList.add(this.themeName)
- },
- },
- }
- script>
- <style>
- .theme-view{
- width: 100%;
- height: 80vh;
- /* 如果css样式权重值不够，需要加 !important */
- background: var(--theme-bg);
- color: var(--theme-color);
- }
- .theme-btn{
- margin: 0 auto;
- height: 30px;
- width: 100px;
- background: var(--theme-btn);
- line-height: 30px;
- cursor: pointer;
- user-select: none;
- }
- style>
styles/white.css文件:
- .white {
- /* 定义css白色主题颜色 */
- --theme-bg: #f2f2f2;
- --theme-color: #333;
- --theme-btn: #0ff;
- }
styles/black.css文件:
- .black {
- /* 定义css黑色主题颜色 */
- --theme-bg: #3b6188;
- --theme-color: #fff;
- --theme-btn: #0f0;
- }
store/modules/user.js文件:
- const state = {
- themeName: 'white', // 白色主题，全局共用同一个主题类型
- }
- const mutations = {
- saveTheme(state, params){
- state.themeName = params;
- },
- }
- export default {
- state,
- mutations,
- }
main.js文件:
- // 引入主题颜色
- import './styles/white.css'
- import './styles/black.css';
-
相关阅读:
零拷贝原理与实现
xcode常用功能与操作
基于PYQT5的GUI开发系列教程【二】框架安装和基础环境配置
旅游业为什么要选择VR全景，VR全景在景区旅游上有哪些应用
我要涨知识——TypeScript 经典高频面试题（二）
【Java SE】面向对象三大特性之继承
tree命令-以树形结构显示目录下的内容
uniapp抽取组件绑定事件中箭头函数含花括号无法解析
IE高级配置中支持的SSL/TLS协议对应注册表值
【Flutter】 包管理（15）Flutter 异步编程 RxDart 实现复杂场景和状态管理
- 原文地址：https://blog.csdn.net/dream_boy_/article/details/140017384