support custom language packs

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 }
-}
+}