docs: update migration guide

This commit is contained in:
chenjiahan 2022-02-10 16:50:20 +08:00
parent 8ca9741845
commit d68053ea7f

View File

@ -4,7 +4,7 @@
本文档提供了从 Vant 3 到 Vant 4 的升级指南。 本文档提供了从 Vant 3 到 Vant 4 的升级指南。
## API 调整 ## 组件重构
### Picker 组件重构 ### Picker 组件重构
@ -26,6 +26,14 @@
详细用法请参见 [Picker 组件文档](#/zh-CN/picker)。 详细用法请参见 [Picker 组件文档](#/zh-CN/picker)。
### DatetimePicker 组件重构
DatetimePicker 组件被拆分为了三个组件:
- TimePicker: 用于时间选择。
- DatePicker: 用于日期选择。
- DatetimePicker: 用于同时选择日期和时间。
### Area 组件重构 ### Area 组件重构
Area 组件是基于 Picker 组件进行封装的,因此本次升级也对 Area 组件进行了内部逻辑的重构,并优化了部分 API 设计。 Area 组件是基于 Picker 组件进行封装的,因此本次升级也对 Area 组件进行了内部逻辑的重构,并优化了部分 API 设计。
@ -42,13 +50,44 @@ Area 组件是基于 Picker 组件进行封装的,因此本次升级也对 Are
详细用法请参见 [Area 组件文档](#/zh-CN/area)。 详细用法请参见 [Area 组件文档](#/zh-CN/area)。
## API 调整
### 事件命名调整
从 Vant 4 开始,所有的事件均采用 Vue 官方推荐的**驼峰格式**进行命名。
```js
// Vant 3
emit('click-input');
// Vant 4
emit('clickInput');
```
由于 Vue 会自动在模板中对事件名进行格式转换,因此这项改动不影响原有的模板代码。
```html
<!-- 以下代码可以照常运行 -->
<van-field @click-input="onClick" />
```
此改动会影响 JSX 代码,需要将事件名调整为驼峰格式:
```jsx
// Vant 3
<Field onClick-input={onClick} />
// Vant 4
<Field onClickInput={onClick} />
```
### 其他 API 调整 ### 其他 API 调整
4.0 版本中,以下 API 进行了不兼容更新: 4.0 版本中,以下 API 进行了不兼容更新:
#### Tabs #### Tabs
- 移除了 `click``disabled` 事件,使用 `click-tab` 事件代替 - 移除了 `click``disabled` 事件,使用 `click-tab` 事件代替
## 样式变量调整 ## 样式变量调整