浏览代码

add language selector

0xJacky 3 年之前
父节点
当前提交
5fc46f15b5
共有 2 个文件被更改,包括 41 次插入1 次删除
  1. 32 0
      frontend/src/components/SetLanguage/SetLanguage.vue
  2. 9 1
      frontend/src/layouts/HeaderLayout.vue

+ 32 - 0
frontend/src/components/SetLanguage/SetLanguage.vue

@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <a-select v-model="current" size="small" style="width: 50px">
+            <a-select-option v-for="(language, key) in $language.available" :value="key" :key="key">
+                {{ language }}
+            </a-select-option>
+        </a-select>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'SetLanguage',
+    data() {
+        return {
+            current: this.$language.current,
+        }
+    },
+    watch: {
+        current() {
+            this.$store.commit('set_language', this.current)
+            this.$nextTick(() => {
+                location.reload()
+            })
+        }
+    },
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

+ 9 - 1
frontend/src/layouts/HeaderLayout.vue

@@ -4,6 +4,8 @@
             <a-icon type="menu-unfold" @click="$emit('clickUnFold')"/>
         </div>
         <div class="user-wrapper">
+            <set-language class="set_lang" />
+
             <a href="/">
                 <a-icon type="home"/>
             </a>
@@ -16,9 +18,10 @@
 </template>
 
 <script>
+import SetLanguage from '@/components/SetLanguage/SetLanguage'
 export default {
     name: 'HeaderComponent',
-    components: {},
+    components: {SetLanguage},
     methods: {
         logout() {
             this.$api.auth.logout().then(() => {
@@ -59,4 +62,9 @@ export default {
     position: fixed;
     right: 20px;
 }
+
+.set_lang {
+    display: inline;
+    margin-right: 25px;
+}
 </style>