因为有人问我如何一键换肤,我就随手做个案例,因为随手写的,里面命名就很随意了,但是不影响阅读。
1:assets目录下建立一个theme.scss
代码如下:
.black{ .alldiv{ background-color: #2A2B43; width: 100px; height: 100px; .header{ color: #00c0db; } } } .light{ .alldiv{ background-color: #00ff00; width: 100px; height: 100px; .header{ color: #6EBCFF; } } } .red{ .alldiv{ background-color: red; width: 100px; height: 100px; .header{ color: #ffffff; } } } 直接把上面代码复制粘贴即可。
2:然后在main.js里引入
import "./assets/theme.scss" 3:然后随意建一个vue组件
<template> <div class="hospitalManage whiteBg addEdit"> <div class="top"> <el-row> <el-button type="primary" @click="changecolor('black')">主要按钮</el-button> <el-button type="success" @click="changecolor('light')">成功按钮</el-button> <el-button type="info" @click="changecolor('red')">信息按钮</el-button> <el-button type="warning" @click="savedata">保存</el-button> <!--<el-button type="danger">危险按钮</el-button>--> </el-row> </div> <div class="botton"> <div id="test"> <div class="alldiv"> <div class="header">45435345</div> </div> </div> </div> </div> </template> <script> export default{ components: { }, data () { return { newcolor:'black', } }, created() { }, mounted: function () { var mycolor = JSON.parse(localStorage.getItem("userInfo")); if (!mycolor && typeof(mycolor)!="undefined" && mycolor!=0){ document.getElementById('test').setAttribute('class','black'); }else{ document.getElementById('test').setAttribute('class',mycolor.color); } }, methods: { changecolor(e){ document.getElementById('test').setAttribute('class',e); this.newcolor=e; }, savedata(){ var obj = {"color":this.newcolor}; localStorage.setItem("userInfo",JSON.stringify(obj)); } }, } </script> <style lang="scss" > .top{ padding: 20px; } .botton{ width: 100%; height: 200px; border: 1px solid #1f5ed1; } #test{ width: 500px; height: 180px; border: 1px solid #1f5ed1; padding: 5px; } </style>
又是复制粘贴,嘻嘻,简单吧,你可以直接拿去改改,然后在你的项目中添加这个一键换肤和保存换肤的功能。这是我想到的最简单的一键换肤写法了,其他人的写法太复杂,虽然可以实现,我看的头疼。只要功能实现,代码当然是越简单越好啦!