antd-vue - - - - - a-config-provider全局配置中英文切换

项目需求如下:

根据浏览器配置的语言,切换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>
相关推荐
吃饺子不吃馅5 分钟前
【八股汇总,背就完事】这一次再也不怕webpack面试了
前端·面试·webpack
Amos_Web12 分钟前
Rust实战教程--文件管理命令行工具
前端·rust·全栈
li理21 分钟前
鸿蒙相机开发入门篇(官方实践版)
前端
菜狗的小小笔记_21 分钟前
Vue3 实用技巧
vue.js
webxin66622 分钟前
页面动画和延迟加载动画的实现
前端·javascript
逛逛GitHub35 分钟前
这个牛逼的股票市场平台,在 GitHub 上开源了。
前端·github
细节控菜鸡1 小时前
【排查实录】Web 页面能打开,服务器能通接口,客户端却访问失败?原因全在这!
运维·服务器·前端
duandashuaige1 小时前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
今天头发还在吗1 小时前
React + Ant Design 日期选择器避免显示“Invalid Date“的解决方案
前端·react.js·前端框架·ant design
时雨__2 小时前
利用AndVX6开发流程图——问题总结
前端