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
70
<template>
<dropdown v-if="localList.length > 1" trigger='click' @on-click="selectLang" class="app-lang">
<span>
{{caption}}
<icon size='18' type='md-arrow-dropdown'></icon>
</span>
<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, Prop } from 'vue-property-decorator';
import { localList } from '@/locale/local-util';
@Component({})
export default class AppLang extends Vue {
/**
* 页面title
*
* @type {string}
* @memberof AppLang
*/
@Prop()
public title!: string;
/**
* 本地语言资源
*
* @type {*}
* @memberof AppLang
*/
public localList: any[] = localList;
/**
* 标题
*
* @type {(string | null)}
* @memberof AppLang
*/
public caption: 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.caption = 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);
window.location.reload();
}
}
</script>