ts+vue+less实现换肤功能（vue_cli3）

实现效果

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>