mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-06 04:00:06 +08:00
feat: optimize international language settings; 🌟
优化国际化语言设置功能;
This commit is contained in:
parent
94fb7964b2
commit
1ab1f1b224
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user