集成 vue-i18n 支持国际化

example/src/layouts/Layout.vue

@@ -1,5 +1,8 @@
 <template>
-  <lay-config-provider :themeVariable="themeVariable">
+  <lay-config-provider
+    :locale="locale"
+    :theme="theme" 
+    :themeVariable="themeVariable">
     <lay-layout class="layui-layout-document">
       <lay-header
         ><lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
@@ -86,14 +89,19 @@ export default {
       router.push(menu.path);
     };
 
+    const locale = "en_US";
+
     const theme = "light";
 
     const themeVariable = {
+      "--global-primary-color":"red",
+      "--global-checked-color":"red"
     }
 
     return {
       menus,
       theme,
+      locale,
       themeVariable,
       currentPath,
       handleClick,

package.json

@@ -39,6 +39,7 @@
     "countup.js": "^2.0.8",
     "evtd": "^0.2.3",
     "vue": "^3.2.30",
+    "vue-i18n": "^9.2.0-beta.30",
     "vue-router": "^4.0.12"
   },
   "devDependencies": {

src/component/input/index.vue

@@ -6,6 +6,9 @@ export default {
 
 <script setup lang="ts">
 import "./index.less"
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n();
 
 export interface LayInputProps {
   name?: string;
@@ -15,7 +18,8 @@ export interface LayInputProps {
   placeholder?: string;
 }
 
-const props = defineProps<LayInputProps>();
+const props = withDefaults(defineProps<LayInputProps>(), {
+});
 
 const emit = defineEmits(["update:modelValue", "input", "focus", "blur"]);
 

src/component/page/index.vue

@@ -6,6 +6,7 @@ export default {
 
 <script setup lang="ts">
 import { Ref, ref, watch, useSlots, computed } from "vue";
+import { useI18n } from 'vue-i18n';
 
 export interface LayPageProps {
   total: number;
@@ -23,6 +24,8 @@ export interface LayPageProps {
 
 const slots = useSlots();
 
+const { t } = useI18n();
+
 const props = withDefaults(defineProps<LayPageProps>(), {
   limit: 10,
   theme: "green",
@@ -113,7 +116,7 @@ watch(currentPage, function () {
       @click="prev()"
     >
       <slot v-if="slots.prev" name="prev"></slot>
-      <template v-else>上一页</template>
+      <template v-else>{{ t('page.prev') }}</template>
     </a>
     <template v-if="showPage">
       <template v-for="index of totalPage" :key="index">
@@ -135,7 +138,7 @@ watch(currentPage, function () {
       @click="next()"
     >
       <slot v-if="slots.next" name="next"></slot>
-      <template v-else>下一页</template>
+      <template v-else>{{ t('page.next') }}</template>
     </a>
     <span v-if="showLimit" class="layui-laypage-limits">
       <select v-model="inlimit">

src/index.ts

@@ -4,6 +4,7 @@ import "./theme/index.less";
 import "@layui/layer-vue/lib/index.css";
 import "@layui/icons-vue/lib/index.css";
 import { layer, useLayer } from "@layui/layer-vue";
+import i18n from "./locales";
 
 import LayLayer from "./component/layer/index";
 import LayBacktop from "./component/backTop/index";
@@ -156,6 +157,7 @@ const install = (app: App): void => {
     const item = components[key];
     app.component(item.name || key, item);
   }
+  app.use(i18n);
 };
 
 export {

src/locales/index.ts

@@ -0,0 +1,27 @@
+import { createI18n } from 'vue-i18n'
+
+const i18n = createI18n({
+  locale: 'en_US', // set locale
+  messages: {
+    zh_CN: {
+      input: {
+        hello: '你好世界',
+      },
+      page: {
+        prev: '上一页',
+        next: '下一页'
+      }
+    },
+    en_US: {
+      input: {
+        hello: 'hello world',
+      },
+      page: {
+        prev: 'prev',
+        next: 'next'
+      }
+    },
+  },
+})
+
+export default i18n

src/provider/index.vue

@@ -1,25 +1,31 @@
 <script lang="ts">
 import { watch } from '@vue/runtime-core';
+import { useI18n } from 'vue-i18n';
 export default {
   name: "lay-config-provider",
 };
 </script>
 
 <script setup lang="ts">
+const { locale } = useI18n(); 
 
 export interface LayConfigProviderProps {
-    local?: string;
+    locale?: string;
     theme?: string;
     themeVariable?: object;
 }
 
 const props = withDefaults(defineProps<LayConfigProviderProps>(),
   {
-    local: 'zh_cn', 
+    locale: 'en_US', 
     theme: 'light',
   }
 );
 
+const changeLocale = (lang: string) => {
+  locale.value = lang
+}
+
 const changeTheme = (theme: string) => {
   document.body.removeAttribute("lay-theme");
   document.body.setAttribute("lay-theme", theme);
@@ -36,6 +42,10 @@ const changeThemeVariable = (vars: any) => {
     }
 };
 
+watch(() => props.locale, (lang) => {
+  changeLocale(lang)
+},{immediate: true})
+
 watch(() => props.theme, (theme) => {
   changeTheme(theme);
 },{immediate: true});