app-lang.vue

<template>
  <dropdown v-if="localList.length > 1" trigger='click' @on-click="selectLang">
    <span>
        {{title}}
        <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, 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="less">
@import './app-lang.less';
</style>