v3.0.0-rc.0

新增组件

• Space 间距
• Card 卡片
• FloatingBall 悬浮球
• Input 输入框
• Selector 选择组
• Swiper 轮播
• WaterMask 水印组件

不兼容的变化

废弃组件

• 移除了 Swipe 组件
• 移除了 Icon 组件
• 原 Card 组件改名为 ProductCard

API 调整

• 移除 readonly 属性，使用 readOnly 替代
• 移除 maxLength 属性，使用 maxLength 代替
• 移除 autofocus 属性，使用 autoFocus 代替
• Steps 图标尺寸调整
• Stepper 圆角风格按钮颜色调整为主题色
• Search 移除 inputAlign 属性，使用 align 代替
• Typography 调整 ellipsis 属性，现在支持更多形式配置
• Typography 移除 --rv-typography-line-height css 变量，同时新增部分变量

组件重构

• Tabs 组件:

  • 调整 type 属性，新增 capsule jumbo 类型
  • 调整 color 属性定义，适配 type 属性
  • 调整 onChange 类型
  • 调整 onClickTab 类型

• Tabs.TabPane:

  • 调整 title 类型
  • 移除 renderTitle 属性，现可通过 title 实现
  • 调整 badge 属性
  • 移除 dot showZeroBadge 属性，现可通过 badge 实现

• Field 组件:

  • 现在内部由 Input 实现
  • 移除 autosize 属性，使用 autoSize 替代
  • 移除 inputAlign 属性，使用 align 代替
  • 新增 controlAlign 属性，控制右侧内容区域对齐
  • 调整 showWordLimit 类型，现支持自定义输出
  • 新增 prefix 属性，自定义输入框前置内容
  • 移除 button 属性，使用 suffix 代替

• Form 组件:

  • 移除 inputAlign 属性，使用 controlAlign 代替
  • 新增 Form.Subscribe
  • 新增 Form.useWatch

• Form.Item 组件:

  • Form.Item 移除 inputAlign 属性，使用 controlAlign 代替
  • Form.Item 移除 customField 属性
  • Form.Item 调整 onClick 属性，现第二个参数为子组件 ref 的实例

• Cascader 组件:

  • 支持 受控和非受控模式
  • 调整 title 类型
  • 调整 value，defaultValue 类型
  • 调整 onClickTab 类型
  • 调整 onChange 类型
  • 调整 onFinish 类型

• Picker 组件:

  • 支持 受控和非受控模式
  • 调整 value 类型
  • 调整 columns 类型
  • 移除 columnsPlaceholder 属性，现继承 Picker 的 placeholder 属性
  • 调整 ref 类型(实例方法调整)
  • 调整 onChange 类型
  • 调整 onConfirm 类型
  • 调整 children 类型，仅支持 Function
  • 新增 defaultValue 类型同 value
  • 新增 popup 属性
  • 新增 visible 属性，需开启 popup 生效

• Area 组件:

  • 支持 受控和非受控模式
  • 受 Picker 变更影响
  • 移除 isOverseaCode 属性
  • 移除 columnsPlaceholder 属性，现继承 Picker 的 placeholder 属性
  • 移除原实例方法，现继承 Picker 实例方法
  • value 类型调整
  • 新增 defaultValue 类型同 value
  • 调整 onChange 类型
  • 调整 onConfirm 类型
  • 调整 children 类型，仅支持 Function

• Calendar 组件:

  • 支持 受控和非受控模式
  • 将 defaultDate 改为 defaultValue
  • 新增 Picker 实例方法
  • 调整 children 类型，仅支持 Function

• DatetimePicker 组件:

  • 支持 受控和非受控模式
  • 新增 defaultValue
  • 新增 Picker 实例方法
  • 调整 children 类型，仅支持 Function

• Icon 组件:

  • 属性类型从 string|ReactNode 调准为 ReactNode
  • iconPrefix iconClass 属性移除

图标升级

在 2.0 中，我们引入了 svg 图标（为何使用 svg 图标？）。使用了字符串命名的图标 API 无法做到按需加载，这大大增加了打包产物的尺寸。在 2.0 中，我们调整了图标的使用 API 从而支持 tree shaking，减少默认包体积。

2.0 中采用按需引入的方式：

import { Button } from 'react-vant';

// tree-shaking supported
- import { Icon } from 'react-vant';
+ import { Arrow } from '@react-vant/icons';

const Demo = () => (
  <div>
-   <Icon type="arrow" />
+   <Arrow />
    <Button icon={<Arrow />} />
  </div>
);