项目需求如下:
根据浏览器配置的语言,切换antd-vue的语言模式
代码如下:
app.vue
html
<template>
<a-config-provider
:locale="locale"
:theme="{
token: {
// 修改主体色为红色
colorPrimary: 'red',
},
}"
>
<router-view />
</a-config-provider>
</template>
<script>
import zhCN from "ant-design-vue/lib/locale/zh_CN"; // 导入中文语言包
import enUS from "ant-design-vue/lib/locale/en_US"; // 导入英文语言包
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");
import { useStore } from "vuex";
import { onMounted, ref, watch } from "vue";
export default {
name: "App",
setup() {
const store = useStore();
// 简单写个映射
const lanMaps = {
en: enUS,
"zh-CN": zhCN,
};
const locale = ref(lanMaps[store.state.language] || zhCN);
watch(
() => store.state.language,
(v, o) => {
locale.value = lanMaps[v];
},
{ deep: true }
);
return {
locale,
};
},
};
</script>