You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.2 KiB
60 lines
1.2 KiB
7 months ago
|
<template>
|
||
|
|
<div class="lang-icon">
|
||
|
|
<Dropdown transfer @on-click="langChange">
|
||
|
|
<Icon type="md-globe" size="26" />
|
||
|
|
<DropdownMenu slot="list">
|
||
|
|
<DropdownItem name="zh-CN" :selected="currLang == 'zh-CN'"
|
||
|
|
><div class="lan-logo-content">
|
||
|
|
<img src="@/assets/icon/chinese.png" class="country-logo" />简体中文
|
||
|
|
</div></DropdownItem
|
||
|
|
>
|
||
|
|
<DropdownItem name="en-US" :selected="currLang == 'en-US'"
|
||
|
|
><div class="lan-logo-content">
|
||
|
|
<img src="@/assets/icon/english.png" class="country-logo" />English
|
||
|
|
</div></DropdownItem
|
||
|
|
>
|
||
|
|
</DropdownMenu>
|
||
|
|
</Dropdown>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "langSwitch",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
currLang: "zh-CN",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
langChange(v) {
|
||
|
|
this.currLang = v;
|
||
|
|
this.$i18n.locale = v;
|
||
|
|
this.$store.commit("switchLang", v);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
if (localStorage.lang) {
|
||
|
|
this.currLang = localStorage.lang;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less">
|
||
|
|
.lang-icon {
|
||
|
|
position: fixed;
|
||
|
|
top: 2vh;
|
||
|
|
right: 1.5vw;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.lan-logo-content {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
.country-logo {
|
||
|
|
width: 15px;
|
||
|
|
margin-right: 8px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|