support custom language packs

README.en.md

@@ -7,7 +7,7 @@
   <a href="https://coveralls.io/r/sentsin/layui?branch=master"><img alt="Test Coverage" src="https://img.shields.io/coveralls/sentsin/layui/master.svg"></a>
 </p>  
 
-**[🔶 Reading Document](http://layui-vue.pearadmin.com)**
+**[🔶 Read Document](http://layui-vue.pearadmin.com)**
 
 An enterprise-class UI components based on Layui and Vue.
 

example/src/layouts/Layout.vue

@@ -2,6 +2,7 @@
   <lay-config-provider
     :locale="locale"
     :theme="theme" 
+    :locales="locales"
     :themeVariable="themeVariable">
     <lay-layout class="layui-layout-document">
       <lay-header
@@ -13,7 +14,7 @@
           style="margin-top: 0px; margin-bottom: 0px"
         >
           <li class="layui-nav-item">
-            <router-link to="/zh-CN/index"> 首页 </router-link>
+            <router-link to="/zh-CN/index"> {{ t('nav.home')}} </router-link>
           </li>
           <li class="layui-nav-item">
             <router-link to="/zh-CN/guide"> 指南 </router-link>
@@ -47,6 +48,12 @@
               <lay-icon type="layui-icon-fonts-code" size="15px"></lay-icon>
             </a>
           </li>
+          <li class="layui-nav-item">
+            <a href="javascript:void(0)"> 
+              <lay-badge type="rim" class="layui-local-badge" v-if="locale === 'en_US'" @click="changeLocale('zh_CN')">中 文</lay-badge>
+              <lay-badge type="rim" class="layui-local-badge" v-else @click="changeLocale('en_US')">英 文</lay-badge>    
+            </a>
+          </li>
           <li class="layui-nav-item">
             <a href="https://gitee.com/layui-vue/layui-vue/issues">
               <lay-icon type="layui-icon-chat" size="15px"></lay-icon>
@@ -65,11 +72,28 @@
 import { ref, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import menu from "../view/utils/menus";
+import { useI18n } from 'vue-i18n';
 export default {
   setup() {
+
+    const { t } = useI18n(); 
+
     const route = useRoute();
     const router = useRouter();
     const currentPath = ref("/zh-CN/guide");
+    // 当前语言
+    const locale = ref('zh_CN');
+    // 扩展语言包
+    const locales = [
+      {name:'zh_CN',locale: {nav: { home: '首页' }}, merge: true},
+      {name:'en_US',locale: {nav: { home: 'Home' }}, merge: true}
+    ]
+    // 当前主题
+    const theme = "light";
+    // 主题变量
+    const themeVariable = {
+
+    }
 
     const menus = [];
 
@@ -89,20 +113,20 @@ export default {
       router.push(menu.path);
     };
 
-    const locale = "en_US";
-
-    const theme = "light";
-
-    const themeVariable = {
+    const changeLocale = function(lang) {
+      locale.value = lang;
     }
 
     return {
+      t,
       menus,
       theme,
       locale,
+      locales,
       themeVariable,
       currentPath,
       handleClick,
+      changeLocale,
     };
   },
 };
@@ -141,6 +165,19 @@ export default {
 .layui-header > .layui-nav {
   background-color: transparent;
 }
+
+.layui-header .layui-local-badge {
+  font-size: 12.4px;
+  background: transparent;
+  color:rgba(255, 255, 255, 0.7);
+  border-color:rgba(255, 255, 255, 0.7);
+}
+
+.layui-header > .layui-local:hover {
+  color:white;
+  border-color:white;
+}
+
 .layui-menu-docs {
   padding-top: 10px;
 }

example/src/main.ts

@@ -1,8 +1,8 @@
 import Layout from './App.vue'
-import { App, createApp as _createApp, createSSRApp } from 'vue'
+import { App, createApp as _createApp } from 'vue'
 import { createRouter } from './router/index'
 import { Router } from 'vue-router'
-import Layui from '../../src/index'
+import layui from '../../src/index'
 import LayCode from './components/LayCode.vue'
 import LaySearch from './components/LaySearch.vue'
 import LayTableBox from './components/LayTableBox.vue'
@@ -14,18 +14,18 @@ export function createApp(): {
   app: App<Element>
   router: Router
 } {
-  const app =
-    import.meta.env.MODE === 'production' ? createSSRApp(Layout) : _createApp(Layout)
-  const router = createRouter()
+  
+  const app = _createApp(Layout);
+  const router = createRouter();
 
   app
+    .use(layui)
     .use(router)
     .component('LayCode', LayCode)
     .component('LaySearch', LaySearch)
     .component('LayTableBox', LayTableBox)
     .component('LayComment', LayComment)
     .component('LayAnchor',LayAnchor)
-    .use(Layui)
 
   return { app, router }
-}
+}

src/locales/index.ts

@@ -3,11 +3,11 @@ import zh_CN from "./zh_CN";
 import en_US from './en_US';
 
 const i18n = createI18n({
-  locale: 'en_US', // set locale
+  locale: 'en_US',
   messages: {
     zh_CN: zh_CN,
     en_US: en_US,
   },
 })
 
-export default i18n
+export default i18n;

src/provider/index.vue

@@ -1,59 +1,86 @@
 <script lang="ts">
-import { watch } from '@vue/runtime-core';
-import { useI18n } from 'vue-i18n';
+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(); 
+const { locale, setLocaleMessage, mergeLocaleMessage } = useI18n();
 
 export interface LayConfigProviderProps {
-    locale?: string;
-    theme?: string;
-    themeVariable?: object;
+  locale?: string;
+  locales?: [];
+  theme?: string;
+  themeVariable?: object;
 }
 
-const props = withDefaults(defineProps<LayConfigProviderProps>(),
-  {
-    locale: 'en_US', 
-    theme: 'light',
-  }
-);
+const props = withDefaults(defineProps<LayConfigProviderProps>(), {
+  locale: "en_US",
+  theme: "light",
+});
 
 const changeLocale = (lang: string) => {
-  locale.value = lang
-}
+  locale.value = lang;
+};
+
+const changeLocales = (lang: string, locales: any, merge: boolean) => {
+  if (merge) {
+    mergeLocaleMessage(lang, locales);
+  } else {
+    setLocaleMessage(lang, locales);
+  }
+};
 
 const changeTheme = (theme: string) => {
   document.body.removeAttribute("lay-theme");
   document.body.setAttribute("lay-theme", theme);
-}
-
-const changeThemeVariable = (vars: any) => {
-    if(vars!=null){
-      const keys = Object.keys(vars);
-      for(let i=0;i<keys.length;i++){
-        const key = keys[i];
-        const value=vars[key];
-        document.documentElement.style.setProperty(key,value);
-      }
-    }
 };
 
-watch(() => props.locale, (lang) => {
-  changeLocale(lang)
-},{immediate: true})
+const changeThemeVariable = (vars: any) => {
+  if (vars != null) {
+    const keys = Object.keys(vars);
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      const value = vars[key];
+      document.documentElement.style.setProperty(key, value);
+    }
+  }
+};
 
-watch(() => props.theme, (theme) => {
-  changeTheme(theme);
-},{immediate: true});
+watch(
+  () => props.locale,
+  (lang) => {
+    changeLocale(lang);
+  },
+  { immediate: true }
+);
 
-watch(() => props.themeVariable, (vars) => {
+watch(
+  () => props.locales,
+  (locals) => {
+    locals?.forEach((item: any) => {
+      changeLocales(item.name, item.locale, item.merge);
+    });
+  }, { immediate: true, deep: true}
+);
+
+watch(
+  () => props.theme,
+  (theme) => {
+    changeTheme(theme);
+  },
+  { immediate: true }
+);
+
+watch(
+  () => props.themeVariable,
+  (vars) => {
     changeThemeVariable(vars);
-},{immediate: true, deep: true});
-
+  },
+  { immediate: true, deep: true }
+);
 </script>
 
 <template>