Change the topic dynamically
The first thing to solve is how to know which topic you need to display and can be switched dynamically. The method I chose is queryString.
When we open the url, we can suffix it with ?theme=xx and read this xx and store it.
The first method: dynamic components
When the route of the theme has not changed, it is just the style inside the component and the function has changed, we can copy a component and after modification, it can be achieved by lazy loading and dynamic components.
// Page component<template>
<div>
<component :is="themeName" />
</div>
</template>
<script>
export default{
name: 'Home',
components:{
theme1:()=>import('@/theme/theme1/a'),
theme2:()=>import('@/theme/theme2/a'),
},
computed:{
themeName(){
retun `theme${this.$}`
}
}
}
</script>
In the component, I extract the script part because most of the components are actually logically the same. Even if there are some differences, we can change it directly in the components of topic 2 to reduce the impact on topic 1.
//
export default{
name:'Theme1',
....
}
<template>
<div class="theme1"></div>
</template>
<script>
import action from '../componentAction/action'
='Theme1'
export default action
</script>
<style scoped>
</style>
What is implemented in this way is that style isolation can be achieved through the style scoped of the subcomponents, and the functional data will be isolated, for example, the swipers in the two subcomponents will not affect each other. At the same time, lazy loading also reduces the loading volume of the home page. The new themes added later are just to draw the picture.
The second method is routing isolation
Routing isolation is actually a simple way to write a route array in theme1 and write a set of routes in theme2.
//
{
path:'/theme3',
name:'theme3Index',
component: () => import('../views/theme3/'),
children:[
{
path: '/theme3/entry',
name: 'theme3Entry',
component: () => import('../views/theme3/'),
}
]
}
This method is actually a down-to-earth solution. I use this mainly because the route has changed. For example, I entered directly before, but now there is an extra layer of entry page in front, so I can only change the route. This method also achieves better isolation.
Summarize
The above two ideas are my thoughts on our current business and are for reference only.
In fact, both methods have one common problem, which is code redundancy. Each component inevitably has a part of the previous topic's code. Although most of the logical code can be extracted, css and template cannot be extracted.
If a topic is added with a dom and a function block each time, if v-if is used every time, the code will actually be more difficult to maintain in the future. Therefore, I chose to divide the code by topic.
Additional two methods based on css
Method 1 Multiple sets of css
<!-- center -->
<template>
Dynamically get parentclassname，Perform a parentclassMultiple definitions of
<div :class="className">
<div class="switch" v-on:click="chang()">
{{ className == "box" ? "On the light" : "Switch off the lights" }}
</div>
</div>
</template>
<script>
export default {
name: "Centre",
data() {
return {
className: "box"
};
},
methods: {
// Change class chang() {
=== "box"
? ( = "boxs")
: ( = "box");
}
},
};
</script>
<style lang="scss">
whenclassforbox usewitchofcss
@import "./style/";
whenclassforboxs useblackofcss
@import "./style/";
.switch {
position: fixed;
top: 4px;
right: 10px;
z-index: 50;
width: 60px;
height: 60px;
background: #fff;
line-height: 60px;
border-radius: 20%;
}
</style>
Each css file style is roughly the same, except that the outermost parent is different, namely .box and .boxs
Method 2 Scs dynamically switch variables
I made it myself into two main files
- _variable.scss variable management file
- var() is the method of declaring style variables proposed in css3
- var (attribute name, attribute value) Note that the attribute value cannot be a string
// Topic Switch$bgColor:var(--backgroundColor,rgb(255,255,255)); $fontColor:var(--fonntColor,rgb(0,0,0)); $bgmColor:var(--backgroundMColor,rgb(238,238,238)); $tableColor:var(--tableColor,rgb(218,218,218)); $borderColor:var(--borderColor,rgb(238,238,238)); $tablesColor:var(--tablesColor,rgb(255,255,255)); $inputColor:var(--inputColor,rgb(255,255,255))
I'm doing a global configuration of the _variable.scss file that was created and not introduced in the component
css: {
loaderOptions: {
// This file is a theme switch file sass: {
prependData: `@import "./src/styles/_variable.scss";`,
},
},
},
This method can modify the variable defined by var
("body")[0].("Attribute name", "Replaced attribute value f");
// Topic Switchconst cut = (cutcheack) => {
("body")[0].("--backgroundColor", cutcheack ? "#121212" : "#fff");
("body")[0].("--fonntColor", cutcheack ? "#cecece" : "#333");
("body")[0].("--backgroundMColor", cutcheack ? "#333" : "#eee");
("body")[0].("--tableColor", cutcheack ? "#000" : "#d8d8d8");
("body")[0].("--tablesColor", cutcheack ? "#222" : "#fff");
("body")[0].("--inputColor", cutcheack ? "#666" : "#fff");
("body")[0].("--borderColor", cutcheack ? "#666" : "#fff");
};
export default cut;
Used in components
<!-- front page -->
<template>
<div class='home'>
<el-switch v-model="cutcheack" active-color="#333" inactive-color="#13ce66" active-text="theme" @change="switchs"></el-switch></div>
</template>
<script>
import cut from "../../utils/";
export default {
name: "Home",
data() {
return {
cutcheack: false, //Theme switching };
},
methods: {
// Hide or show the left navigation // Switch theme switchs() {
cut();
},
},
};
</script>
<style lang='scss' scope>
.home {
height: 100%;
width: 100%;
background:$bgColor;
.el-container {
height: 100%;
color:$fontColor;
}
}
</style>
The above is the detailed content of the various ideas for vue to realize theme switching. For more information about vue theme switching, please pay attention to my other related articles!