| | |
| | | <template> |
| | | <div> |
| | | <el-dropdown trigger="click" @command="handleSetSize"> |
| | | <div class="size-icon--style"> |
| | | <svg-icon class-name="size-icon" icon-class="size" /> |
| | | </div> |
| | | <template #dropdown> |
| | | <el-dropdown-menu> |
| | | <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size === item.value" :command="item.value"> |
| | | {{ item.label }} |
| | | </el-dropdown-item> |
| | | </el-dropdown-menu> |
| | | </template> |
| | | </el-dropdown> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import useAppStore from "@/store/modules/app"; |
| | | import useAppStore from '@/store/modules/app'; |
| | | |
| | | const appStore = useAppStore(); |
| | | const size = computed(() => appStore.size); |
| | | |
| | | const sizeOptions = ref([ |
| | | { label: "较大", value: "large" }, |
| | | { label: "默认", value: "default" }, |
| | | { label: "稍小", value: "small" }, |
| | | { label: '较大', value: 'large' }, |
| | | { label: '默认', value: 'default' }, |
| | | { label: '稍小', value: 'small' } |
| | | ]); |
| | | |
| | | const handleSetSize = (size: string) => { |
| | | const handleSetSize = (size: 'large' | 'default' | 'small') => { |
| | | appStore.setSize(size); |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <template> |
| | | <div> |
| | | <el-dropdown trigger="click" @command="handleSetSize"> |
| | | <div class="size-icon--style"> |
| | | <svg-icon class-name="size-icon" icon-class="size" /> |
| | | </div> |
| | | <template #dropdown> |
| | | <el-dropdown-menu> |
| | | <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size === item.value" :command="item.value"> |
| | | {{ item.label }} |
| | | </el-dropdown-item> |
| | | </el-dropdown-menu> |
| | | </template> |
| | | </el-dropdown> |
| | | </div> |
| | | </template> |
| | | |
| | | <style lang="scss" scoped> |
| | | .size-icon--style { |