Ant-design-vue 默认组件多语言切换

创建一个store对象，保存当前的语言

//默认语言
const langKey = "LocalLang";
export default {
  namespaced: true,
  state: {
    //默认中文
    lang: "",
  },
  mutations: {
    //初始化默认语言
    initLanguage(state) {
      var lang = localStorage.getItem(langKey);
      if (lang == null) {
        state.lang = "CN";
      }
      else {
        state.lang = lang;
      }
    },
    //切换语言
    setLanguage(state, lang) {
      state.lang = lang;
      localStorage.setItem(langKey, lang);
    }
  }
}

APPVUE里面，调用多语言设置

<template>
  <a-config-provider :locale="locale">
    <router-view />
  </a-config-provider>
</template>

<script>
// import $ from "jquery";

export default {
  name: "App",
  data() {
    return {
      locale: {},
    };
  },
  watch: {
    "$store.state.setting.lang": {
      handler: function (newVal, oldVal) {
        this.setLanguage(newVal);
      },
    },
  },
  created(){
    //加载本地语言或者初始化语言
    this.$store.commit('setting/initLanguage');
  },
  methods: {
    //设置多语言
    setLanguage(lang) {
      //自定义的
      //this.$i18n.locale = lang;
      //插件自带的
      switch (lang) {
        case "CN":
          this.locale = require("ant-design-vue/es/locale-provider/zh_CN").default;
          break;
        case "US":
        default:
          this.locale = require("ant-design-vue/es/locale-provider/en_US").default;
          break;
      }
    },
  },
  mounted() {
    // setInterval(function () {
    //   $(".ant-menu-submenu-popup").each(function(index){
    //     if ($(".ant-menu-submenu-popup").eq(index).hasClass("ant-menu-submenu-popup-show") == false) {
    //        $(".ant-menu-submenu-popup").eq(index).addClass("ant-menu-submenu-popup-show")
    //       }
    //   });
    // }, 10);
  },
};
</script>

<style lang="less">
* {
  padding: 0px;
  margin: 0px;
  font-family: "-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif";
}
body {
  overflow: hidden;
}
//浮动菜单
.ant-menu-submenu-popup-show {
  max-height: calc(100vh / 2);
  overflow-y: auto;
  min-width: 180px;
}
.ant-tabs-bar {
  margin: 0px;
}
</style>

外部切换语言

changeLang(lang) {
      this.$store.commit("setting/setLanguage", lang);
      this.$message.success("切换成功");
    },