Newer
Older
KaiFengPC / src / components / SizeSelect / index.vue
@zhangdeliang zhangdeliang on 23 May 1 KB 初始化项目
  1. <template>
  2. <div>
  3. <el-dropdown trigger="click" @command="handleSetSize">
  4. <div class="size-icon--style">
  5. <svg-icon class-name="size-icon" icon-class="size" />
  6. </div>
  7. <template #dropdown>
  8. <el-dropdown-menu>
  9. <el-dropdown-item
  10. v-for="item of sizeOptions"
  11. :key="item.value"
  12. :disabled="size === item.value"
  13. :command="item.value"
  14. >
  15. {{ item.label }}
  16. </el-dropdown-item>
  17. </el-dropdown-menu>
  18. </template>
  19. </el-dropdown>
  20. </div>
  21. </template>
  22.  
  23. <script setup>
  24. import useAppStore from "@/store/modules/app";
  25.  
  26. const appStore = useAppStore();
  27. const size = computed(() => appStore.size);
  28. const route = useRoute();
  29. const router = useRouter();
  30. const { proxy } = getCurrentInstance();
  31. const sizeOptions = ref([
  32. { label: "大号", value: "large" },
  33. { label: "默认", value: "default" },
  34. { label: "小号", value: "small" },
  35. ]);
  36.  
  37. function handleSetSize(size) {
  38. proxy.$modal.loading("切换成功");
  39. appStore.setSize(size);
  40. setTimeout("window.location.reload()", 1000);
  41. }
  42. </script>
  43.  
  44. <style lang="scss" scoped>
  45. .size-icon--style {
  46. font-size: 18px;
  47. line-height: 50px;
  48. padding-right: 7px;
  49. }
  50. </style>