online-order-h5/VANT_TYPE_GUIDE.md

Vant 4 组件类型使用指南

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

1. van-tag 组件

size 属性

❌ 错误用法：

<van-tag size="mini">标签</van-tag>

✅ 正确用法：

<van-tag size="small">标签</van-tag>
<van-tag size="medium">标签</van-tag>
<van-tag size="large">标签</van-tag>

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

type 属性

✅ 可用值：

<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 属性

✅ 可用值：

<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 属性

✅ 可用值：

<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

<van-icon name="success" size="20" />
<van-icon name="success" size="20px" />
<van-icon name="success" :size="20" />

4. van-field 组件

type 属性

✅ 常用值：

<van-field type="text" />
<van-field type="tel" />
<van-field type="digit" />
<van-field type="number" />
<van-field type="password" />

5. van-picker 组件

columns 属性

✅ 正确类型：

// 简单数组
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 组件

数值属性

✅ 正确用法：

<van-stepper v-model="count" :min="0" :max="10" :step="1" />

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

7. 事件处理器

标准事件

✅ 正确写法：

<!-- 使用箭头函数 -->
<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 的类型检查

   npx tsc --noEmit
   

2. 参考官方文档 访问 Vant 4 官方文档 查看最新的 API 定义。

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

4. 避免使用魔法字符串 对于有固定选项的属性，优先使用常量或枚举：

   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 维护者：开发团队