rt-sim-training-client/src/layout/components/Language.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>