| 提交 | 用户 | age | ||
| 5db3ce | 1 | <!-- |
| V | 2 | * @Author: Vben |
| 3 | * @Description: Multi-language switching component | |
| 4 | --> | |
| 737b1b | 5 | <template> |
| V | 6 | <Dropdown |
| 7 | :trigger="['click']" | |
| 8 | :dropMenuList="localeList" | |
| 9 | :selectedKeys="selectedKeys" | |
| 10 | @menuEvent="handleMenuEvent" | |
| e5f8ce | 11 | overlayClassName="app-locale-picker-overlay" |
| 737b1b | 12 | > |
| ba068b | 13 | <span class="app-local-picker"> |
| V | 14 | <GlobalOutlined class="app-local-picker__icon" /> |
| 15 | <span v-if="showText">{{ getLangText }}</span> | |
| 16 | </span> | |
| 737b1b | 17 | </Dropdown> |
| V | 18 | </template> |
| 19 | <script lang="ts"> | |
| ba068b | 20 | import { defineComponent, ref, watchEffect, unref, computed } from 'vue'; |
| 737b1b | 21 | |
| V | 22 | import { Dropdown, DropMenu } from '/@/components/Dropdown'; |
| 23 | import { GlobalOutlined } from '@ant-design/icons-vue'; | |
| 24 | ||
| 25 | import { useLocale } from '/@/hooks/web/useLocale'; | |
| ba068b | 26 | import { useLocaleSetting } from '/@/hooks/setting/useLocaleSetting'; |
| 737b1b | 27 | |
| V | 28 | import { LocaleType } from '/@/locales/types'; |
| 29 | ||
| 73c8e0 | 30 | import { propTypes } from '/@/utils/propTypes'; |
| V | 31 | |
| 737b1b | 32 | export default defineComponent({ |
| V | 33 | name: 'AppLocalPicker', |
| 34 | components: { GlobalOutlined, Dropdown }, | |
| ba068b | 35 | props: { |
| 73c8e0 | 36 | // Whether to display text |
| V | 37 | showText: propTypes.bool.def(true), |
| 38 | // Whether to refresh the interface when changing | |
| 39 | reload: propTypes.bool, | |
| ba068b | 40 | }, |
| e5f8ce | 41 | setup(props) { |
| 737b1b | 42 | const { localeList } = useLocaleSetting(); |
| V | 43 | const selectedKeys = ref<string[]>([]); |
| 44 | ||
| 45 | const { changeLocale, getLang } = useLocale(); | |
| ba068b | 46 | |
| V | 47 | const getLangText = computed(() => { |
| 48 | const key = selectedKeys.value[0]; | |
| 49 | if (!key) return ''; | |
| 50 | return localeList.find((item) => item.event === key)?.text; | |
| 51 | }); | |
| 737b1b | 52 | |
| V | 53 | watchEffect(() => { |
| 54 | selectedKeys.value = [unref(getLang)]; | |
| 55 | }); | |
| 56 | ||
| 57 | function toggleLocale(lang: LocaleType | string) { | |
| 58 | changeLocale(lang as LocaleType); | |
| 59 | selectedKeys.value = [lang as string]; | |
| e5f8ce | 60 | props.reload && location.reload(); |
| 737b1b | 61 | } |
| V | 62 | |
| 63 | function handleMenuEvent(menu: DropMenu) { | |
| 64 | toggleLocale(menu.event as string); | |
| 65 | } | |
| 66 | ||
| ba068b | 67 | return { localeList, handleMenuEvent, selectedKeys, getLangText }; |
| 737b1b | 68 | }, |
| V | 69 | }); |
| 70 | </script> | |
| 71 | ||
| 74e62c | 72 | <style lang="less" scoped> |
| V | 73 | :global(.app-locale-picker-overlay) { |
| e5f8ce | 74 | .ant-dropdown-menu-item { |
| V | 75 | min-width: 160px; |
| 76 | } | |
| 77 | } | |
| 78 | ||
| ba068b | 79 | .app-local-picker { |
| V | 80 | display: flex; |
| 81 | align-items: center; | |
| 737b1b | 82 | cursor: pointer; |
| ba068b | 83 | |
| V | 84 | &__icon { |
| 85 | margin-right: 4px; | |
| 86 | } | |
| 737b1b | 87 | } |
| V | 88 | </style> |
