ts+vue+less实现换肤功能（vue_cli3）
2019-10-10 本文已影响0人
打哑谜
实现效果
image
image
1、在assets下创建less文件夹，并在less文件下新建文件variables.less文件
// 背景色定义
@background-color-theme1: #3f8e4d;
@background-color-theme2: deepskyblue;
@background-color-theme3: #edc14;
//定义字体颜色
@font-color-theme1: #edc148;
@font-color-theme2: #652BF5;
@font-color-theme3: deepskyblue;
2、在less下新建mixin.less文件
@charset "utf-8";
@import './variables.less';
// 设置字体颜色
.font-color(@color) {
color: @color;
}
// 设置主题颜色
.bg-color(@color) {
background-color: @color;
}
3、在less下新建theme.less文件
@import './mixin.less';
.theme1 {
.font-color(@font-color-theme1);
.bg-color(@background-color-theme1);
}
.theme2 {
.font-color(@font-color-theme2);
.bg-color(@background-color-theme2);
}
.theme3 {
.font-color(@font-color-theme3);
.bg-color(@background-color-theme3);
}
4、在main.ts中引入
import "@/assets/less/theme.less";
5、在App.vue中使用该主题
<template>
<div id="app">
我是用来做测试哒~~~
<div>
<p @click="changeTheme(1)"></p>
<p @click="changeTheme(2)"></p>
<p @click="changeTheme(3)"></p>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator"
@Component({})
export default class About extends Vue {
mounted() {
this.defaultTheme()
}
// 改变主题
changeTheme(num: number) {
(document.getElementById('app') as HTMLDivElement).className = 'theme' + num;
// 记住当前主题
localStorage.setItem('appTheme', (document.getElementById('app') as HTMLDivElement).className)
}
// 页面初始化选择主题进行加载
defaultTheme() {
// 初始化的时候，如果从未选择过主题，默认使用主题1，如果选择过主题，记住所选主题，下次加载的时候直接加载所选主题。
if (localStorage.getItem('appTheme')) {
(document.getElementById('app') as HTMLDivElement).className = (localStorage.getItem('appTheme') as string)
} else {
this.changeTheme(1)
}
}
}
</script>
<style lang="less">
div {
p {
width: 100px;
height: 100px;
}
}
p:first-child {
background-color: red;
}
p:nth-child(2) {
background-color: #652BF5;
}
p:last-child {
background-color: deepskyblue;
}
</style>
