56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
|
<template>
|
|||
|
|
<el-dialog
|
|||
|
|
:title="$t('global.switchLanguage')"
|
|||
|
|
:visible.sync="visible"
|
|||
|
|
width="360px"
|
|||
|
|
:before-close="doClose"
|
|||
|
|
>
|
|||
|
|
<div style="">
|
|||
|
|
<span>{{ $t('global.language') }}：</span>
|
|||
|
|
<el-select v-model="lang" :placeholder="$t('global.chooseLanguage')">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in options"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
<span slot="footer" class="dialog-footer">
|
|||
|
|
<el-button @click="visible = false">{{ $t('global.cancel') }}</el-button>
|
|||
|
|
<el-button type="primary" @click="handleConfirm">{{ $t('global.confirm') }}</el-button>
|
|||
|
|
</span>
|
|||
|
|
</el-dialog>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import LangStorage from '@/utils/lang';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
visible: false,
|
|||
|
|
lang: '',
|
|||
|
|
options: [
|
|||
|
|
{value: 'zh', label: '中文'},
|
|||
|
|
{value: 'en', label: 'English'}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
doShow() {
|
|||
|
|
this.visible = true;
|
|||
|
|
this.lang = LangStorage.getLang('zh');
|
|||
|
|
},
|
|||
|
|
doClose() {
|
|||
|
|
this.visible = false;
|
|||
|
|
},
|
|||
|
|
handleConfirm() {
|
|||
|
|
this.$i18n.locale = this.lang;
|
|||
|
|
LangStorage.setLang(this.lang);
|
|||
|
|
this.doClose();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|