1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<template>
<dropdown class="app-lang" v-if="localList.length > 1" trigger='click' @on-click="selectLang">
<img src="/assets/img/lang.svg" />
<dropdown-menu slot='list'>
<dropdown-item v-for="(item) in localList" :name="item.type" :key="`lang-${item.type}`">{{item.name}}</dropdown-item>
</dropdown-menu>
</dropdown>
</template>
<script lang = 'ts'>
import { Component, Vue, Inject } from 'vue-property-decorator';
import { localList } from '@locale/local-list';
@Component({})
export default class AppLang extends Vue {
/**
* 注入刷新行为
*
* @memberof AppLang
*/
@Inject() reload: any;
/**
* 本地语言资源
*
* @type {*}
* @memberof AppLang
*/
public localList: any[] = localList;
/**
* 标题
*
* @type {(string | null)}
* @memberof AppLang
*/
public title: string | null = null;
/**
* vue 生命周期
*
* @memberof AppLang
*/
public mounted() {
const lang: string = this.$i18n.locale;
const local: any = this.localList.find((_local: any) => Object.is(_local.type, lang));
this.title = local.name;
}
/**
* 选择语言
*
* @param {*} $evnet
* @memberof AppLang
*/
public selectLang($evnet: any): void {
this.$i18n.locale = $evnet;
const local: any = this.localList.find((_local: any) => Object.is(_local.type, $evnet));
this.title = local.name;
localStorage.setItem('local', $evnet);
this.reload();
}
}
</script>
<style lang="scss">
@import './app-lang.scss';
</style>