# Vant 4 组件类型使用指南

本文档记录 Vant 4 组件的常见类型问题和正确用法，避免在开发中出现类型错误。

## 1. van-tag 组件

### size 属性
❌ **错误用法**：
```vue
<van-tag size="mini">标签</van-tag>
```

✅ **正确用法**：
```vue
<van-tag size="small">标签</van-tag>
<van-tag size="medium">标签</van-tag>
<van-tag size="large">标签</van-tag>
```

**类型定义**：`'large' | 'medium' | 'small'`

### type 属性
✅ **可用值**：
```vue
<van-tag type="default">默认</van-tag>
<van-tag type="primary">主要</van-tag>
<van-tag type="success">成功</van-tag>
<van-tag type="warning">警告</van-tag>
<van-tag type="danger">危险</van-tag>
```

## 2. van-button 组件

### size 属性
✅ **可用值**：
```vue
<van-button size="large">大按钮</van-button>
<van-button size="normal">普通按钮</van-button>
<van-button size="small">小按钮</van-button>
<van-button size="mini">迷你按钮</van-button>
```

**类型定义**：`'large' | 'normal' | 'small' | 'mini'`

### type 属性
✅ **可用值**：
```vue
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
```

## 3. van-icon 组件

### size 属性
✅ **可接受类型**：`string | number`
```vue
<van-icon name="success" size="20" />
<van-icon name="success" size="20px" />
<van-icon name="success" :size="20" />
```

## 4. van-field 组件

### type 属性
✅ **常用值**：
```vue
<van-field type="text" />
<van-field type="tel" />
<van-field type="digit" />
<van-field type="number" />
<van-field type="password" />
```

## 5. van-picker 组件

### columns 属性
✅ **正确类型**：
```typescript
// 简单数组
const columns = ['选项1', '选项2', '选项3']

// 对象数组
const columns = [
  { text: '选项1', value: '1' },
  { text: '选项2', value: '2' }
]

// 多列
const columns = [
  [{ text: '选项1', value: '1' }],
  [{ text: '选项A', value: 'a' }]
]
```

## 6. van-stepper 组件

### 数值属性
✅ **正确用法**：
```vue
<van-stepper v-model="count" :min="0" :max="10" :step="1" />
```

⚠️ **注意**：min、max、step 都应该是 number 类型，不要使用字符串。

## 7. 事件处理器

### 标准事件
✅ **正确写法**：
```vue
<!-- 使用箭头函数 -->
<van-button @click="() => handleClick(item)">点击</van-button>

<!-- 直接绑定方法 -->
<van-button @click="handleClick">点击</van-button>

<!-- 传递事件参数 -->
<van-field @update:model-value="(val) => handleUpdate(val)" />
```

## 8. 常见类型错误及解决方案

### 错误 1: Type '"mini"' is not assignable to type 'TagSize'
**原因**：van-tag 不支持 `size="mini"`
**解决**：改用 `size="small"`

### 错误 2: Type 'string' is not assignable to type 'number'
**原因**：某些属性需要 number 类型
**解决**：使用 `:prop="value"` 而不是 `prop="value"`

### 错误 3: Property does not exist on type
**原因**：TypeScript 无法推断类型
**解决**：添加类型注解或使用 `as` 断言

## 9. 最佳实践

1. **使用 TypeScript 的类型检查**
   ```bash
   npx tsc --noEmit
   ```

2. **参考官方文档**
   访问 [Vant 4 官方文档](https://vant-ui.github.io/vant/#/zh-CN) 查看最新的 API 定义。

3. **使用 IDE 的类型提示**
   在 VSCode 中，将鼠标悬停在组件上可以看到完整的类型定义。

4. **避免使用魔法字符串**
   对于有固定选项的属性，优先使用常量或枚举：
   ```typescript
   const TAG_SIZES = {
     SMALL: 'small',
     MEDIUM: 'medium',
     LARGE: 'large'
   } as const
   ```

## 10. 已修复的问题

### 2026-01-12
- ✅ 修复了 `src/views/buffet/menu.vue` 中 van-tag 的 `size="mini"` 错误
- ✅ 修复了 `src/views/buffet/select.vue` 中 van-tag 的 `size="mini"` 错误
- ✅ 修复了 `src/views/mine/mine.vue` 中 van-tag 的 `size="mini"` 错误
- ✅ 修复了 `src/components/TableHeader.vue` 中 van-tag 的 `size="small"` 错误

---

**更新时间**：2026-01-12
**维护者**：开发团队