Releases: 3lang3/react-vant
Releases · 3lang3/react-vant
v3.0.0-rc.4🌈
v3.0.0-rc.3 🌈
发布内容
⭐ 新特性
Space
新增divider
属性,支持设置分隔符内容 (be83d36)Divider
新增type
属性,支持设置水平和垂直方向 (0d6c43f)Tabs
新增defaultActive
属性,支持设置默认选中项 (1999ed5)
💄 优化
Tabs
的scrollspy
增强,新增scrollImmediate
属性,点击标签,立即展示对应内容区域,取消滚动动画,默认为true
Tabs
内部优化,在popup下表现更流畅
🐛 修复
- 修复
Tabs
初始化时动画问题 (#505) - 修复
Tabs
开启swipeable
后首次向右滑动不会展示第二个标签内容 (#508) - 修复
Typography.Link
,type
颜色失效问题 (7140a2e) - 修复
supports-passive
中canUseDom
逻辑错误 @lblblong (#506)
v3.0.0-rc.2 🌈
v3.0.0-rc.1
修复
- Picker 组件 联级模式下 value 关联不正确的问题
v3.0.0-rc.0
新增组件
不兼容的变化
废弃组件
- 移除了
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
组件: -
Picker
组件: -
Area
组件: -
Calendar
组件: -
DatetimePicker
组件: -
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>
);
[email protected]
更新内容参见 CHANGELOG。
[email protected]
更新内容参见 CHANGELOG。
[email protected]
更新内容参见 CHANGELOG。
[email protected]
更新内容参见 CHANGELOG。
[email protected]
更新内容参见 CHANGELOG。