mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs: update migrate guide
This commit is contained in:
parent
e6bb9b9023
commit
c7d324cb7f
@ -1,4 +1,18 @@
|
|||||||
# 从 2.x 版本迁移
|
# 从 v2 升级
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
本文档提供了从 Vant 2 到 Vant 3 的升级指南。
|
||||||
|
|
||||||
|
### 升级步骤
|
||||||
|
|
||||||
|
#### 1. 升级 Vue 3
|
||||||
|
|
||||||
|
Vant 3 是基于 Vue 3 开发的,在使用 Vant 3 前,请将项目中的 Vue 升级到 3.0 以上版本。
|
||||||
|
|
||||||
|
#### 2. 处理不兼容更新
|
||||||
|
|
||||||
|
Vant 2 到 Vant 3 存在一些不兼容更新,请仔细阅读下方的不兼容更新内容,并依次处理。
|
||||||
|
|
||||||
## 不兼容更新
|
## 不兼容更新
|
||||||
|
|
||||||
@ -51,6 +65,7 @@ GoodsAction 商品导航组件重命名为 **ActionBar 行动栏**。
|
|||||||
```html
|
```html
|
||||||
<!-- Vant 2 -->
|
<!-- Vant 2 -->
|
||||||
<van-popup v-model="show" />
|
<van-popup v-model="show" />
|
||||||
|
|
||||||
<!-- Vant 3 -->
|
<!-- Vant 3 -->
|
||||||
<van-popup v-model:show="show" />
|
<van-popup v-model:show="show" />
|
||||||
```
|
```
|
||||||
@ -75,6 +90,7 @@ GoodsAction 商品导航组件重命名为 **ActionBar 行动栏**。
|
|||||||
```html
|
```html
|
||||||
<!-- Vant 2 -->
|
<!-- Vant 2 -->
|
||||||
<van-field :value="value" @input="onInput" />
|
<van-field :value="value" @input="onInput" />
|
||||||
|
|
||||||
<!-- Vant 3 -->
|
<!-- Vant 3 -->
|
||||||
<van-field :model-value="value" @update:model-value="onInput" />
|
<van-field :model-value="value" @update:model-value="onInput" />
|
||||||
```
|
```
|
||||||
@ -102,6 +118,14 @@ GoodsAction 商品导航组件重命名为 **ActionBar 行动栏**。
|
|||||||
|
|
||||||
同时内部使用的 Info 组件也会重命名为 Badge。
|
同时内部使用的 Info 组件也会重命名为 Badge。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- Vant 2 -->
|
||||||
|
<van-icon info="5" />
|
||||||
|
|
||||||
|
<!-- Vant 3 -->
|
||||||
|
<van-icon badge="5" />
|
||||||
|
```
|
||||||
|
|
||||||
### 重命名 get-container 属性
|
### 重命名 get-container 属性
|
||||||
|
|
||||||
Vue 3.0 中增加了 `Teleport` 组件,提供将组件渲染到任意 DOM 位置的能力,Vant 2.x 也通过 `get-container` 属性提供了类似的能力。为了与官方的 API 保持一致,Vant 中的 `get-container` 属性将重命名为 `teleport`。
|
Vue 3.0 中增加了 `Teleport` 组件,提供将组件渲染到任意 DOM 位置的能力,Vant 2.x 也通过 `get-container` 属性提供了类似的能力。为了与官方的 API 保持一致,Vant 中的 `get-container` 属性将重命名为 `teleport`。
|
||||||
@ -138,17 +162,34 @@ Vue 3.0 中增加了 `Teleport` 组件,提供将组件渲染到任意 DOM 位
|
|||||||
|
|
||||||
### API 调整
|
### API 调整
|
||||||
|
|
||||||
- Area: 移除 change 事件的第一个参数(picker 实例)
|
#### Area
|
||||||
- Button: 蓝色按钮对应的类型由 `info` 调整为 `primary`
|
|
||||||
- Button: 绿色按钮对应的类型由 `primary` 调整为 `success`
|
- 移除 change 事件的第一个参数(picker 实例)
|
||||||
- Picker: 移除 change 事件的第一个参数(picker 实例)
|
|
||||||
- Picker: 默认开启 show-toolbar 属性
|
#### Button
|
||||||
- Picker: 级联选择下,confirm/change 事件返回的回调参数将包含为完整的选项对象。
|
|
||||||
- SwipeCell: `open` 事件的 `detail` 参数重命名为 `name`
|
- 蓝色按钮对应的类型由 `info` 调整为 `primary`
|
||||||
- SwipeCell: `on-close` 属性重命名为 `before-close`,并调整参数结构
|
- 绿色按钮对应的类型由 `primary` 调整为 `success`
|
||||||
- Toast: `mask` 属性重命名为 `overlay`
|
|
||||||
- TreeSelect: `navclick` 事件重命名为 `click-nav`
|
#### Picker
|
||||||
- TreeSelect: `itemclick` 事件重命名为 `click-item`
|
|
||||||
|
- 移除 change 事件的第一个参数(picker 实例)
|
||||||
|
- 默认开启 show-toolbar 属性
|
||||||
|
- 级联选择下,confirm/change 事件返回的回调参数将包含为完整的选项对象。
|
||||||
|
|
||||||
|
#### SwipeCell
|
||||||
|
|
||||||
|
- `open` 事件的 `detail` 参数重命名为 `name`
|
||||||
|
- `on-close` 属性重命名为 `before-close`,并调整参数结构
|
||||||
|
|
||||||
|
#### Toast
|
||||||
|
|
||||||
|
- `mask` 属性重命名为 `overlay`
|
||||||
|
|
||||||
|
#### TreeSelect
|
||||||
|
|
||||||
|
- `navclick` 事件重命名为 `click-nav`
|
||||||
|
- `itemclick` 事件重命名为 `click-item`
|
||||||
|
|
||||||
### 注册全局方法
|
### 注册全局方法
|
||||||
|
|
||||||
|
@ -55,7 +55,7 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'migrate-from-v2',
|
path: 'migrate-from-v2',
|
||||||
title: '从 2.x 版本迁移',
|
title: '从 v2 升级',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'theme',
|
path: 'theme',
|
||||||
|
Loading…
x
Reference in New Issue
Block a user