41 lines
1.0 KiB
Vue
41 lines
1.0 KiB
Vue
<script lang="ts" setup>
|
|
import { useAppStore } from '@/store/modules/app'
|
|
|
|
import { propTypes } from '@/utils/propTypes'
|
|
import { useDesign } from '@/hooks/web/useDesign'
|
|
import { ElementPlusSize } from '@/types/elementPlus'
|
|
|
|
defineOptions({ name: 'SizeDropdown' })
|
|
|
|
const { getPrefixCls } = useDesign()
|
|
|
|
const prefixCls = getPrefixCls('size-dropdown')
|
|
|
|
defineProps({
|
|
color: propTypes.string.def('')
|
|
})
|
|
|
|
const { t } = useI18n()
|
|
|
|
const appStore = useAppStore()
|
|
|
|
const sizeMap = computed(() => appStore.sizeMap)
|
|
|
|
const setCurrentSize = (size: ElementPlusSize) => {
|
|
appStore.setCurrentSize(size)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ElDropdown :class="prefixCls" trigger="click" @command="setCurrentSize">
|
|
<Icon :color="color" :size="18" class="cursor-pointer" icon="mdi:format-size" />
|
|
<template #dropdown>
|
|
<ElDropdownMenu>
|
|
<ElDropdownItem v-for="item in sizeMap" :key="item" :command="item">
|
|
{{ t(`size.${item}`) }}
|
|
</ElDropdownItem>
|
|
</ElDropdownMenu>
|
|
</template>
|
|
</ElDropdown>
|
|
</template>
|