mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs: update migration guide
This commit is contained in:
parent
8ca9741845
commit
d68053ea7f
@ -4,7 +4,7 @@
|
||||
|
||||
本文档提供了从 Vant 3 到 Vant 4 的升级指南。
|
||||
|
||||
## API 调整
|
||||
## 组件重构
|
||||
|
||||
### Picker 组件重构
|
||||
|
||||
@ -26,6 +26,14 @@
|
||||
|
||||
详细用法请参见 [Picker 组件文档](#/zh-CN/picker)。
|
||||
|
||||
### DatetimePicker 组件重构
|
||||
|
||||
DatetimePicker 组件被拆分为了三个组件:
|
||||
|
||||
- TimePicker: 用于时间选择。
|
||||
- DatePicker: 用于日期选择。
|
||||
- DatetimePicker: 用于同时选择日期和时间。
|
||||
|
||||
### Area 组件重构
|
||||
|
||||
Area 组件是基于 Picker 组件进行封装的,因此本次升级也对 Area 组件进行了内部逻辑的重构,并优化了部分 API 设计。
|
||||
@ -42,13 +50,44 @@ Area 组件是基于 Picker 组件进行封装的,因此本次升级也对 Are
|
||||
|
||||
详细用法请参见 [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 调整
|
||||
|
||||
4.0 版本中,以下 API 进行了不兼容更新:
|
||||
|
||||
#### Tabs
|
||||
|
||||
- 移除了 `click` 和 `disabled` 事件,使用 `click-tab` 事件代替
|
||||
- 移除了 `click` 和 `disabled` 事件,请使用 `click-tab` 事件代替
|
||||
|
||||
## 样式变量调整
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user