github.com/easysoft/zendata@v0.0.0-20240513203326-705bd5a7fd67/ui/src/components/SelectLang/index.jsx (about)

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