贵阳网站建设公司哪个好,杨和勒流网站建设,做网站的 简历,天元建设集团有限公司济南分公司假如要使用两套主题#xff1a;蓝色、红色
例如#xff1a; 首先确保自己的vue3项目有less#xff0c;这边不多做接入解释
1、在src目录下建一个styles文件夹#xff0c;在syles文件夹下面新建两个less文件#xff1a;theme.less和variables.less#xff1b;
theme.le…假如要使用两套主题蓝色、红色
例如 首先确保自己的vue3项目有less这边不多做接入解释
1、在src目录下建一个styles文件夹在syles文件夹下面新建两个less文件theme.less和variables.less
theme.less的样式代码默认的主题色
import ./variables.less;:root {--primary-color: #e83d23; // 默认主题颜色
}variables.less的样式代码供切换的主题可以制作多种我这边只做两种
.red-theme {--primary-color: #e83d23;
}.blue-theme {--primary-color: #4c7bec;
}2、使用vuex来管理这边vuex怎么接入就不过多叙述请先接入vuex然后直接粘贴我里面的全部代码
store下面的index代码
import { createStore } from vuex// 持久化的插件
import createPersistedState from vuex-persistedstateconst state {// 当前的主题currentTheme: red-theme,
}
const getters {
}
const mutations {// 切换主题的方法switchTheme(state, theme) {state.currentTheme theme;},
}
const actions {// 异步切换主题switchTheme({ commit }, theme) {commit(switchTheme, theme);},
}const modules {}export default createStore({state,mutations,actions,getters,modules,plugins: [createPersistedState()],
})
3、在App.vue里面的顶层div使用我当前的样式class这边直接粘贴代码
App.vue
templatediv :classcurrentThemerouter-view v-slot{ Component }keep-alivecomponent :isComponent v-if$route.meta.keepAlive //keep-alivecomponent :isComponent v-if!$route.meta.keepAlive //router-view/div
/templatescript langtsimport { defineComponent } from vueimport { mapState } from vuexexport default defineComponent({name: App,components: {},computed: {...mapState([currentTheme]),}})
/script
主要代码是最外层div上面绑定的class下面的router-view你们项目是怎样的就是怎样的不用和我的一样然后再是下面的计算属性引入vuex里面的主题变量
4、在页面代码里面使用切换功能就可以切换了例如
index.vue
templatedivbutton clickswitchTheme(red-theme)点击切换为红色/buttonbutton clickswitchTheme(blue-theme)点击切换为蓝色/buttondiv classtest测试切换主题/div/div
/templatescript setupimport { ref } from vue;import { useStore } from vuexconst store useStore()const currentTheme ref(red-theme);const switchTheme (theme) {store.commit(switchTheme, theme)}
/script
style langless scoped.test {// 使用第一步定义的样式变量color: var(--primary-color);}
/style
至此就可以了其实思路很简单就是在根目录上面绑定样式通过切换这个样式来做到主题的切换如果使用的主题量很大是不是就得考虑性能问题了...
