up i18n

src/layout/components/setting/index.vue

@@ -1,7 +1,17 @@
 <template>
   <div class="setting">
     <div class="menu-item">
-      <el-button size="small" @click="changeLang" style="width: 100px">{{ T('ChangeLang') }}</el-button>
+      <el-dropdown>
+        <div class="title">
+          <i data-v-f414ea64="" class="el-icon el-tooltip__trigger" aria-label="请选择您的语言" id="el-id-1024-2" role="button" tabindex="0" aria-controls="el-id-1024-3" aria-expanded="false" aria-haspopup="navigation" style="font-size: 24px;"><svg data-v-f414ea64="" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path fill="currentColor" d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"></path></svg></i>
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="(v, k) in appStore.setting.langs" @click="changeLang(k)" :key="k">{{ v.name }}</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+
+      </el-dropdown>
     </div>
     <div class="menu-item">
         <el-switch
@@ -59,8 +69,8 @@
   const showChangePwd = () => {
     changePwdVisible.value = true
   }
-  const changeLang = () => {
-    appStore.changeLang()
+  const changeLang = (v) => {
+    appStore.changeLang(v)
   }
   const isDark = useDark();
   // const toggleDark = useToggle(isDark)
@@ -74,13 +84,18 @@
   justify-content: space-around;
   .menu-item {
     margin-left: 10px;
+    *{
+      outline: none;
+    }
   }
+
   .title {
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: space-around;
 
+
     .nickname {
       padding: 0 10px;
     }