1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| import './index.less'
|
| import { Icon, Menu, Dropdown } from 'ant-design-vue'
| import { i18nRender } from '@/locales'
| import i18nMixin from '@/store/i18n-mixin'
|
| const locales = ['zh-CN', 'en-US']
| const languageLabels = {
| 'zh-CN': '简体中文',
| 'en-US': 'English'
| }
| // eslint-disable-next-line
| const languageIcons = {
| 'zh-CN': '🇨🇳',
| 'en-US': '🇺🇸'
| }
|
| const SelectLang = {
| props: {
| prefixCls: {
| type: String,
| default: 'ant-pro-drop-down'
| }
| },
| name: 'SelectLang',
| mixins: [i18nMixin],
| render () {
| const { prefixCls } = this
| const changeLang = ({ key }) => {
| this.setLang(key)
| }
| const langMenu = (
| <Menu class={['menu', 'ant-pro-header-menu']} selectedKeys={[this.currentLang]} onClick={changeLang}>
| {locales.map(locale => (
| <Menu.Item key={locale}>
| <span role="img" aria-label={languageLabels[locale]}>
| {languageIcons[locale]}
| </span>{' '}
| {languageLabels[locale]}
| </Menu.Item>
| ))}
| </Menu>
| )
| return (
| <Dropdown overlay={langMenu} placement="bottomRight">
| <span class={prefixCls}>
| <Icon type="global" title={i18nRender('navBar.lang')} />
| </span>
| </Dropdown>
| )
| }
| }
|
| export default SelectLang
|
|
