64 lines
1.3 KiB
Vue
64 lines
1.3 KiB
Vue
<template>
|
||
<el-dialog
|
||
v-dialogDrag
|
||
:title="$t('global.switchLanguage')"
|
||
:visible.sync="visible"
|
||
width="360px"
|
||
:before-close="doClose"
|
||
class="language_box"
|
||
>
|
||
<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>
|
||
|
||
<style rel="stylesheet/scss" lang="scss">
|
||
.language_box .el-dialog__header{
|
||
padding: 0 20px 10px;
|
||
}
|
||
</style>
|