Ant Design Vue主题动态修改(简单易用)

效果图：

 Ant Design Vue官网里面对主题动态修改说的很少

里面有用的说法就是，新版本有简单的主题切换方法不需要配置乱七八糟的东西，废话不多说直接上代码

<template>
    <!-- 这里是自己画的按钮，官方的按钮操作不方便 -->
    <span>主题</span><br>
    <div class="theme" style="background-color:#1677ff" @click="color1"></div>
    <div class="theme" style="background-color:#00ffff" @click="color2"></div>
    <div class="theme" style="background-color:#7fffd4" @click="color3"></div>
    <div class="theme" style="background-color:#9932cc" @click="color4"></div>
    <div class="theme" style="background-color:rgb(244, 87, 212)" @click="color5"></div>
    <!-- 设置主题的核心位置 -->
    <a-config-provider :theme="{
        token: {
            colorPrimary: myTheme.color,
        },
    }">
    </a-config-provider>
    <br><br><br>
    <a-popconfirm title="确定要退出登录吗" ok-text="确定" cancel-text="取消" @confirm="confirm" @cancel="cancel">
        <a-button type="primary">退出登录</a-button>
    </a-popconfirm>
</template>
<script setup lang='ts'>
import { message } from 'ant-design-vue';
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const confirm = (e: MouseEvent) => {
    message.success('确认退出');
    router.push('/login')
};

const cancel = (e: MouseEvent) => {
    message.error('取消退出');
};
//主题颜色
let myTheme = reactive({ color: '#1677ff' })
const color1 = () => {
    myTheme.color = '#1677ff'
}
const color2 = () => {
    myTheme.color = '#00ffff'
}
const color3 = () => {
    myTheme.color = '#7fffd4'
}
const color4 = () => {
    myTheme.color = '#9932cc'
}
const color5 = () => {
    myTheme.color = 'rgb(244, 87, 212)'
}
</script>

<style scoped>
.theme {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    float: left;
    margin-right: 5px;
    cursor: pointer;
}

.theme:hover {
    border: 1px solid white;
}
</style>

这里我踩过一个坑，很多时候在JS里面变量值改变后<template>监听不到，页面不会更新，这时候我们要在JS变量改变的时候告诉<template>我们改东西了你也要跟着动了，vue2的时候用的是$set，而在vue3我们要用reactive，具体使用方法见上文