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>
相关推荐
永乐春秋37 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿38 分钟前
【前端】CSS
前端·css
ggdpzhk40 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app