feat: optimize international language settings; 🌟

优化国际化语言设置功能;
This commit is contained in:
iczer 2020-06-24 16:31:02 +08:00
parent 94fb7964b2
commit 1ab1f1b224

View File

@ -21,12 +21,10 @@
<header-avatar class="header-item"/> <header-avatar class="header-item"/>
<a-dropdown class="lang header-item"> <a-dropdown class="lang header-item">
<div> <div>
<a-icon type="global"/> <a-icon type="global"/> {{langAlias}}
</div> </div>
<a-menu @click="value => setLang(value.key)" :selected-keys="[lang]" slot="overlay"> <a-menu @click="val => setLang(val.key)" :selected-keys="[lang]" slot="overlay">
<a-menu-item key="CN"><span >cn</span> 简体中文</a-menu-item> <a-menu-item v-for=" lang in langList" :key="lang.key">{{lang.key.toLowerCase() + ' ' + lang.name}}</a-menu-item>
<a-menu-item key="HK"><span >hk</span> 繁体中文</a-menu-item>
<a-menu-item key="US"><span >us</span> English</a-menu-item>
</a-menu> </a-menu>
</a-dropdown> </a-dropdown>
</div> </div>
@ -45,16 +43,24 @@ export default {
name: 'GlobalHeader', name: 'GlobalHeader',
components: {IMenu, HeaderAvatar, HeaderNotice, HeaderSearch}, components: {IMenu, HeaderAvatar, HeaderNotice, HeaderSearch},
props: ['collapsed', 'menuData'], props: ['collapsed', 'menuData'],
provide() { inject: ['menuI18n'],
data() {
return { return {
headerTheme: this.theme langList: [
{key: 'CN', name: '简体中文', alias: '简体'},
{key: 'HK', name: '繁体中文', alias: '繁体'},
{key: 'US', name: 'English', alias: 'English'}
]
} }
}, },
inject: ['menuI18n'],
computed: { computed: {
...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'lang']), ...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'lang']),
headerTheme () { headerTheme () {
return (this.layout == 'side' && !this.isMobile) ? 'light' : this.theme return (this.layout == 'side' && !this.isMobile) ? 'light' : this.theme
},
langAlias() {
let lang = this.langList.find(item => item.key == this.lang)
return lang.alias
} }
}, },
methods: { methods: {
@ -101,6 +107,7 @@ export default {
margin: auto; margin: auto;
} }
&.side{ &.side{
padding-right: 12px;
} }
.logo { .logo {
height: 64px; height: 64px;