SizeSelect 尺寸选择

组件尺寸选择器，用于切换全局组件的尺寸大小。

🎯 在线体验：登录 https://vue.youlai.tech 后，点击右上角导航栏的尺寸选择图标即可切换组件大小。

功能特性

• 📐 尺寸切换 - 支持大、中、小三种尺寸
• 💾 状态持久化 - 尺寸设置自动保存
• 🔄 全局生效 - 切换后所有 Element Plus 组件同步更新

基础用法

组件已集成在布局中，无需手动引入：

<template>
  <div class="navbar">
    <SizeSelect />
  </div>
</template>

尺寸选项

尺寸	值	说明
大号	large	适合大屏显示
默认	default	标准尺寸
小号	small	适合紧凑布局

与 Store 集成

组件使用 useAppStore 管理尺寸状态：

import { useAppStore } from '@/store'

const appStore = useAppStore()

// 获取当前尺寸
const currentSize = appStore.size

// 设置尺寸
appStore.setSize('small')

全局配置

尺寸设置会应用到 Element Plus 的全局配置：

// main.ts
import ElementPlus from 'element-plus'

app.use(ElementPlus, {
  size: appStore.size  // 应用全局尺寸
})

样式定制

// 自定义尺寸选择器样式
:deep(.el-dropdown) {
  cursor: pointer;
  
  .el-icon {
    font-size: 18px;
    
    &:hover {
      color: var(--el-color-primary);
    }
  }
}

效果对比

不同尺寸下组件的显示效果：

组件	large	default	small
按钮高度	40px	32px	24px
输入框高度	40px	32px	24px
表格行高	较大	标准	紧凑

注意事项

1. 全局影响：尺寸切换会影响所有 Element Plus 组件
2. 持久化：尺寸设置保存在 localStorage 中
3. 响应式：建议根据屏幕大小自动调整尺寸

相关链接

• 主题配置
• 系统配置