mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs: update v4 migration guide
This commit is contained in:
parent
0fedd1dbea
commit
6c24fa728e
@ -4,38 +4,50 @@
|
|||||||
|
|
||||||
本文档提供了从 Vant 3 到 Vant 4 的升级指南。
|
本文档提供了从 Vant 3 到 Vant 4 的升级指南。
|
||||||
|
|
||||||
## 不兼容更新
|
### 为什么会有 Vant 4.0 ?
|
||||||
|
|
||||||
### 主题定制方式调整
|
为了支持 **暗色模式**,我们对 Vant 中的 **样式变量** 进行了一些不兼容更新,因此发布了新的大版本。
|
||||||
|
|
||||||
不再支持基于 Less 变量进行主题定制,请使用 [ConfigProvider 全局配置](#/zh-CN/config-provider) 组件进行主题配置。
|
如果你的项目没有使用主题定制,那样式变量的调整对你没有任何影响,只需要花几分钟去适配 API 调整,即可完成升级。
|
||||||
|
|
||||||
### CSS 变量名称简化
|
如果你的项目使用了主题定制,请完整阅读此文档,并进行迁移。
|
||||||
|
|
||||||
为了便于使用 CSS 变量,我们对部分 CSS 变量的名称进行了简化,使用更短的单词代替:
|
|
||||||
|
|
||||||
```
|
|
||||||
text-link -> link
|
|
||||||
box-shadow -> shadow
|
|
||||||
font-family -> font
|
|
||||||
border-radius -> radius
|
|
||||||
background-color -> background
|
|
||||||
font-weight-bold -> font-bold
|
|
||||||
border-width-base -> border-width
|
|
||||||
price-integer-font -> price-font
|
|
||||||
animation-duration -> duration
|
|
||||||
transition-duration -> duration
|
|
||||||
animation-timing-function-enter -> ease-out
|
|
||||||
animation-timing-function-leave -> ease-in
|
|
||||||
```
|
|
||||||
|
|
||||||
### API 调整
|
### API 调整
|
||||||
|
|
||||||
|
4.0 版本对少量 API 进行了不兼容调整:
|
||||||
|
|
||||||
#### Picker
|
#### Picker
|
||||||
|
|
||||||
- `default` 插槽重命名为 `toolbar`
|
- `default` 插槽重命名为 `toolbar`
|
||||||
- 移除了 `value-key` 属性,使用 `columnsFieldNames` 属性代替
|
- 移除了 `value-key` 属性,使用 `columnsFieldNames` 属性代替
|
||||||
|
|
||||||
### Tabs
|
#### Tabs
|
||||||
|
|
||||||
- 移除了 `click` 和 `disabled` 事件,使用 `click-tab` 事件代替
|
- 移除了 `click` 和 `disabled` 事件,使用 `click-tab` 事件代替
|
||||||
|
|
||||||
|
## 样式变量调整
|
||||||
|
|
||||||
|
### 移除 Less 变量
|
||||||
|
|
||||||
|
目前 Vant 已经支持了基于 CSS 变量的主题定制能力,因此后续将不再提供 Less 变量。
|
||||||
|
|
||||||
|
如果你的项目正在使用 Less 变量进行主题定制,请使用 [ConfigProvider 全局配置](#/zh-CN/config-provider) 组件进行替换。
|
||||||
|
|
||||||
|
### 简化 CSS 变量名
|
||||||
|
|
||||||
|
考虑到 **代码体积** 和 **使用便捷性**,我们对部分 CSS 变量的名称进行了简化,在变量名中使用更简短的单词,涉及以下变更:
|
||||||
|
|
||||||
|
```less
|
||||||
|
animation-duration -> duration
|
||||||
|
animation-timing-function-enter -> ease-out
|
||||||
|
animation-timing-function-leave -> ease-in
|
||||||
|
background-color -> background
|
||||||
|
border-radius -> radius
|
||||||
|
border-width-base -> border-width
|
||||||
|
box-shadow -> shadow
|
||||||
|
font-family -> font
|
||||||
|
font-weight-bold -> font-bold
|
||||||
|
price-integer-font -> price-font
|
||||||
|
text-link -> link
|
||||||
|
transition-duration -> duration
|
||||||
|
```
|
||||||
|
@ -86,7 +86,11 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'migrate-from-v2',
|
path: 'migrate-from-v2',
|
||||||
title: '从 v2 升级',
|
title: '从 v2 升级到 v3',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'migrate-from-v3',
|
||||||
|
title: '从 v3 升级到 v4',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'contribution',
|
path: 'contribution',
|
||||||
|
Loading…
x
Reference in New Issue
Block a user