vue中如何实现换肤?
vue中css配合vuex实现主题皮肤切换
·
正文:上一篇文章给大家说道,css中"var()“和”:root的作用",大家做了这么久的前端开发,是不是有时会遇到项目中会出现切换皮肤的需求,最常见的就是黑白皮肤切换了,是不是一有皮肤切换这种需求就让人很头疼,是不是还没有一个好的思路,那么废话不多说,直接上代码,最简单直观的皮肤切换
第一步
建立两个css文件夹放入static目录下,或者assets目录下,blue_reset.css文件我用作的是白皮肤,resets.css用作的是黑皮肤
这里定义的一些全局css属性,就是放到我们刚刚建立的两个文件夹里面,一套写白皮肤的样式,一套写黑皮肤的样式
:root {
--background-color-base: #ffffff;
--background-color-iphone: #e1e4f6;
--background-color-secondary-base: #f4f4fb;
--image-container-background-color: rgba(144, 144, 144, 0.5);
--modal-title-background-color: #efefef;
--small-title-gradient-background-color: linear-gradient(
90deg,
#efefef 0%,
rgba(239, 239, 239, 0.36) 47%,
rgba(239, 239, 239, 0) 100%
);
}
下面这个是使用方法
<style lang="scss" scoped>
.label {
width: 65px;
margin-right: 16px;
display: inline-block;
text-align: right;
color: var(--background-color-base);
background:var(--background-color-iphone);
}
</style>
第二步
main.js贴上以下代码
window.Skin = null
let mainStyle = 'blue'
if (Skin) {
mainStyle = Skin === 'light' ? 'blue' : 'greyBlue'
}
// 动态插入主体样式表
const head = document.getElementsByTagName('HEAD').item(0)
var style = document.createElement('link')
style.id = 'rootStyle'
style.href = '/static/skin/' + mainStyle + '-min.css'
style.rel = 'stylesheet'
style.type = 'text/css'
head.appendChild(style)
const resetStyle = document.createElement('link')
resetStyle.href =
mainStyle === 'greyBlue'
? '/static/css/reset.css'
: '/static/css/blue_reset.css'
resetStyle.id = 'resetStyle'
resetStyle.rel = 'stylesheet'
resetStyle.type = 'text/css'
head.appendChild(resetStyle)
第三步
vuex里面贴上以下代码
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = {
themeType: 'light', // light默认白皮肤
}
const mutations = {
upDateTheme(state, type) {
state.themeType = type
const rootStyle = document.getElementById('rootStyle')
const resetStyle = document.getElementById('resetStyle')
rootStyle.href = type === 'light' ? '/static/skin/blue-min.css' : '/static/skin/greyBlue-min.css'
resetStyle.href = type === 'light' ? '/static/css/blue_reset.css' : '/static/css/reset.css'
},
}
const store = new Vuex.Store({
state,
mutations,
});
export default store;
第四步
我写了两个按钮,light是白色,dark是黑色,点击不同的按钮,把对应的参数传入vuex中,就可以实现换肤效果了
<template>
<div class="peler">
<div class="menuFu">
<div class="btn">
<el-button @click="fu('light')">换肤(默认)</el-button>
<el-button @click="fu('dark')">换肤2</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
fu(type){
this.$store.commit('upDateTheme',type)
},
},
mounted(){
}
}
</script>
<style lang="scss" scoped>
.peler{
height: calc(100vh - 60px);
font-size: 14px;
color: white;
.menuFu{
margin: 0 auto;
width: 300px;
padding-top: 20px;
.btn{
text-align: center;
margin-bottom: 40px;
}
.box{
width: 200px;
height: 200px;
background: var(--gradient-color);
margin: 0 auto;
border-radius: 50%;
text-align: center;
line-height: 200px;
animation: identifier 8s linear 2s infinite;
&:hover{
animation-play-state:paused;
}
}
.boxTwo{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background: var(--gradient-color);
margin: 0 auto;
animation: move 5s linear 2s infinite;
&:hover{
animation-play-state:paused;
}
}
}
}
</style>
每周一更,简单又实用,感谢支持
更多推荐
已为社区贡献2条内容
所有评论(0)