<template>
    <div class="changeLangBox">
        <el-select v-model="value" placeholder="请选择" @change="changeLang" size="small">
          <el-option
            v-for="item in languageList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
    </div>
</template>
<script>
export default {
    data(){
        return{
            languageList:this.$t('message.homeLayout.languageList'),
            value: 'zh'
        }
    },
    mounted(){
        this.value = this.$store.state.currentLanguage
        this.$i18n.locale = this.value
    },
    methods:{
        changeLang(){
            this.$i18n.locale = this.value
            this.$store.commit('setLang',this.value)
            window.location.reload()
        }
    }
}
</script>
<style lang="less" scoped>
.changeLangBox{
    width: 100px;
    margin-left: 30px;
}
</style>