提交 | 用户 | 时间
|
37b204
|
1 |
<script lang="ts" setup> |
H |
2 |
import { useAppStore } from '@/store/modules/app' |
|
3 |
|
|
4 |
import { propTypes } from '@/utils/propTypes' |
|
5 |
import { useDesign } from '@/hooks/web/useDesign' |
|
6 |
import { ElementPlusSize } from '@/types/elementPlus' |
|
7 |
|
|
8 |
defineOptions({ name: 'SizeDropdown' }) |
|
9 |
|
|
10 |
const { getPrefixCls } = useDesign() |
|
11 |
|
|
12 |
const prefixCls = getPrefixCls('size-dropdown') |
|
13 |
|
|
14 |
defineProps({ |
|
15 |
color: propTypes.string.def('') |
|
16 |
}) |
|
17 |
|
|
18 |
const { t } = useI18n() |
|
19 |
|
|
20 |
const appStore = useAppStore() |
|
21 |
|
|
22 |
const sizeMap = computed(() => appStore.sizeMap) |
|
23 |
|
|
24 |
const setCurrentSize = (size: ElementPlusSize) => { |
|
25 |
appStore.setCurrentSize(size) |
|
26 |
} |
|
27 |
</script> |
|
28 |
|
|
29 |
<template> |
|
30 |
<ElDropdown :class="prefixCls" trigger="click" @command="setCurrentSize"> |
|
31 |
<Icon :color="color" :size="18" class="cursor-pointer" icon="mdi:format-size" /> |
|
32 |
<template #dropdown> |
|
33 |
<ElDropdownMenu> |
|
34 |
<ElDropdownItem v-for="item in sizeMap" :key="item" :command="item"> |
|
35 |
{{ t(`size.${item}`) }} |
|
36 |
</ElDropdownItem> |
|
37 |
</ElDropdownMenu> |
|
38 |
</template> |
|
39 |
</ElDropdown> |
|
40 |
</template> |