mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-06-26 22:29:15 +08:00
Compare commits
2 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
b45b0b7608 | ||
|
c309ca2aaf |
2
.github/PULL_REQUEST_TEMPLATE.md
vendored
2
.github/PULL_REQUEST_TEMPLATE.md
vendored
@ -1,6 +1,6 @@
|
|||||||
### Before submitting a pull request, please make sure the following is done:
|
### Before submitting a pull request, please make sure the following is done:
|
||||||
|
|
||||||
1. Read the [contributing guide](https://github.com/vant-ui/vant/blob/main/.github/CONTRIBUTING.md).
|
1. Read the [contributing guide](https://github.com/vant-ui/vant/blob/dev/.github/CONTRIBUTING.md).
|
||||||
2. If you've added code that should be tested, add tests.
|
2. If you've added code that should be tested, add tests.
|
||||||
3. If you've changed APIs, update the documentation.
|
3. If you've changed APIs, update the documentation.
|
||||||
4. Ensure the test suite passes (`npm test`).
|
4. Ensure the test suite passes (`npm test`).
|
||||||
|
4
.github/workflows/codeql-analysis.yml
vendored
4
.github/workflows/codeql-analysis.yml
vendored
@ -13,10 +13,10 @@ name: "CodeQL"
|
|||||||
|
|
||||||
on:
|
on:
|
||||||
push:
|
push:
|
||||||
branches: [ main ]
|
branches: [ dev ]
|
||||||
pull_request:
|
pull_request:
|
||||||
# The branches below must be a subset of the branches above
|
# The branches below must be a subset of the branches above
|
||||||
branches: [ main ]
|
branches: [ dev ]
|
||||||
schedule:
|
schedule:
|
||||||
- cron: '36 21 * * 2'
|
- cron: '36 21 * * 2'
|
||||||
|
|
||||||
|
21
.github/workflows/deploy-v4-site.yml
vendored
21
.github/workflows/deploy-v4-site.yml
vendored
@ -2,7 +2,7 @@ name: Deploy V4 Site
|
|||||||
|
|
||||||
on:
|
on:
|
||||||
push:
|
push:
|
||||||
branches: [main]
|
branches: [dev]
|
||||||
paths:
|
paths:
|
||||||
- 'packages/vant/docs/**'
|
- 'packages/vant/docs/**'
|
||||||
|
|
||||||
@ -15,14 +15,14 @@ jobs:
|
|||||||
- name: Checkout 🛎️
|
- name: Checkout 🛎️
|
||||||
uses: actions/checkout@v2
|
uses: actions/checkout@v2
|
||||||
with:
|
with:
|
||||||
ref: 'main'
|
ref: 'next'
|
||||||
|
|
||||||
- name: Install pnpm
|
- name: Install pnpm
|
||||||
run: npm i pnpm@7 -g
|
run: npm i pnpm@7 -g
|
||||||
|
|
||||||
- uses: actions/setup-node@v2
|
- uses: actions/setup-node@v2
|
||||||
with:
|
with:
|
||||||
node-version: '18'
|
node-version: '16'
|
||||||
cache: 'pnpm'
|
cache: 'pnpm'
|
||||||
|
|
||||||
- name: Install dependencies
|
- name: Install dependencies
|
||||||
@ -31,19 +31,10 @@ jobs:
|
|||||||
- name: Build Site
|
- name: Build Site
|
||||||
run: npm run build:site
|
run: npm run build:site
|
||||||
|
|
||||||
- name: Deploy for Gitee 🚀
|
- name: Deploy 🚀
|
||||||
uses: JamesIves/github-pages-deploy-action@v4.4.0
|
uses: JamesIves/github-pages-deploy-action@4.1.1
|
||||||
with:
|
with:
|
||||||
branch: gh-pages
|
branch: gh-pages
|
||||||
folder: packages/vant/site-dist
|
folder: packages/vant/site-dist
|
||||||
clean: false
|
target-folder: v4
|
||||||
|
|
||||||
- name: Deploy for GitHub 🚀
|
|
||||||
uses: JamesIves/github-pages-deploy-action@v4.4.0
|
|
||||||
with:
|
|
||||||
branch: main
|
|
||||||
folder: packages/vant/site-dist
|
|
||||||
token: ${{ secrets.VANT_UI_TOKEN }}
|
|
||||||
repository-name: vant-ui/vant-ui.github.io
|
|
||||||
target-folder: vant
|
|
||||||
clean: false
|
clean: false
|
||||||
|
2
.github/workflows/sync-gitee.yml
vendored
2
.github/workflows/sync-gitee.yml
vendored
@ -2,7 +2,7 @@ name: Sync to Gitee
|
|||||||
|
|
||||||
on:
|
on:
|
||||||
push:
|
push:
|
||||||
branches: [main, 2.x, 3.x, gh-pages]
|
branches: [dev, 2.x, 3.x, gh-pages]
|
||||||
|
|
||||||
workflow_dispatch:
|
workflow_dispatch:
|
||||||
|
|
||||||
|
8
.github/workflows/test.yml
vendored
8
.github/workflows/test.yml
vendored
@ -7,7 +7,7 @@ on:
|
|||||||
|
|
||||||
pull_request:
|
pull_request:
|
||||||
branches:
|
branches:
|
||||||
- main
|
- dev
|
||||||
|
|
||||||
workflow_dispatch:
|
workflow_dispatch:
|
||||||
|
|
||||||
@ -22,7 +22,7 @@ jobs:
|
|||||||
|
|
||||||
- uses: actions/setup-node@v2
|
- uses: actions/setup-node@v2
|
||||||
with:
|
with:
|
||||||
node-version: '18'
|
node-version: '16'
|
||||||
cache: 'pnpm'
|
cache: 'pnpm'
|
||||||
|
|
||||||
- name: Install dependencies
|
- name: Install dependencies
|
||||||
@ -41,7 +41,7 @@ jobs:
|
|||||||
|
|
||||||
- uses: actions/setup-node@v2
|
- uses: actions/setup-node@v2
|
||||||
with:
|
with:
|
||||||
node-version: '18'
|
node-version: '16'
|
||||||
cache: 'pnpm'
|
cache: 'pnpm'
|
||||||
|
|
||||||
- name: Install dependencies
|
- name: Install dependencies
|
||||||
@ -65,7 +65,7 @@ jobs:
|
|||||||
|
|
||||||
- uses: actions/setup-node@v2
|
- uses: actions/setup-node@v2
|
||||||
with:
|
with:
|
||||||
node-version: '18'
|
node-version: '16'
|
||||||
cache: 'pnpm'
|
cache: 'pnpm'
|
||||||
|
|
||||||
- name: Install dependencies
|
- name: Install dependencies
|
||||||
|
19
README.md
19
README.md
@ -8,9 +8,10 @@
|
|||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<img src="https://img.shields.io/npm/v/vant?style=flat-square" alt="npm version" />
|
<img src="https://img.shields.io/npm/v/vant?style=flat-square" alt="npm version" />
|
||||||
|
<img src="https://img.shields.io/github/workflow/status/vant-ui/vant/CI/dev?style=flat-square" alt="CI Status" />
|
||||||
<img src="https://img.shields.io/codecov/c/github/vant-ui/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
|
<img src="https://img.shields.io/codecov/c/github/vant-ui/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
|
||||||
<img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square&color=#4fc08d" alt="downloads" />
|
<img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square&color=#4fc08d" alt="downloads" />
|
||||||
<img src="https://img.badgesize.io/https://unpkg.com/vant/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
|
<img src="https://img.badgesize.io/https://unpkg.com/vant@3/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
@ -36,8 +37,7 @@
|
|||||||
- 🍭 Support Tree Shaking
|
- 🍭 Support Tree Shaking
|
||||||
- 🍭 Support Custom Theme
|
- 🍭 Support Custom Theme
|
||||||
- 🍭 Support Accessibility (still improving)
|
- 🍭 Support Accessibility (still improving)
|
||||||
- 🍭 Support Dark Mode
|
- 🍭 Support Dark Mode (Requires upgrade to [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/en-US/config-provider))
|
||||||
- 🍭 Support Nuxt 3
|
|
||||||
- 🍭 Support SSR
|
- 🍭 Support SSR
|
||||||
- 🌍 Support i18n, built-in 20+ languages
|
- 🌍 Support i18n, built-in 20+ languages
|
||||||
|
|
||||||
@ -80,10 +80,6 @@ app.use(Button);
|
|||||||
|
|
||||||
See more in [Quickstart](https://vant-ui.github.io/vant#/en-US/quickstart).
|
See more in [Quickstart](https://vant-ui.github.io/vant#/en-US/quickstart).
|
||||||
|
|
||||||
## Start On Visual Studio Code Web
|
|
||||||
|
|
||||||
[https://github.dev/youzan/vant](https://github.dev/youzan/vant)
|
|
||||||
|
|
||||||
## Browser Support
|
## Browser Support
|
||||||
|
|
||||||
Vant 2 supports modern browsers and Android >= 4.0、iOS >= 8.0.
|
Vant 2 supports modern browsers and Android >= 4.0、iOS >= 8.0.
|
||||||
@ -96,15 +92,16 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
|
|||||||
| --- | --- |
|
| --- | --- |
|
||||||
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | WeChat MiniProgram UI |
|
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | WeChat MiniProgram UI |
|
||||||
| [vant-demo](https://github.com/vant-ui/vant-demo) | Collection of Vant demos |
|
| [vant-demo](https://github.com/vant-ui/vant-demo) | Collection of Vant demos |
|
||||||
| [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | Scaffold for UI library |
|
| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
|
||||||
| [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant icons |
|
| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant icons |
|
||||||
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | Using vant in desktop browsers |
|
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
|
||||||
|
|
||||||
## Community Ecosystem
|
## Community Ecosystem
|
||||||
|
|
||||||
| Project | Description |
|
| Project | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components based on Vant |
|
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components based on Vant |
|
||||||
|
| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | React mobile UI Components based on Vant |
|
||||||
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Alipay MiniProgram UI |
|
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Alipay MiniProgram UI |
|
||||||
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
|
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
|
||||||
| [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |
|
| [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |
|
||||||
@ -115,7 +112,7 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
|
|||||||
|
|
||||||
- [Documentation](https://vant-ui.github.io/vant)
|
- [Documentation](https://vant-ui.github.io/vant)
|
||||||
- [Changelog](https://vant-ui.github.io/vant#/en-US/changelog)
|
- [Changelog](https://vant-ui.github.io/vant#/en-US/changelog)
|
||||||
- [Discussions](https://github.com/vant-ui/vant/discussions)
|
- [Gitter](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
|
||||||
|
|
||||||
## Preview
|
## Preview
|
||||||
|
|
||||||
|
@ -8,9 +8,10 @@
|
|||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<img src="https://img.shields.io/npm/v/vant?style=flat-square" alt="npm version" />
|
<img src="https://img.shields.io/npm/v/vant?style=flat-square" alt="npm version" />
|
||||||
|
<img src="https://img.shields.io/github/workflow/status/vant-ui/vant/CI/dev?style=flat-square" alt="CI Status" />
|
||||||
<img src="https://img.shields.io/codecov/c/github/vant-ui/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
|
<img src="https://img.shields.io/codecov/c/github/vant-ui/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
|
||||||
<img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square&color=#4fc08d" alt="downloads" />
|
<img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square&color=#4fc08d" alt="downloads" />
|
||||||
<img src="https://img.badgesize.io/https://unpkg.com/vant/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
|
<img src="https://img.badgesize.io/https://unpkg.com/vant@3/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
@ -40,8 +41,7 @@ Vant 是一个**轻量、可靠的移动端组件库**,于 2017 年开源。
|
|||||||
- 🍭 支持主题定制,内置 700+ 个主题变量
|
- 🍭 支持主题定制,内置 700+ 个主题变量
|
||||||
- 🍭 支持按需引入和 Tree Shaking
|
- 🍭 支持按需引入和 Tree Shaking
|
||||||
- 🍭 支持无障碍访问(持续改进中)
|
- 🍭 支持无障碍访问(持续改进中)
|
||||||
- 🍭 支持深色模式
|
- 🍭 支持深色模式(从 [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/zh-CN/config-provider) 开始支持)
|
||||||
- 🍭 支持 Nuxt 3
|
|
||||||
- 🍭 支持服务器端渲染
|
- 🍭 支持服务器端渲染
|
||||||
- 🌍 支持国际化,内置 20+ 种语言包
|
- 🌍 支持国际化,内置 20+ 种语言包
|
||||||
|
|
||||||
@ -84,10 +84,6 @@ app.use(Button);
|
|||||||
|
|
||||||
vant 也支持按需引入、CDN 引入等方式,详细说明见 [快速上手](https://vant-contrib.gitee.io/vant#/zh-CN/quickstart).
|
vant 也支持按需引入、CDN 引入等方式,详细说明见 [快速上手](https://vant-contrib.gitee.io/vant#/zh-CN/quickstart).
|
||||||
|
|
||||||
## 在 Cloud IDE 中预览
|
|
||||||
|
|
||||||
[https://idegithub.com/youzan/vant](https://idegithub.com/youzan/vant)
|
|
||||||
|
|
||||||
## 浏览器支持
|
## 浏览器支持
|
||||||
|
|
||||||
Vant 2 支持现代浏览器以及 Android >= 4.0、iOS >= 8.0。
|
Vant 2 支持现代浏览器以及 Android >= 4.0、iOS >= 8.0。
|
||||||
@ -102,9 +98,9 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
|
|||||||
| --- | --- |
|
| --- | --- |
|
||||||
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | Vant 微信小程序版 |
|
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | Vant 微信小程序版 |
|
||||||
| [vant-demo](https://github.com/vant-ui/vant-demo) | Vant 官方示例合集 |
|
| [vant-demo](https://github.com/vant-ui/vant-demo) | Vant 官方示例合集 |
|
||||||
| [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | 开箱即用的组件库搭建工具 |
|
| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
|
||||||
| [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant 图标库 |
|
| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
|
||||||
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
|
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
|
||||||
|
|
||||||
## 社区生态
|
## 社区生态
|
||||||
|
|
||||||
@ -113,6 +109,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
|
|||||||
| 项目 | 描述 |
|
| 项目 | 描述 |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | 参照 Vant 打造的 React 框架移动端组件库 |
|
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | 参照 Vant 打造的 React 框架移动端组件库 |
|
||||||
|
| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | 参照 Vant 打造的 React 框架移动端组件库 |
|
||||||
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Vant 支付宝小程序版 |
|
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Vant 支付宝小程序版 |
|
||||||
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 |
|
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 |
|
||||||
| [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 |
|
| [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 |
|
||||||
@ -123,8 +120,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
|
|||||||
|
|
||||||
- [详细文档](https://vant-contrib.gitee.io/vant)
|
- [详细文档](https://vant-contrib.gitee.io/vant)
|
||||||
- [更新日志](https://vant-contrib.gitee.io/vant#/zh-CN/changelog)
|
- [更新日志](https://vant-contrib.gitee.io/vant#/zh-CN/changelog)
|
||||||
- [码云镜像仓库](https://gitee.com/vant-contrib/vant)
|
- [Gitter 讨论组](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
|
||||||
- [Discussions 讨论区](https://github.com/vant-ui/vant/discussions)
|
|
||||||
|
|
||||||
## 手机预览
|
## 手机预览
|
||||||
|
|
||||||
|
15
package.json
15
package.json
@ -14,10 +14,7 @@
|
|||||||
"*.{ts,tsx,js,vue,less}": "prettier --write",
|
"*.{ts,tsx,js,vue,less}": "prettier --write",
|
||||||
"*.{ts,tsx,js,vue}": "eslint --fix"
|
"*.{ts,tsx,js,vue}": "eslint --fix"
|
||||||
},
|
},
|
||||||
"engines": {
|
"packageManager": "pnpm@7.11.0",
|
||||||
"pnpm": ">= 7.0.0"
|
|
||||||
},
|
|
||||||
"packageManager": "pnpm@7.20.0",
|
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vant/cli": "workspace:*",
|
"@vant/cli": "workspace:*",
|
||||||
"@vant/eslint-config": "workspace:*",
|
"@vant/eslint-config": "workspace:*",
|
||||||
@ -26,5 +23,15 @@
|
|||||||
"nano-staged": "^0.8.0",
|
"nano-staged": "^0.8.0",
|
||||||
"prettier": "^2.7.1",
|
"prettier": "^2.7.1",
|
||||||
"rimraf": "^3.0.2"
|
"rimraf": "^3.0.2"
|
||||||
|
},
|
||||||
|
"pnpm": {
|
||||||
|
"peerDependencyRules": {
|
||||||
|
"ignoreMissing": [
|
||||||
|
"@algolia/client-search",
|
||||||
|
"@types/react",
|
||||||
|
"react",
|
||||||
|
"react-dom"
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -31,7 +31,7 @@
|
|||||||
"vue": "^3.0.0"
|
"vue": "^3.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vant/cli": "^5.0.0",
|
"@vant/cli": "^4.0.0",
|
||||||
"vue": "^3.0.0",
|
"vue": "^3.0.0",
|
||||||
"sass": "^1.49.7"
|
"sass": "^1.49.7"
|
||||||
},
|
},
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "create-vant-cli-app",
|
"name": "create-vant-cli-app",
|
||||||
"version": "2.1.0",
|
"version": "2.0.1",
|
||||||
"description": "Create Vant CLI App",
|
"description": "Create Vant CLI App",
|
||||||
"main": "lib/index.js",
|
"main": "lib/index.js",
|
||||||
"bin": {
|
"bin": {
|
||||||
@ -32,6 +32,7 @@
|
|||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/fs-extra": "^9.0.13",
|
"@types/fs-extra": "^9.0.13",
|
||||||
|
"@types/inquirer": "^8.2.3",
|
||||||
"release-it": "^15.4.1",
|
"release-it": "^15.4.1",
|
||||||
"typescript": "^4.8.2"
|
"typescript": "^4.8.2"
|
||||||
},
|
},
|
||||||
@ -39,7 +40,7 @@
|
|||||||
"consola": "^2.11.3",
|
"consola": "^2.11.3",
|
||||||
"fast-glob": "^3.2.11",
|
"fast-glob": "^3.2.11",
|
||||||
"fs-extra": "^10.1.0",
|
"fs-extra": "^10.1.0",
|
||||||
"enquirer": "2.3.6",
|
"inquirer": "^8.2.4",
|
||||||
"picocolors": "^1.0.0"
|
"picocolors": "^1.0.0"
|
||||||
},
|
},
|
||||||
"release-it": {
|
"release-it": {
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { join } from 'node:path';
|
import { join } from 'path';
|
||||||
|
|
||||||
export const CWD = process.cwd();
|
export const CWD = process.cwd();
|
||||||
export const GENERATOR_DIR = join(__dirname, '../generators');
|
export const GENERATOR_DIR = join(__dirname, '../generators');
|
||||||
|
@ -2,15 +2,15 @@ import fs from 'fs-extra';
|
|||||||
import glob from 'fast-glob';
|
import glob from 'fast-glob';
|
||||||
import color from 'picocolors';
|
import color from 'picocolors';
|
||||||
import consola from 'consola';
|
import consola from 'consola';
|
||||||
import { prompt } from 'enquirer';
|
import { prompt } from 'inquirer';
|
||||||
import { sep, join } from 'node:path';
|
import { sep, join } from 'path';
|
||||||
import { CWD, GENERATOR_DIR } from './constant';
|
import { CWD, GENERATOR_DIR } from './constant';
|
||||||
|
|
||||||
const PROMPTS = [
|
const PROMPTS = [
|
||||||
{
|
{
|
||||||
name: 'vueVersion',
|
name: 'vueVersion',
|
||||||
message: 'Select Vue version',
|
message: 'Select Vue version',
|
||||||
type: 'select',
|
type: 'list',
|
||||||
choices: [
|
choices: [
|
||||||
{
|
{
|
||||||
name: 'Vue 2',
|
name: 'Vue 2',
|
||||||
@ -25,7 +25,7 @@ const PROMPTS = [
|
|||||||
{
|
{
|
||||||
name: 'preprocessor',
|
name: 'preprocessor',
|
||||||
message: 'Select css preprocessor',
|
message: 'Select css preprocessor',
|
||||||
type: 'select',
|
type: 'list',
|
||||||
choices: ['Less', 'Sass'],
|
choices: ['Less', 'Sass'],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
@ -1,16 +1,20 @@
|
|||||||
#!/usr/bin/env node
|
#!/usr/bin/env node
|
||||||
|
|
||||||
import consola from 'consola';
|
import consola from 'consola';
|
||||||
import { prompt } from 'enquirer';
|
import { prompt } from 'inquirer';
|
||||||
import { ensureDir } from 'fs-extra';
|
import { ensureDir } from 'fs-extra';
|
||||||
import { VanGenerator } from './generator';
|
import { VanGenerator } from './generator';
|
||||||
|
|
||||||
async function run() {
|
const PROMPTS = [
|
||||||
const { name } = await prompt<{ name: string }>({
|
{
|
||||||
type: 'input',
|
type: 'input',
|
||||||
name: 'name',
|
name: 'name',
|
||||||
message: 'Your package name',
|
message: 'Your package name',
|
||||||
});
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
async function run() {
|
||||||
|
const { name } = await prompt(PROMPTS);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await ensureDir(name);
|
await ensureDir(name);
|
||||||
|
@ -36,7 +36,7 @@
|
|||||||
"author": "chenjiahan",
|
"author": "chenjiahan",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"esbuild": "^0.16.10",
|
"esbuild": "^0.14.54",
|
||||||
"release-it": "^15.4.1",
|
"release-it": "^15.4.1",
|
||||||
"typescript": "^4.8.2"
|
"typescript": "^4.8.2"
|
||||||
},
|
},
|
||||||
|
@ -65,7 +65,7 @@ Please add the followed config to `package.json` file.
|
|||||||
|
|
||||||
## More Details
|
## More Details
|
||||||
|
|
||||||
- [cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/commands.md)
|
- [cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/commands.md)
|
||||||
- [config](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/config.md)
|
- [config](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/config.md)
|
||||||
- [directory structure](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/directory.md)
|
- [directory structure](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.md)
|
||||||
- [CHANGELOG](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/changelog.md)
|
- [CHANGELOG](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/changelog.md)
|
||||||
|
@ -62,7 +62,7 @@ pnpm add @vant/cli -D
|
|||||||
|
|
||||||
## 详细文档
|
## 详细文档
|
||||||
|
|
||||||
- [命令](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/commands.zh-CN.md)
|
- [命令](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/commands.zh-CN.md)
|
||||||
- [配置指南](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/config.zh-CN.md)
|
- [配置指南](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/config.zh-CN.md)
|
||||||
- [目录结构](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/directory.zh-CN.md)
|
- [目录结构](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.zh-CN.md)
|
||||||
- [更新日志](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/changelog.md)
|
- [更新日志](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/changelog.md)
|
||||||
|
@ -1,43 +1,14 @@
|
|||||||
# 更新日志
|
# 更新日志
|
||||||
|
|
||||||
## v6.0.0 [unreleased]
|
## v5.0.0 (未发布)
|
||||||
|
|
||||||
- vite: 由 v3 升级至 v4
|
|
||||||
- @vitejs/plugin-vue: 由 v3 升级至 v4
|
|
||||||
- @vitejs/plugin-vue-jsx: 由 v2 升级至 v3
|
|
||||||
- 移除 `site.searchConfig` 配置项
|
|
||||||
|
|
||||||
## v5.1.0
|
|
||||||
|
|
||||||
`2022-11-05`
|
|
||||||
|
|
||||||
- 支持读取 `vite.config.ts` 文件来自定义 vite 配置
|
|
||||||
- 修复设置 vite 的 `server.port` 配置项不生效的问题
|
|
||||||
|
|
||||||
## v5.0.2
|
|
||||||
|
|
||||||
`2022-10-07`
|
|
||||||
|
|
||||||
- 修复首次运行 dev 时 vite 引入了两份 Vue 代码导致渲染失败的问题
|
|
||||||
|
|
||||||
## v5.0.1
|
|
||||||
|
|
||||||
`2022-10-06`
|
|
||||||
|
|
||||||
- 修复 jest 版本未正确升级的问题
|
|
||||||
|
|
||||||
## v5.0.0
|
|
||||||
|
|
||||||
### 依赖升级
|
### 依赖升级
|
||||||
|
|
||||||
`2022-10-06`
|
|
||||||
|
|
||||||
对以下依赖进行了大版本升级:
|
对以下依赖进行了大版本升级:
|
||||||
|
|
||||||
- vite: 由 v2 升级至 v3
|
- vite v3
|
||||||
- jest: 由 v27 升级至 v29
|
- @vitejs/plugin-vue v3
|
||||||
- @vitejs/plugin-vue: 由 v2 升级至 v3
|
- @vitejs/plugin-vue-jsx v2
|
||||||
- @vitejs/plugin-vue-jsx: 由 v1 升级至 v2
|
|
||||||
|
|
||||||
### 依赖精简
|
### 依赖精简
|
||||||
|
|
||||||
|
@ -29,10 +29,6 @@ const DEFAULT_CONFIG = {
|
|||||||
],
|
],
|
||||||
coverageReporters: ['html', 'lcov', 'text-summary'],
|
coverageReporters: ['html', 'lcov', 'text-summary'],
|
||||||
coverageDirectory: './test/coverage',
|
coverageDirectory: './test/coverage',
|
||||||
testEnvironmentOptions: {
|
|
||||||
// https://stackoverflow.com/questions/72428323/jest-referenceerror-vue-is-not-defined
|
|
||||||
customExportConditions: ['node', 'node-addons'],
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
function readRootConfig() {
|
function readRootConfig() {
|
||||||
|
@ -87,8 +87,6 @@ module.exports = {
|
|||||||
if (isJsxFile(path)) {
|
if (isJsxFile(path)) {
|
||||||
code = transformJsx(code, path);
|
code = transformJsx(code, path);
|
||||||
}
|
}
|
||||||
return {
|
return transformScript(code);
|
||||||
code: transformScript(code)
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -29,7 +29,7 @@ Start local dev server for browsering components and demo.
|
|||||||
|
|
||||||
Build Vue component library.
|
Build Vue component library.
|
||||||
|
|
||||||
Files will be output to `es` and `lib` directory. More details [directory structure](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/directory.md)
|
Files will be output to `es` and `lib` directory. More details [directory structure](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.md)
|
||||||
|
|
||||||
Please add the followed config to `package.json` when publish to npm.
|
Please add the followed config to `package.json` when publish to npm.
|
||||||
|
|
||||||
|
@ -31,7 +31,7 @@ npx vant-cli dev
|
|||||||
|
|
||||||
构建组件库。
|
构建组件库。
|
||||||
|
|
||||||
运行 build 命令会在 `es` 和 `lib` 目录下生成可用于生产环境的组件代码,详见 [目录结构](https://github.com/vant-ui/vant/tree/main/packages/vant-cli/docs/directory.zh-CN.md)。
|
运行 build 命令会在 `es` 和 `lib` 目录下生成可用于生产环境的组件代码,详见 [目录结构](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.zh-CN.md)。
|
||||||
|
|
||||||
发布 npm 时,请将以下配置加入到 `package.json` 中,使 npm 包能被正确识别:
|
发布 npm 时,请将以下配置加入到 `package.json` 中,使 npm 包能被正确识别:
|
||||||
|
|
||||||
|
@ -16,6 +16,7 @@
|
|||||||
- [site.nav](#sitenav)
|
- [site.nav](#sitenav)
|
||||||
- [site.versions](#siteversions)
|
- [site.versions](#siteversions)
|
||||||
- [site.baiduAnalytics](#sitebaiduanalytics)
|
- [site.baiduAnalytics](#sitebaiduanalytics)
|
||||||
|
- [site.searchConfig](#sitesearchconfig)
|
||||||
- [site.hideSimulator](#sitehidesimulator)
|
- [site.hideSimulator](#sitehidesimulator)
|
||||||
- [site.simulator.url](#sitesimulatorurl)
|
- [site.simulator.url](#sitesimulatorurl)
|
||||||
- [site.htmlMeta](#sitehtmlmeta)
|
- [site.htmlMeta](#sitehtmlmeta)
|
||||||
@ -176,16 +177,17 @@ When set to `true`, `export * from 'xxx'` will be used to export all modules and
|
|||||||
|
|
||||||
### build.configureVite
|
### build.configureVite
|
||||||
|
|
||||||
- Type: `(config: InlineConfig): InlineConfig | undefined`
|
- Type: `(config: InlineConfig): InlineConfig`
|
||||||
- Default: `undefined`
|
- Default: `undefined`
|
||||||
|
|
||||||
Custom [vite config](https://vitejs.dev/config/), requires `@vant/cli>= 4.0.0`.
|
Custom vite config(`@vant/cli>= 4.0.0`)
|
||||||
|
|
||||||
```js
|
```js
|
||||||
module.exports = {
|
module.exports = {
|
||||||
build: {
|
build: {
|
||||||
configureVite(config) {
|
configureVite(config) {
|
||||||
config.server.port = 3000;
|
// add vite plugin
|
||||||
|
config.plugins.push(vitePluginXXX);
|
||||||
return config;
|
return config;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -212,10 +214,6 @@ module.exports = {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
Note that you are not allowed to import vite plugins in `vant.config.mjs`, because the file will be bundled into the website code.
|
|
||||||
|
|
||||||
If you need to configure some vite plugins, please create a `vite.config.ts` file in the same directory of `vant.config.mjs`, in which you can add any vite configuration (this feature requires @vant/cli 5.1.0).
|
|
||||||
|
|
||||||
### build.packageManager
|
### build.packageManager
|
||||||
|
|
||||||
- Type: `'npm' | 'yarn' | 'pnpm'`
|
- Type: `'npm' | 'yarn' | 'pnpm'`
|
||||||
@ -354,6 +352,13 @@ module.exports = {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### site.searchConfig
|
||||||
|
|
||||||
|
- Type: `object`
|
||||||
|
- Default: `undefined`
|
||||||
|
|
||||||
|
Documentation site search config. Based on [docsearch](https://docsearch.algolia.com/docs/behavior) of algolia.
|
||||||
|
|
||||||
### site.hideSimulator
|
### site.hideSimulator
|
||||||
|
|
||||||
- Type: `boolean`
|
- Type: `boolean`
|
||||||
|
@ -16,6 +16,7 @@
|
|||||||
- [site.nav](#sitenav)
|
- [site.nav](#sitenav)
|
||||||
- [site.versions](#siteversions)
|
- [site.versions](#siteversions)
|
||||||
- [site.baiduAnalytics](#sitebaiduanalytics)
|
- [site.baiduAnalytics](#sitebaiduanalytics)
|
||||||
|
- [site.searchConfig](#sitesearchconfig)
|
||||||
- [site.hideSimulator](#sitehidesimulator)
|
- [site.hideSimulator](#sitehidesimulator)
|
||||||
- [site.simulator.url](#sitesimulatorurl)
|
- [site.simulator.url](#sitesimulatorurl)
|
||||||
- [site.htmlMeta](#sitehtmlmeta)
|
- [site.htmlMeta](#sitehtmlmeta)
|
||||||
@ -176,16 +177,17 @@ module.exports = {
|
|||||||
|
|
||||||
### build.configureVite
|
### build.configureVite
|
||||||
|
|
||||||
- Type: `(config: InlineConfig): InlineConfig | undefined`
|
- Type: `(config: InlineConfig): InlineConfig`
|
||||||
- Default: `undefined`
|
- Default: `undefined`
|
||||||
|
|
||||||
vant-cli 使用 vite 来构建组件库和文档站点,通过 `configureVite` 选项可以自定义 [vite 配置](https://vitejs.dev/config/)(从 4.0.0 版本开始支持)。
|
vant-cli 使用 vite 来构建组件库和文档站点,通过 `configureVite` 选项可以自定义 vite 配置(从 4.0.0 版本开始支持)。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
module.exports = {
|
module.exports = {
|
||||||
build: {
|
build: {
|
||||||
configureVite(config) {
|
configureVite(config) {
|
||||||
config.server.port = 3000;
|
// 添加一个自定义插件
|
||||||
|
config.plugins.push(vitePluginXXX);
|
||||||
return config;
|
return config;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -214,10 +216,6 @@ module.exports = {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
注意,由于 `vant.config.mjs` 文件会被打包到文档网站的代码中,因此 `configureVite` 中不允许引用 vite 插件。
|
|
||||||
|
|
||||||
如果需要配置 vite 插件,可以在 `vant.config.mjs` 的同级目录下创建 `vite.config.ts` 文件,在该文件中你可以添加任意的 vite 配置(该特性从 @vant/cli 5.1.0 版本开始支持)。
|
|
||||||
|
|
||||||
### build.packageManager
|
### build.packageManager
|
||||||
|
|
||||||
- Type: `'npm' | 'yarn' | 'pnpm'`
|
- Type: `'npm' | 'yarn' | 'pnpm'`
|
||||||
@ -356,6 +354,15 @@ module.exports = {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### site.searchConfig
|
||||||
|
|
||||||
|
- Type: `object`
|
||||||
|
- Default: `undefined`
|
||||||
|
|
||||||
|
文档网站的搜索配置,基于 algolia 提供的 docsearch 服务实现。
|
||||||
|
|
||||||
|
配置内容参见 [docsearch](https://docsearch.algolia.com/docs/behavior)。
|
||||||
|
|
||||||
### site.hideSimulator
|
### site.hideSimulator
|
||||||
|
|
||||||
- Type: `boolean`
|
- Type: `boolean`
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@vant/cli",
|
"name": "@vant/cli",
|
||||||
"version": "5.1.0",
|
"version": "4.0.4",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "lib/index.js",
|
"main": "lib/index.js",
|
||||||
"typings": "lib/index.d.ts",
|
"typings": "lib/index.d.ts",
|
||||||
@ -39,40 +39,41 @@
|
|||||||
"author": "chenjiahan",
|
"author": "chenjiahan",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@jest/types": "^29.1.2",
|
"@jest/types": "^27.5.1",
|
||||||
"@types/fs-extra": "^9.0.13",
|
"@types/fs-extra": "^9.0.13",
|
||||||
"@types/less": "^3.0.3",
|
"@types/less": "^3.0.3",
|
||||||
"@types/lodash": "^4.14.191",
|
|
||||||
"@types/markdown-it": "^12.2.3",
|
"@types/markdown-it": "^12.2.3",
|
||||||
"vue": "^3.2.45"
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"vue": "^3.2.38"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/core": "^7.18.13",
|
"@babel/core": "^7.18.13",
|
||||||
"@babel/preset-typescript": "^7.18.6",
|
"@babel/preset-typescript": "^7.18.6",
|
||||||
"@types/jest": "^29.1.1",
|
"@docsearch/css": "^3.2.1",
|
||||||
|
"@docsearch/js": "^3.2.1",
|
||||||
|
"@types/jest": "^27.5.2",
|
||||||
"@vant/eslint-config": "^3.5.0",
|
"@vant/eslint-config": "^3.5.0",
|
||||||
"@vant/touch-emulator": "^1.4.0",
|
"@vant/touch-emulator": "^1.4.0",
|
||||||
"@vitejs/plugin-vue": "^4.0.0",
|
"@vitejs/plugin-vue": "^3.0.3",
|
||||||
"@vitejs/plugin-vue-jsx": "^3.0.0",
|
"@vitejs/plugin-vue-jsx": "^2.0.1",
|
||||||
"@vue/babel-plugin-jsx": "^1.1.1",
|
"@vue/babel-plugin-jsx": "^1.1.1",
|
||||||
"autoprefixer": "^10.4.8",
|
"autoprefixer": "^10.4.8",
|
||||||
"commander": "^9.4.0",
|
"commander": "^9.4.0",
|
||||||
"consola": "^2.15.3",
|
"consola": "^2.15.3",
|
||||||
"conventional-changelog": "^3.1.25",
|
"conventional-changelog": "^3.1.25",
|
||||||
"esbuild": "^0.16.10",
|
"esbuild": "^0.14.54",
|
||||||
"eslint": "^8.23.0",
|
"eslint": "^8.23.0",
|
||||||
"execa": "^6.1.0",
|
"execa": "^5.1.1",
|
||||||
"fast-glob": "^3.2.11",
|
"fast-glob": "^3.2.11",
|
||||||
"fs-extra": "^10.1.0",
|
"fs-extra": "^10.1.0",
|
||||||
"hash-sum": "^2.0.0",
|
"hash-sum": "^2.0.0",
|
||||||
"highlight.js": "^11.6.0",
|
"highlight.js": "^11.6.0",
|
||||||
"husky": "^8.0.1",
|
"husky": "^8.0.1",
|
||||||
"jest": "^29.1.2",
|
"jest": "^27.5.1",
|
||||||
"jest-canvas-mock": "^2.4.0",
|
"jest-canvas-mock": "^2.4.0",
|
||||||
"jest-environment-jsdom": "^29.1.2",
|
|
||||||
"jest-serializer-html": "^7.1.0",
|
"jest-serializer-html": "^7.1.0",
|
||||||
"less": "^4.1.3",
|
"less": "^4.1.3",
|
||||||
"lodash": "^4.17.21",
|
|
||||||
"markdown-it": "^12.3.2",
|
"markdown-it": "^12.3.2",
|
||||||
"markdown-it-anchor": "^8.6.4",
|
"markdown-it-anchor": "^8.6.4",
|
||||||
"nano-staged": "^0.8.0",
|
"nano-staged": "^0.8.0",
|
||||||
@ -82,10 +83,10 @@
|
|||||||
"postcss-load-config": "^3.1.4",
|
"postcss-load-config": "^3.1.4",
|
||||||
"prettier": "^2.7.1",
|
"prettier": "^2.7.1",
|
||||||
"release-it": "^15.4.1",
|
"release-it": "^15.4.1",
|
||||||
"terser": "^5.16.1",
|
|
||||||
"transliteration": "^2.3.5",
|
"transliteration": "^2.3.5",
|
||||||
"typescript": "^4.8.2",
|
"typescript": "^4.8.2",
|
||||||
"vite": "^4.0.3",
|
"vite": "^3.0.9",
|
||||||
|
"vite-plugin-html": "^2.1.2",
|
||||||
"vite-plugin-md": "^0.11.9",
|
"vite-plugin-md": "^0.11.9",
|
||||||
"vue-router": "^4.1.5"
|
"vue-router": "^4.1.5"
|
||||||
},
|
},
|
||||||
|
@ -15,13 +15,6 @@ code {
|
|||||||
border-radius: var(--van-doc-border-radius);
|
border-radius: var(--van-doc-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
|
||||||
code {
|
|
||||||
display: inline-flex;
|
|
||||||
padding: 4px 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
margin: 20px 0 0;
|
margin: 20px 0 0;
|
||||||
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
:root {
|
body {
|
||||||
// colors
|
// colors
|
||||||
--van-doc-black: #000;
|
--van-doc-black: #000;
|
||||||
--van-doc-white: #fff;
|
--van-doc-white: #fff;
|
||||||
@ -44,7 +44,7 @@
|
|||||||
--van-doc-code-background: var(--van-doc-gray-1);
|
--van-doc-code-background: var(--van-doc-gray-1);
|
||||||
|
|
||||||
// blockquote
|
// blockquote
|
||||||
--van-doc-blockquote-color: #2f85da;
|
--van-doc-blockquote-color: #4994df;
|
||||||
--van-doc-blockquote-background: #ecf9ff;
|
--van-doc-blockquote-background: #ecf9ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -303,8 +303,7 @@ export default {
|
|||||||
> blockquote {
|
> blockquote {
|
||||||
margin: 16px 0 0;
|
margin: 16px 0 0;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
font-size: 15px;
|
font-size: 14px;
|
||||||
line-height: 26px;
|
|
||||||
color: var(--van-doc-blockquote-color);
|
color: var(--van-doc-blockquote-color);
|
||||||
background-color: var(--van-doc-blockquote-background);
|
background-color: var(--van-doc-blockquote-background);
|
||||||
border-radius: var(--van-doc-border-radius);
|
border-radius: var(--van-doc-border-radius);
|
||||||
|
@ -64,6 +64,12 @@
|
|||||||
{{ langLabel }}
|
{{ langLabel }}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
<search-input
|
||||||
|
v-if="searchConfig"
|
||||||
|
:lang="lang"
|
||||||
|
:search-config="searchConfig"
|
||||||
|
/>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -71,12 +77,17 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import SearchInput from './SearchInput.vue';
|
||||||
import { packageVersion } from 'site-desktop-shared';
|
import { packageVersion } from 'site-desktop-shared';
|
||||||
import { getDefaultTheme, syncThemeToChild } from '../../common/iframe-sync';
|
import { getDefaultTheme, syncThemeToChild } from '../../common/iframe-sync';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'VanDocHeader',
|
name: 'VanDocHeader',
|
||||||
|
|
||||||
|
components: {
|
||||||
|
SearchInput,
|
||||||
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
lang: String,
|
lang: String,
|
||||||
config: Object,
|
config: Object,
|
||||||
@ -111,6 +122,10 @@ export default {
|
|||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
searchConfig() {
|
||||||
|
return this.config.searchConfig;
|
||||||
|
},
|
||||||
|
|
||||||
themeImg() {
|
themeImg() {
|
||||||
if (this.currentTheme === 'light') {
|
if (this.currentTheme === 'light') {
|
||||||
return 'https://b.yzcdn.cn/vant/dark-theme.svg';
|
return 'https://b.yzcdn.cn/vant/dark-theme.svg';
|
||||||
@ -123,8 +138,8 @@ export default {
|
|||||||
currentTheme: {
|
currentTheme: {
|
||||||
handler(newVal, oldVal) {
|
handler(newVal, oldVal) {
|
||||||
window.localStorage.setItem('vantTheme', newVal);
|
window.localStorage.setItem('vantTheme', newVal);
|
||||||
document.documentElement.classList.remove(`van-doc-theme-${oldVal}`);
|
document.body.classList.remove(`van-doc-theme-${oldVal}`);
|
||||||
document.documentElement.classList.add(`van-doc-theme-${newVal}`);
|
document.body.classList.add(`van-doc-theme-${newVal}`);
|
||||||
syncThemeToChild(newVal);
|
syncThemeToChild(newVal);
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
|
@ -110,14 +110,14 @@ export default {
|
|||||||
padding: 24px 0 0 var(--van-doc-padding);
|
padding: 24px 0 0 var(--van-doc-padding);
|
||||||
color: var(--van-doc-text-color-2);
|
color: var(--van-doc-text-color-2);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 16px;
|
font-size: 15px;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 4px 0;
|
margin: 8px 0;
|
||||||
padding: 6px 0 6px var(--van-doc-padding);
|
padding: 6px 0 6px var(--van-doc-padding);
|
||||||
color: var(--van-doc-text-color-3);
|
color: var(--van-doc-text-color-3);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
63
packages/vant-cli/site/desktop/components/SearchInput.vue
Normal file
63
packages/vant-cli/site/desktop/components/SearchInput.vue
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
<template>
|
||||||
|
<div id="docsearch" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'VanDocSearch',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
lang: String,
|
||||||
|
searchConfig: Object,
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
lang() {
|
||||||
|
this.initDocsearch();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.initDocsearch();
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
initDocsearch() {
|
||||||
|
if (this.searchConfig) {
|
||||||
|
import('@docsearch/css');
|
||||||
|
import('@docsearch/js').then((docsearch) => {
|
||||||
|
docsearch.default({
|
||||||
|
...this.searchConfig,
|
||||||
|
container: '#docsearch',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#docsearch {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DocSearch-Button {
|
||||||
|
height: 32px;
|
||||||
|
background: #f7f8fa;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.DocSearch-Search-Icon {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DocSearch-Button-Key {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
</style>
|
@ -11,12 +11,12 @@
|
|||||||
name="viewport"
|
name="viewport"
|
||||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
|
||||||
/>
|
/>
|
||||||
<%= meta %>
|
<%- meta %>
|
||||||
<meta http-equiv="Cache-Control" content="no-cache" />
|
<meta http-equiv="Cache-Control" content="no-cache" />
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
<meta http-equiv="Pragma" content="no-cache" />
|
||||||
<meta http-equiv="Expires" content="0" />
|
<meta http-equiv="Expires" content="0" />
|
||||||
<% if (headHtml) { %>
|
<% if (headHtml) { %>
|
||||||
<%= headHtml %>
|
<%- headHtml %>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (baiduAnalytics) { %>
|
<% if (baiduAnalytics) { %>
|
||||||
<script>
|
<script>
|
||||||
|
@ -11,12 +11,12 @@
|
|||||||
name="viewport"
|
name="viewport"
|
||||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
|
||||||
/>
|
/>
|
||||||
<%= meta %>
|
<%- meta %>
|
||||||
<meta http-equiv="Cache-Control" content="no-cache" />
|
<meta http-equiv="Cache-Control" content="no-cache" />
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
<meta http-equiv="Pragma" content="no-cache" />
|
||||||
<meta http-equiv="Expires" content="0" />
|
<meta http-equiv="Expires" content="0" />
|
||||||
<% if (headHtml) { %>
|
<% if (headHtml) { %>
|
||||||
<%= headHtml %>
|
<%- headHtml %>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (enableVConsole) { %>
|
<% if (enableVConsole) { %>
|
||||||
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
|
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<demo-nav />
|
<demo-nav />
|
||||||
<router-view v-slot="{ Component }">
|
<router-view v-slot="{ Component }">
|
||||||
<demo-section>
|
<keep-alive>
|
||||||
<keep-alive>
|
<demo-section>
|
||||||
<component :is="Component" />
|
<component :is="Component" />
|
||||||
</keep-alive>
|
</demo-section>
|
||||||
</demo-section>
|
</keep-alive>
|
||||||
</router-view>
|
</router-view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -24,21 +24,12 @@ export default {
|
|||||||
watch(
|
watch(
|
||||||
theme,
|
theme,
|
||||||
(newVal, oldVal) => {
|
(newVal, oldVal) => {
|
||||||
document.documentElement.classList.remove(`van-doc-theme-${oldVal}`);
|
document.body.classList.remove(`van-doc-theme-${oldVal}`);
|
||||||
document.documentElement.classList.add(`van-doc-theme-${newVal}`);
|
document.body.classList.add(`van-doc-theme-${newVal}`);
|
||||||
|
|
||||||
const { darkModeClass, lightModeClass } = config.site;
|
const { darkModeClass } = config.site;
|
||||||
if (darkModeClass) {
|
if (darkModeClass) {
|
||||||
document.documentElement.classList.toggle(
|
document.body.classList.toggle(darkModeClass, newVal === 'dark');
|
||||||
darkModeClass,
|
|
||||||
newVal === 'dark'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (lightModeClass) {
|
|
||||||
document.documentElement.classList.toggle(
|
|
||||||
lightModeClass,
|
|
||||||
newVal === 'light'
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ immediate: true }
|
{ immediate: true }
|
||||||
@ -52,7 +43,6 @@ export default {
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
min-width: 100vw;
|
min-width: 100vw;
|
||||||
background-color: inherit;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.van-doc-theme-light {
|
.van-doc-theme-light {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import fse from 'fs-extra';
|
import fse from 'fs-extra';
|
||||||
import { execa } from 'execa';
|
import execa from 'execa';
|
||||||
import { join, relative } from 'node:path';
|
import { join, relative } from 'path';
|
||||||
import { clean } from './clean.js';
|
import { clean } from './clean.js';
|
||||||
import { CSS_LANG } from '../common/css.js';
|
import { CSS_LANG } from '../common/css.js';
|
||||||
import { createSpinner, consola } from '../common/logger.js';
|
import { createSpinner, consola } from '../common/logger.js';
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
import { join, dirname } from 'node:path';
|
import { join, dirname } from 'path';
|
||||||
import { fileURLToPath } from 'node:url';
|
import { fileURLToPath } from 'url';
|
||||||
import { ROOT } from '../common/constant.js';
|
import { ROOT } from '../common/constant.js';
|
||||||
import { createSpinner, slimPath } from '../common/logger.js';
|
import { createSpinner, slimPath } from '../common/logger.js';
|
||||||
import { createWriteStream, readFileSync } from 'node:fs';
|
import { createWriteStream, readFileSync } from 'fs';
|
||||||
import conventionalChangelog from 'conventional-changelog';
|
import conventionalChangelog from 'conventional-changelog';
|
||||||
|
|
||||||
const DIST_FILE = join(ROOT, './changelog.generated.md');
|
const DIST_FILE = join(ROOT, './changelog.generated.md');
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { readFileSync } from 'node:fs';
|
import { readFileSync } from 'fs';
|
||||||
import { consola } from '../common/logger.js';
|
import { consola } from '../common/logger.js';
|
||||||
|
|
||||||
const commitRE =
|
const commitRE =
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { execa } from 'execa';
|
import execa from 'execa';
|
||||||
import { consola, createSpinner } from '../common/logger.js';
|
import { consola, createSpinner } from '../common/logger.js';
|
||||||
import { SCRIPT_EXTS } from '../common/constant.js';
|
import { SCRIPT_EXTS } from '../common/constant.js';
|
||||||
|
|
||||||
@ -18,7 +18,7 @@ function runCommand(
|
|||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
execa(cmd, options, {
|
execa(cmd, options, {
|
||||||
preferLocal: true,
|
preferLocal: true,
|
||||||
env: { FORCE_COLOR: 'true' },
|
env: { FORCE_COLOR: true },
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
spinner.success({ text: messages.succeed });
|
spinner.success({ text: messages.succeed });
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
/* eslint-disable no-template-curly-in-string */
|
/* eslint-disable no-template-curly-in-string */
|
||||||
import releaseIt from 'release-it';
|
import releaseIt from 'release-it';
|
||||||
import { join, dirname } from 'node:path';
|
import { join, dirname } from 'path';
|
||||||
import { fileURLToPath } from 'node:url';
|
import { fileURLToPath } from 'url';
|
||||||
|
|
||||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||||
const PLUGIN_PATH = join(__dirname, '../compiler/vant-cli-release-plugin.js');
|
const PLUGIN_PATH = join(__dirname, '../compiler/vant-cli-release-plugin.js');
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { existsSync, readFileSync } from 'node:fs';
|
import { existsSync, readFileSync } from 'fs';
|
||||||
import { fileURLToPath, pathToFileURL } from 'node:url';
|
import { fileURLToPath, pathToFileURL } from 'url';
|
||||||
import { join, dirname, isAbsolute } from 'node:path';
|
import { join, dirname, isAbsolute } from 'path';
|
||||||
|
|
||||||
function findRootDir(dir: string): string {
|
function findRootDir(dir: string): string {
|
||||||
if (existsSync(join(dir, 'vant.config.mjs'))) {
|
if (existsSync(join(dir, 'vant.config.mjs'))) {
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { existsSync } from 'node:fs';
|
import { existsSync } from 'fs';
|
||||||
import { join, isAbsolute } from 'node:path';
|
import { join, isAbsolute } from 'path';
|
||||||
import { getVantConfig } from '../common/index.js';
|
import { getVantConfig } from '../common/index.js';
|
||||||
import { STYLE_DIR, SRC_DIR } from './constant.js';
|
import { STYLE_DIR, SRC_DIR } from './constant.js';
|
||||||
|
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import fse from 'fs-extra';
|
import fse from 'fs-extra';
|
||||||
import { sep, join } from 'node:path';
|
import { sep, join } from 'path';
|
||||||
import { SRC_DIR, getVantConfig } from './constant.js';
|
import { SRC_DIR, getVantConfig } from './constant.js';
|
||||||
import { InlineConfig, loadConfigFromFile, mergeConfig } from 'vite';
|
import type { InlineConfig } from 'vite';
|
||||||
|
|
||||||
const { lstatSync, existsSync, readdirSync, readFileSync, outputFileSync } =
|
const { lstatSync, existsSync, readdirSync, readFileSync, outputFileSync } =
|
||||||
fse;
|
fse;
|
||||||
@ -114,33 +114,13 @@ export function smartOutputFile(filePath: string, content: string) {
|
|||||||
outputFileSync(filePath, content);
|
outputFileSync(filePath, content);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function mergeCustomViteConfig(
|
export function mergeCustomViteConfig(config: InlineConfig) {
|
||||||
config: InlineConfig,
|
|
||||||
mode: 'production' | 'development'
|
|
||||||
): Promise<InlineConfig> {
|
|
||||||
const vantConfig = getVantConfig();
|
const vantConfig = getVantConfig();
|
||||||
const configureVite = vantConfig.build?.configureVite;
|
const configureVite = vantConfig.build?.configureVite;
|
||||||
|
|
||||||
const userConfig = await loadConfigFromFile(
|
|
||||||
{
|
|
||||||
mode,
|
|
||||||
command: mode === 'development' ? 'serve' : 'build',
|
|
||||||
},
|
|
||||||
undefined,
|
|
||||||
process.cwd()
|
|
||||||
);
|
|
||||||
|
|
||||||
if (configureVite) {
|
if (configureVite) {
|
||||||
const ret = configureVite(config);
|
return configureVite(config);
|
||||||
if (ret) {
|
|
||||||
config = ret;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (userConfig) {
|
|
||||||
return mergeConfig(config, userConfig.config);
|
|
||||||
}
|
|
||||||
|
|
||||||
return config;
|
return config;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { execa } from 'execa';
|
import execa from 'execa';
|
||||||
import { consola } from './logger.js';
|
import { consola } from './logger.js';
|
||||||
import { execSync } from 'child_process';
|
import { execSync } from 'child_process';
|
||||||
import { getVantConfig } from './constant.js';
|
import { getVantConfig } from './constant.js';
|
||||||
|
@ -34,13 +34,8 @@ export async function compileBundles() {
|
|||||||
getVantConfig().build?.bundleOptions || DEFAULT_OPTIONS;
|
getVantConfig().build?.bundleOptions || DEFAULT_OPTIONS;
|
||||||
|
|
||||||
await Promise.all(
|
await Promise.all(
|
||||||
bundleOptions.map(async (config) =>
|
bundleOptions.map((config) =>
|
||||||
build(
|
build(mergeCustomViteConfig(getViteConfigForPackage(config)))
|
||||||
await mergeCustomViteConfig(
|
|
||||||
getViteConfigForPackage(config),
|
|
||||||
'production'
|
|
||||||
)
|
|
||||||
)
|
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import less from 'less';
|
import less from 'less';
|
||||||
import { join } from 'node:path';
|
import { join } from 'path';
|
||||||
import { readFileSync } from 'node:fs';
|
import { readFileSync } from 'fs';
|
||||||
import { CWD } from '../common/constant.js';
|
import { CWD } from '../common/constant.js';
|
||||||
|
|
||||||
export async function compileLess(filePath: string) {
|
export async function compileLess(filePath: string) {
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { createRequire } from 'node:module';
|
import { createRequire } from 'module';
|
||||||
|
|
||||||
const require = createRequire(import.meta.url);
|
const require = createRequire(import.meta.url);
|
||||||
|
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import fse from 'fs-extra';
|
import fse from 'fs-extra';
|
||||||
import babel from '@babel/core';
|
import babel from '@babel/core';
|
||||||
import esbuild, { type Format } from 'esbuild';
|
import esbuild, { type Format } from 'esbuild';
|
||||||
import { sep } from 'node:path';
|
import { sep } from 'path';
|
||||||
import { isJsx, replaceExt, getVantConfig } from '../common/index.js';
|
import { isJsx, replaceExt, getVantConfig } from '../common/index.js';
|
||||||
import { replaceCSSImportExt } from '../common/css.js';
|
import { replaceCSSImportExt } from '../common/css.js';
|
||||||
import { replaceScriptImportExt } from './get-deps.js';
|
import { replaceScriptImportExt } from './get-deps.js';
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import fse from 'fs-extra';
|
import fse from 'fs-extra';
|
||||||
import path from 'node:path';
|
import path from 'path';
|
||||||
import hash from 'hash-sum';
|
import hash from 'hash-sum';
|
||||||
import {
|
import {
|
||||||
parse,
|
parse,
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import color from 'picocolors';
|
import color from 'picocolors';
|
||||||
import { createRequire } from 'node:module';
|
import { createRequire } from 'module';
|
||||||
import { createServer, build } from 'vite';
|
import { createServer, build } from 'vite';
|
||||||
import {
|
import {
|
||||||
getViteConfigForSiteDev,
|
getViteConfigForSiteDev,
|
||||||
@ -29,18 +29,12 @@ export function genSiteEntry(): Promise<void> {
|
|||||||
export async function compileSite(production = false) {
|
export async function compileSite(production = false) {
|
||||||
await genSiteEntry();
|
await genSiteEntry();
|
||||||
if (production) {
|
if (production) {
|
||||||
const config = await mergeCustomViteConfig(
|
const config = mergeCustomViteConfig(getViteConfigForSiteProd());
|
||||||
getViteConfigForSiteProd(),
|
|
||||||
'production'
|
|
||||||
);
|
|
||||||
await build(config);
|
await build(config);
|
||||||
} else {
|
} else {
|
||||||
const config = await mergeCustomViteConfig(
|
const config = mergeCustomViteConfig(getViteConfigForSiteDev());
|
||||||
getViteConfigForSiteDev(),
|
|
||||||
'development'
|
|
||||||
);
|
|
||||||
const server = await createServer(config);
|
const server = await createServer(config);
|
||||||
await server.listen(config.server?.port);
|
await server.listen();
|
||||||
|
|
||||||
const require = createRequire(import.meta.url);
|
const require = createRequire(import.meta.url);
|
||||||
const { version } = require('vite/package.json');
|
const { version } = require('vite/package.json');
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { parse } from 'node:path';
|
import { parse } from 'path';
|
||||||
import fse from 'fs-extra';
|
import fse from 'fs-extra';
|
||||||
import { getVantConfig, replaceExt } from '../common/index.js';
|
import { getVantConfig, replaceExt } from '../common/index.js';
|
||||||
import { compileCss } from './compile-css.js';
|
import { compileCss } from './compile-css.js';
|
||||||
|
@ -3,8 +3,8 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import fse from 'fs-extra';
|
import fse from 'fs-extra';
|
||||||
import { createRequire } from 'node:module';
|
import { createRequire } from 'module';
|
||||||
import { sep, join, relative } from 'node:path';
|
import { sep, join, relative } from 'path';
|
||||||
import { getComponents, replaceExt } from '../common/index.js';
|
import { getComponents, replaceExt } from '../common/index.js';
|
||||||
import { CSS_LANG, getCssBaseFile } from '../common/css.js';
|
import { CSS_LANG, getCssBaseFile } from '../common/css.js';
|
||||||
import { checkStyleExists } from './gen-style-deps-map.js';
|
import { checkStyleExists } from './gen-style-deps-map.js';
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { join } from 'node:path';
|
import { join } from 'path';
|
||||||
import {
|
import {
|
||||||
pascalize,
|
pascalize,
|
||||||
getComponents,
|
getComponents,
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { join } from 'node:path';
|
import { join } from 'path';
|
||||||
import { existsSync } from 'node:fs';
|
import { existsSync } from 'fs';
|
||||||
import { createRequire } from 'node:module';
|
import { createRequire } from 'module';
|
||||||
import { smartOutputFile, normalizePath } from '../common/index.js';
|
import { smartOutputFile, normalizePath } from '../common/index.js';
|
||||||
import { CSS_LANG, getCssBaseFile } from '../common/css.js';
|
import { CSS_LANG, getCssBaseFile } from '../common/css.js';
|
||||||
import { SRC_DIR, STYLE_DEPS_JSON_FILE } from '../common/constant.js';
|
import { SRC_DIR, STYLE_DEPS_JSON_FILE } from '../common/constant.js';
|
||||||
|
@ -1,7 +1,12 @@
|
|||||||
import glob from 'fast-glob';
|
import glob from 'fast-glob';
|
||||||
import { join, parse } from 'node:path';
|
import { join, parse } from 'path';
|
||||||
import { existsSync, readFileSync, readdirSync } from 'node:fs';
|
import { existsSync, readFileSync, readdirSync } from 'fs';
|
||||||
import { pascalize, getVantConfig, normalizePath } from '../common/index.js';
|
import {
|
||||||
|
isDev,
|
||||||
|
pascalize,
|
||||||
|
getVantConfig,
|
||||||
|
normalizePath,
|
||||||
|
} from '../common/index.js';
|
||||||
import {
|
import {
|
||||||
SRC_DIR,
|
SRC_DIR,
|
||||||
DOCS_DIR,
|
DOCS_DIR,
|
||||||
@ -75,7 +80,10 @@ function genImportDocuments(items: DocumentItem[]) {
|
|||||||
return items
|
return items
|
||||||
.map((item) => {
|
.map((item) => {
|
||||||
const path = normalizePath(item.path);
|
const path = normalizePath(item.path);
|
||||||
return `const ${item.name} = () => import('${path}');`;
|
if (isDev()) {
|
||||||
|
return `const ${item.name} = () => import('${path}');`;
|
||||||
|
}
|
||||||
|
return `import ${item.name} from '${path}';`;
|
||||||
})
|
})
|
||||||
.join('\n');
|
.join('\n');
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { join } from 'node:path';
|
import { join } from 'path';
|
||||||
import { existsSync, readdirSync } from 'node:fs';
|
import { existsSync, readdirSync } from 'fs';
|
||||||
import { SRC_DIR } from '../common/constant.js';
|
import { SRC_DIR } from '../common/constant.js';
|
||||||
import {
|
import {
|
||||||
pascalize,
|
pascalize,
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { relative, sep, join } from 'node:path';
|
import { relative, sep, join } from 'path';
|
||||||
import { CSS_LANG } from '../common/css.js';
|
import { CSS_LANG } from '../common/css.js';
|
||||||
import { existsSync } from 'node:fs';
|
import { existsSync } from 'fs';
|
||||||
import { getDeps, clearDepsCache, fillExt } from './get-deps.js';
|
import { getDeps, clearDepsCache, fillExt } from './get-deps.js';
|
||||||
import { getComponents, smartOutputFile } from '../common/index.js';
|
import { getComponents, smartOutputFile } from '../common/index.js';
|
||||||
import { SRC_DIR, STYLE_DEPS_JSON_FILE } from '../common/constant.js';
|
import { SRC_DIR, STYLE_DEPS_JSON_FILE } from '../common/constant.js';
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { join } from 'node:path';
|
import { join } from 'path';
|
||||||
import { SCRIPT_EXTS, STYLE_EXTS } from '../common/constant.js';
|
import { SCRIPT_EXTS, STYLE_EXTS } from '../common/constant.js';
|
||||||
import { readFileSync, existsSync } from 'node:fs';
|
import { readFileSync, existsSync } from 'fs';
|
||||||
|
|
||||||
let depsMap: Record<string, string[]> = {};
|
let depsMap: Record<string, string[]> = {};
|
||||||
let existsCache: Record<string, boolean> = {};
|
let existsCache: Record<string, boolean> = {};
|
||||||
|
@ -1,6 +1,11 @@
|
|||||||
/* eslint-disable no-continue */
|
/* eslint-disable no-continue */
|
||||||
import { Articles } from './parser.js';
|
import { Articles } from './parser.js';
|
||||||
import { formatType, removeVersion, toKebabCase } from './utils.js';
|
import {
|
||||||
|
formatOptions,
|
||||||
|
formatType,
|
||||||
|
removeVersion,
|
||||||
|
toKebabCase,
|
||||||
|
} from './utils.js';
|
||||||
import { VueEventArgument, VueTag } from './type.js';
|
import { VueEventArgument, VueTag } from './type.js';
|
||||||
|
|
||||||
function formatComponentName(name: string, tagPrefix: string) {
|
function formatComponentName(name: string, tagPrefix: string) {
|
||||||
@ -61,6 +66,9 @@ function findTag(vueTags: VueTag[], name: string) {
|
|||||||
|
|
||||||
const newTag: VueTag = {
|
const newTag: VueTag = {
|
||||||
name,
|
name,
|
||||||
|
slots: [],
|
||||||
|
events: [],
|
||||||
|
attributes: [],
|
||||||
};
|
};
|
||||||
|
|
||||||
vueTags.push(newTag);
|
vueTags.push(newTag);
|
||||||
@ -99,16 +107,12 @@ export function formatter(
|
|||||||
const tag = findTag(vueTags, name);
|
const tag = findTag(vueTags, name);
|
||||||
|
|
||||||
table.body.forEach((line) => {
|
table.body.forEach((line) => {
|
||||||
const [name, desc, type, defaultVal] = line;
|
const [name, desc, type, defaultVal, options] = line;
|
||||||
|
tag.attributes!.push({
|
||||||
if (!tag.attributes) {
|
|
||||||
tag.attributes = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
tag.attributes.push({
|
|
||||||
name: removeVersion(name),
|
name: removeVersion(name),
|
||||||
default: defaultVal,
|
default: defaultVal,
|
||||||
description: desc,
|
description: desc,
|
||||||
|
options: formatOptions(options),
|
||||||
value: {
|
value: {
|
||||||
type: formatType(type),
|
type: formatType(type),
|
||||||
kind: 'expression',
|
kind: 'expression',
|
||||||
@ -124,12 +128,7 @@ export function formatter(
|
|||||||
|
|
||||||
table.body.forEach((line) => {
|
table.body.forEach((line) => {
|
||||||
const [name, desc, args] = line;
|
const [name, desc, args] = line;
|
||||||
|
tag.events!.push({
|
||||||
if (!tag.events) {
|
|
||||||
tag.events = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
tag.events.push({
|
|
||||||
name: removeVersion(name),
|
name: removeVersion(name),
|
||||||
description: desc,
|
description: desc,
|
||||||
arguments: formatArguments(args),
|
arguments: formatArguments(args),
|
||||||
@ -144,12 +143,7 @@ export function formatter(
|
|||||||
|
|
||||||
table.body.forEach((line) => {
|
table.body.forEach((line) => {
|
||||||
const [name, desc] = line;
|
const [name, desc] = line;
|
||||||
|
tag.slots!.push({
|
||||||
if (!tag.slots) {
|
|
||||||
tag.slots = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
tag.slots.push({
|
|
||||||
name: removeVersion(name),
|
name: removeVersion(name),
|
||||||
description: desc,
|
description: desc,
|
||||||
});
|
});
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import glob from 'fast-glob';
|
import glob from 'fast-glob';
|
||||||
import { join } from 'node:path';
|
import { join } from 'path';
|
||||||
import fse from 'fs-extra';
|
import fse from 'fs-extra';
|
||||||
import { mdParser } from './parser.js';
|
import { mdParser } from './parser.js';
|
||||||
import { formatter } from './formatter.js';
|
import { formatter } from './formatter.js';
|
||||||
@ -36,7 +36,7 @@ export async function parseAndWrite(options: Options) {
|
|||||||
const webTypes = genWebTypes(vueTags, options);
|
const webTypes = genWebTypes(vueTags, options);
|
||||||
fse.outputFileSync(
|
fse.outputFileSync(
|
||||||
join(options.outputDir, 'web-types.json'),
|
join(options.outputDir, 'web-types.json'),
|
||||||
JSON.stringify(webTypes)
|
JSON.stringify(webTypes, null, 2)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { PathLike } from 'node:fs';
|
import { PathLike } from 'fs';
|
||||||
|
|
||||||
export type VueSlot = {
|
export type VueSlot = {
|
||||||
name: string;
|
name: string;
|
||||||
@ -20,6 +20,7 @@ export type VueAttribute = {
|
|||||||
name: string;
|
name: string;
|
||||||
default: string;
|
default: string;
|
||||||
description: string;
|
description: string;
|
||||||
|
options: string[];
|
||||||
value: {
|
value: {
|
||||||
kind: 'expression';
|
kind: 'expression';
|
||||||
type: string;
|
type: string;
|
||||||
|
@ -20,3 +20,9 @@ export function formatType(type: string) {
|
|||||||
export function normalizePath(path: string): string {
|
export function normalizePath(path: string): string {
|
||||||
return path.replace(/\\/g, '/');
|
return path.replace(/\\/g, '/');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// `default` `primary` -> ['default', 'primary']
|
||||||
|
export function formatOptions(options?: string) {
|
||||||
|
if (!options) return [];
|
||||||
|
return options.replace(/`/g, '').split(' ');
|
||||||
|
}
|
||||||
|
@ -12,8 +12,8 @@ export function genWebTypes(tags: VueTag[], options: Options) {
|
|||||||
html: {
|
html: {
|
||||||
tags,
|
tags,
|
||||||
attributes: [],
|
attributes: [],
|
||||||
|
'types-syntax': 'typescript',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
'js-types-syntax': 'typescript',
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { join } from 'node:path';
|
import { join } from 'path';
|
||||||
import { setBuildTarget } from '../common/index.js';
|
import { setBuildTarget } from '../common/index.js';
|
||||||
import { CWD, ES_DIR, getVantConfig, LIB_DIR } from '../common/constant.js';
|
import { CWD, ES_DIR, getVantConfig, LIB_DIR } from '../common/constant.js';
|
||||||
import type { InlineConfig } from 'vite';
|
import type { InlineConfig } from 'vite';
|
||||||
@ -28,8 +28,6 @@ export function getViteConfigForPackage({
|
|||||||
: undefined,
|
: undefined,
|
||||||
|
|
||||||
build: {
|
build: {
|
||||||
emptyOutDir: false,
|
|
||||||
|
|
||||||
lib: {
|
lib: {
|
||||||
name,
|
name,
|
||||||
entry,
|
entry,
|
||||||
|
@ -1,12 +1,12 @@
|
|||||||
import { join } from 'node:path';
|
import { join } from 'path';
|
||||||
import { createRequire } from 'node:module';
|
import { createRequire } from 'module';
|
||||||
import hljs from 'highlight.js';
|
import hljs from 'highlight.js';
|
||||||
import vitePluginMd from 'vite-plugin-md';
|
import vitePluginMd from 'vite-plugin-md';
|
||||||
import vitePluginVue from '@vitejs/plugin-vue';
|
import vitePluginVue from '@vitejs/plugin-vue';
|
||||||
import vitePluginJsx from '@vitejs/plugin-vue-jsx';
|
import vitePluginJsx from '@vitejs/plugin-vue-jsx';
|
||||||
import { setBuildTarget, getVantConfig, isDev } from '../common/index.js';
|
import { setBuildTarget, getVantConfig, isDev } from '../common/index.js';
|
||||||
import { SITE_DIST_DIR, SITE_SRC_DIR } from '../common/constant.js';
|
import { SITE_DIST_DIR, SITE_SRC_DIR } from '../common/constant.js';
|
||||||
import lodash from 'lodash';
|
import { injectHtml } from 'vite-plugin-html';
|
||||||
import type { InlineConfig, PluginOption } from 'vite';
|
import type { InlineConfig, PluginOption } from 'vite';
|
||||||
import type MarkdownIt from 'markdown-it';
|
import type MarkdownIt from 'markdown-it';
|
||||||
import { genSiteMobileShared } from '../compiler/gen-site-mobile-shared.js';
|
import { genSiteMobileShared } from '../compiler/gen-site-mobile-shared.js';
|
||||||
@ -131,18 +131,6 @@ function vitePluginGenVantBaseCode(): PluginOption {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function vitePluginHTML(data: object): PluginOption {
|
|
||||||
return {
|
|
||||||
name: 'vite-plugin-html',
|
|
||||||
transformIndexHtml: {
|
|
||||||
enforce: 'pre',
|
|
||||||
transform(html) {
|
|
||||||
return lodash.template(html)(data);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getViteConfigForSiteDev(): InlineConfig {
|
export function getViteConfigForSiteDev(): InlineConfig {
|
||||||
setBuildTarget('site');
|
setBuildTarget('site');
|
||||||
|
|
||||||
@ -156,11 +144,6 @@ export function getViteConfigForSiteDev(): InlineConfig {
|
|||||||
return {
|
return {
|
||||||
root: SITE_SRC_DIR,
|
root: SITE_SRC_DIR,
|
||||||
|
|
||||||
optimizeDeps: {
|
|
||||||
// https://github.com/youzan/vant/issues/10930
|
|
||||||
include: ['vue', 'vue-router'],
|
|
||||||
},
|
|
||||||
|
|
||||||
plugins: [
|
plugins: [
|
||||||
vitePluginGenVantBaseCode(),
|
vitePluginGenVantBaseCode(),
|
||||||
vitePluginVue({
|
vitePluginVue({
|
||||||
@ -189,16 +172,18 @@ export function getViteConfigForSiteDev(): InlineConfig {
|
|||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
vitePluginJsx(),
|
vitePluginJsx(),
|
||||||
vitePluginHTML({
|
injectHtml({
|
||||||
...siteConfig,
|
data: {
|
||||||
title,
|
...siteConfig,
|
||||||
// `description` is used by the HTML ejs template,
|
title,
|
||||||
// so it needs to be written explicitly here to avoid error: description is not defined
|
// `description` is used by the HTML ejs template,
|
||||||
description: siteConfig.description,
|
// so it needs to be written explicitly here to avoid error: description is not defined
|
||||||
headHtml,
|
description: siteConfig.description,
|
||||||
baiduAnalytics,
|
headHtml,
|
||||||
enableVConsole,
|
baiduAnalytics,
|
||||||
meta: getHTMLMeta(vantConfig),
|
enableVConsole,
|
||||||
|
meta: getHTMLMeta(vantConfig),
|
||||||
|
},
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import fs from 'node:fs';
|
import fs from 'fs';
|
||||||
import { URL, fileURLToPath } from 'node:url';
|
import { URL, fileURLToPath } from 'url';
|
||||||
|
|
||||||
const packagePath = fileURLToPath(new URL('../package.json', import.meta.url));
|
const packagePath = fileURLToPath(new URL('../package.json', import.meta.url));
|
||||||
const packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf-8'));
|
const packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf-8'));
|
||||||
|
1
packages/vant-cli/src/module.d.ts
vendored
1
packages/vant-cli/src/module.d.ts
vendored
@ -1,4 +1,5 @@
|
|||||||
// some modules with missing type definitions
|
// some modules with missing type definitions
|
||||||
|
declare module 'execa';
|
||||||
declare module 'hash-sum';
|
declare module 'hash-sum';
|
||||||
declare module '@babel/core';
|
declare module '@babel/core';
|
||||||
declare module 'release-it';
|
declare module 'release-it';
|
||||||
|
@ -38,8 +38,8 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/runtime-core": "^3.2.27",
|
"@vue/runtime-core": "^3.2.27",
|
||||||
"vant": "workspace:*",
|
"vant": "workspace:*",
|
||||||
"vue": "^3.2.45",
|
"vue": "^3.2.27",
|
||||||
"esbuild": "^0.16.10",
|
"esbuild": "^0.14.29",
|
||||||
"release-it": "^15.1.1",
|
"release-it": "^15.1.1",
|
||||||
"typescript": "^4.7.4"
|
"typescript": "^4.7.4"
|
||||||
},
|
},
|
||||||
|
@ -1,10 +1,5 @@
|
|||||||
## Changelog
|
## Changelog
|
||||||
|
|
||||||
## 2.0.0
|
|
||||||
|
|
||||||
- no longer support woff/ttf format
|
|
||||||
- fix delete / delete-o icon
|
|
||||||
|
|
||||||
## 1.8.0
|
## 1.8.0
|
||||||
|
|
||||||
- add qq icon
|
- add qq icon
|
||||||
|
Binary file not shown.
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@vant/icons",
|
"name": "@vant/icons",
|
||||||
"version": "2.0.0",
|
"version": "1.8.0",
|
||||||
"description": "vant icons",
|
"description": "vant icons",
|
||||||
"main": "./src/config.js",
|
"main": "./src/config.js",
|
||||||
"types": "./src/config.d.ts",
|
"types": "./src/config.d.ts",
|
||||||
|
File diff suppressed because one or more lines are too long
1
packages/vant-icons/src/encode.less
Normal file
1
packages/vant-icons/src/encode.less
Normal file
@ -0,0 +1 @@
|
|||||||
|
// deprecated
|
@ -5,6 +5,10 @@
|
|||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-display: auto;
|
font-display: auto;
|
||||||
font-family: 'vant-icon';
|
font-family: 'vant-icon';
|
||||||
src: url('//at.alicdn.com/t/c/font_2553510_ovbl29ce9ud.woff2?t=1672541115585')
|
src: url('https://at.alicdn.com/t/font_2553510_iv4v8nulyz.woff2?t=1649083952952')
|
||||||
format('woff2');
|
format('woff2'),
|
||||||
|
url('https://at.alicdn.com/t/font_2553510_iv4v8nulyz.woff?t=1649083952952')
|
||||||
|
format('woff'),
|
||||||
|
url('https://at.alicdn.com/t/font_2553510_iv4v8nulyz.ttf?t=1649083952952')
|
||||||
|
format('truetype');
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@vant/popperjs",
|
"name": "@vant/popperjs",
|
||||||
"version": "1.3.0",
|
"version": "1.2.1",
|
||||||
"description": "Pre-compiled popperjs core",
|
"description": "Pre-compiled popperjs core",
|
||||||
"main": "dist/index.cjs.js",
|
"main": "dist/index.cjs.js",
|
||||||
"module": "dist/index.esm.mjs",
|
"module": "dist/index.esm.mjs",
|
||||||
@ -36,9 +36,11 @@
|
|||||||
"bugs": "https://github.com/vant-ui/vant/issues",
|
"bugs": "https://github.com/vant-ui/vant/issues",
|
||||||
"author": "chenjiahan",
|
"author": "chenjiahan",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@popperjs/core": "^2.11.6"
|
||||||
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@popperjs/core": "^2.11.6",
|
"esbuild": "^0.14.54",
|
||||||
"esbuild": "^0.16.10",
|
|
||||||
"release-it": "^15.4.1",
|
"release-it": "^15.4.1",
|
||||||
"typescript": "^4.8.2"
|
"typescript": "^4.8.2"
|
||||||
},
|
},
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { createPopper } from '@popperjs/core/lib/popper-lite';
|
import { createPopper } from '@popperjs/core/lib/popper-lite';
|
||||||
import offsetModifier from '@popperjs/core/lib/modifiers/offset';
|
import offsetModifier from '@popperjs/core/lib/modifiers/offset';
|
||||||
import type { Instance } from '@popperjs/core';
|
import type { Instance, Placement } from '@popperjs/core';
|
||||||
|
|
||||||
export { createPopper, offsetModifier };
|
export { createPopper, offsetModifier };
|
||||||
export type { Instance };
|
export type { Instance, Placement };
|
||||||
|
@ -1,13 +1,5 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
## v1.4.3
|
|
||||||
|
|
||||||
- improve `useEventListener` typing
|
|
||||||
|
|
||||||
## v1.4.2
|
|
||||||
|
|
||||||
- `useClickAway` support multiple targets
|
|
||||||
|
|
||||||
## v1.4.1
|
## v1.4.1
|
||||||
|
|
||||||
- Add `exports` field to package.json, support nuxt 3.
|
- Add `exports` field to package.json, support nuxt 3.
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@vant/use",
|
"name": "@vant/use",
|
||||||
"version": "1.4.3",
|
"version": "1.4.2",
|
||||||
"description": "Vant Composition API",
|
"description": "Vant Composition API",
|
||||||
"main": "dist/index.cjs.js",
|
"main": "dist/index.cjs.js",
|
||||||
"module": "dist/index.esm.mjs",
|
"module": "dist/index.esm.mjs",
|
||||||
@ -37,10 +37,10 @@
|
|||||||
"author": "chenjiahan",
|
"author": "chenjiahan",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"esbuild": "^0.16.10",
|
"esbuild": "^0.14.54",
|
||||||
"release-it": "^15.4.1",
|
"release-it": "^15.4.1",
|
||||||
"typescript": "^4.8.2",
|
"typescript": "^4.8.2",
|
||||||
"vue": "^3.2.45"
|
"vue": "^3.2.38"
|
||||||
},
|
},
|
||||||
"release-it": {
|
"release-it": {
|
||||||
"git": {
|
"git": {
|
||||||
|
4
packages/vant/.stylelintignore
Normal file
4
packages/vant/.stylelintignore
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
lib
|
||||||
|
*.tsx
|
@ -132,7 +132,7 @@ module.exports = {
|
|||||||
|
|
||||||
### Adapt to PC Browsers
|
### Adapt to PC Browsers
|
||||||
|
|
||||||
Vant is a mobile-first component library, if you want to use Vant in PC browsers, you can use the [@vant/touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) module. This module will automatically convert the mouse events of the PC browser into the touch events of the mobile browser.
|
Vant is a mobile-first component library, if you want to use Vant in PC browsers, you can use the [@vant/touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) module. This module will automatically convert the mouse events of the PC browser into the touch events of the mobile browser.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Install
|
# Install
|
||||||
|
@ -197,7 +197,7 @@ module.exports = {
|
|||||||
|
|
||||||
Vant 是一个面向移动端的组件库,因此默认只适配了移动端设备,这意味着组件只监听了移动端的 `touch` 事件,没有监听桌面端的 `mouse` 事件。
|
Vant 是一个面向移动端的组件库,因此默认只适配了移动端设备,这意味着组件只监听了移动端的 `touch` 事件,没有监听桌面端的 `mouse` 事件。
|
||||||
|
|
||||||
如果你需要在桌面端使用 Vant,可以引入我们提供的 [@vant/touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator),这个库会在桌面端自动将 `mouse` 事件转换成对应的 `touch` 事件,使得组件能够在桌面端使用。
|
如果你需要在桌面端使用 Vant,可以引入我们提供的 [@vant/touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator),这个库会在桌面端自动将 `mouse` 事件转换成对应的 `touch` 事件,使得组件能够在桌面端使用。
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# 安装模块
|
# 安装模块
|
||||||
|
@ -19,219 +19,6 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
|
|||||||
|
|
||||||
## Details
|
## Details
|
||||||
|
|
||||||
### [v4.0.6](https://github.com/vant-ui/vant/compare/v4.0.5...v4.0.6)
|
|
||||||
|
|
||||||
`2022-12-26`
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Fix missing declaration files caused by upgrading vite v4 [#11423](https://github.com/vant-ui/vant/issues/11423)
|
|
||||||
|
|
||||||
### [v4.0.5](https://github.com/vant-ui/vant/compare/v4.0.4...v4.0.5)
|
|
||||||
|
|
||||||
`2022-12-25`
|
|
||||||
|
|
||||||
**Feature**
|
|
||||||
|
|
||||||
- Locale: add Dutch lang [#11419](https://github.com/vant-ui/vant/issues/11419)
|
|
||||||
- Locale: add Mongolian lang [#11418](https://github.com/vant-ui/vant/issues/11418)
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Badge: fix badge offset of different position [#11400](https://github.com/vant-ui/vant/issues/11400)
|
|
||||||
- Form: filter no name field's value [#11410](https://github.com/vant-ui/vant/issues/11410)
|
|
||||||
- Picker: picker loading color in dark theme [#11405](https://github.com/vant-ui/vant/issues/11405)
|
|
||||||
|
|
||||||
### [v4.0.4](https://github.com/vant-ui/vant/compare/v4.0.3...v4.0.4)
|
|
||||||
|
|
||||||
`2022-12-23`
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Field: incorrect cursor position when value length exceeds maxlength or when formatter is used [#11360](https://github.com/vant-ui/vant/issues/11360)
|
|
||||||
- Image: load event missing params [#11406](https://github.com/vant-ui/vant/issues/11406)
|
|
||||||
|
|
||||||
### [v4.0.3](https://github.com/vant-ui/vant/compare/v4.0.2...v4.0.3)
|
|
||||||
|
|
||||||
`2022-12-13`
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Field: failed to dynamically set empty label [#11373](https://github.com/vant-ui/vant/issues/11373)
|
|
||||||
- ImagePreview: fix loading when previewing images [#11376](https://github.com/vant-ui/vant/issues/11376)
|
|
||||||
|
|
||||||
### [v4.0.2](https://github.com/vant-ui/vant/compare/v4.0.1...v4.0.2)
|
|
||||||
|
|
||||||
`2022-12-03`
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Field: incorrect cursor position when using formatter [#11348](https://github.com/vant-ui/vant/issues/11348)
|
|
||||||
- Image: load event not triggered in nuxt3 [128972](https://github.com/vant-ui/vant/commit/128972a75329d4b14028d00cd23dac66038e2d4c)
|
|
||||||
- NavBar: update placeholder height when window resized [#11351](https://github.com/vant-ui/vant/issues/11351)
|
|
||||||
|
|
||||||
### [v4.0.1](https://github.com/vant-ui/vant/compare/v4.0.0...v4.0.1)
|
|
||||||
|
|
||||||
`2022-12-01`
|
|
||||||
|
|
||||||
**Feature**
|
|
||||||
|
|
||||||
- Picker: add selectedIndexes to the confirm event [#11329](https://github.com/vant-ui/vant/issues/11329)
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Field: set selection range only when focused [#11333](https://github.com/vant-ui/vant/issues/11333)
|
|
||||||
|
|
||||||
### [v4.0.0](https://github.com/vant-ui/vant/compare/v4.0.0-rc.9...v4.0.0)
|
|
||||||
|
|
||||||
`2022-11-26`
|
|
||||||
|
|
||||||
**Feature**
|
|
||||||
|
|
||||||
- List: add disabled prop [#11307](https://github.com/vant-ui/vant/issues/11307)
|
|
||||||
- BackTop: allow dynamically set target prop [#11311](https://github.com/vant-ui/vant/issues/11311)
|
|
||||||
- BackTop: allow using css var to custom position [#11312](https://github.com/vant-ui/vant/issues/11312)
|
|
||||||
- BackTop: rename visibility-height prop to offset [#11309](https://github.com/vant-ui/vant/issues/11309)
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Field: keep selection position after updating value [#11308](https://github.com/vant-ui/vant/issues/11308)
|
|
||||||
|
|
||||||
### [v4.0.0-rc.9](https://github.com/vant-ui/vant/compare/v4.0.0-rc.8...v4.0.0-rc.9)
|
|
||||||
|
|
||||||
`2022-11-24`
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Cell: arrow-direction assignment right is invalid [#11279](https://github.com/vant-ui/vant/issues/11279)
|
|
||||||
- Style: body normalize not work [#11287](https://github.com/vant-ui/vant/issues/11287)
|
|
||||||
|
|
||||||
### [v4.0.0-rc.8](https://github.com/vant-ui/vant/compare/v4.0.0-rc.7...v4.0.0-rc.8)
|
|
||||||
|
|
||||||
`2022-11-20`
|
|
||||||
|
|
||||||
**Feature**
|
|
||||||
|
|
||||||
- add new BackTop component, note that the API is not stable yet, we may change the API before 4.0 release. [#11236](https://github.com/vant-ui/vant/issues/11236)
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- DropdownItem: should inherit attrs when using teleport [#11273](https://github.com/vant-ui/vant/issues/11273)
|
|
||||||
- List: incorrect initial loading value [#11275](https://github.com/vant-ui/vant/issues/11275)
|
|
||||||
- NumberKeyboard: should inherit attrs when using teleport [#11274](https://github.com/vant-ui/vant/issues/11274)
|
|
||||||
|
|
||||||
### [v4.0.0-rc.7](https://github.com/vant-ui/vant/compare/v4.0.0-rc.6...v4.0.0-rc.7)
|
|
||||||
|
|
||||||
`2022-11-13`
|
|
||||||
|
|
||||||
**New Component**
|
|
||||||
|
|
||||||
- Add new SkeletonAvatar、SkeletonTitle、SkeletonImage、SkeletonParagraph components [#11173](https://github.com/vant-ui/vant/issues/11173)
|
|
||||||
|
|
||||||
**Feature**
|
|
||||||
|
|
||||||
- ImagePreview: add long-press event [#11252](https://github.com/vant-ui/vant/issues/11252)
|
|
||||||
- Popover: support uncontrolled mode [#11244](https://github.com/vant-ui/vant/issues/11244)
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- ActionSheet: fix that close is invalid without title [#11213](https://github.com/vant-ui/vant/issues/11213)
|
|
||||||
- DatePicker: only throw error in development [#11248](https://github.com/vant-ui/vant/issues/11248)
|
|
||||||
- Lazyload: lazy-image h is not a function [#11229](https://github.com/vant-ui/vant/issues/11229)
|
|
||||||
- Picker: correct v-model when emit confirm event [#11194](https://github.com/vant-ui/vant/issues/11194)
|
|
||||||
- Picker: empty column will cause error [#11249](https://github.com/vant-ui/vant/issues/11249)
|
|
||||||
- Uploader: chooseFile is invalid when show-upload is false [#11218](https://github.com/vant-ui/vant/issues/11218)
|
|
||||||
|
|
||||||
### [v4.0.0-rc.6](https://github.com/vant-ui/vant/compare/v4.0.0-rc.5...v4.0.0-rc.6)
|
|
||||||
|
|
||||||
`2022-10-23`
|
|
||||||
|
|
||||||
**Feature**
|
|
||||||
|
|
||||||
- Calendar: add params for subtitle slot [#11168](https://github.com/vant-ui/vant/issues/11168)
|
|
||||||
- Cell: add tag prop [#11139](https://github.com/vant-ui/vant/issues/11139)
|
|
||||||
- ImagePreview: add image slot [#11133](https://github.com/vant-ui/vant/issues/11133)
|
|
||||||
- Toast: add wordBreak prop [#11147](https://github.com/vant-ui/vant/issues/11147)
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- CouponList: fix the style of coupon checkbox [#11153](https://github.com/vant-ui/vant/issues/11153)
|
|
||||||
- CouponList: incorrect field style [#11155](https://github.com/vant-ui/vant/issues/11155)
|
|
||||||
- Swipe: failed to render when inside popup [#11162](https://github.com/vant-ui/vant/issues/11162)
|
|
||||||
|
|
||||||
### [v4.0.0-rc.5](https://github.com/vant-ui/vant/compare/v4.0.0-rc.4...v4.0.0-rc.5)
|
|
||||||
|
|
||||||
`2022-10-07`
|
|
||||||
|
|
||||||
**Feature**
|
|
||||||
|
|
||||||
- Field: support label-position top [#11102](https://github.com/vant-ui/vant/issues/11102)
|
|
||||||
- Loading: add icon slot [#11109](https://github.com/vant-ui/vant/issues/11109)
|
|
||||||
- NavBar: add clickable prop [#11048](https://github.com/vant-ui/vant/issues/11048)
|
|
||||||
- Stepper: add auto-fixed prop [#11071](https://github.com/vant-ui/vant/issues/11071)
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- DatePicker: format value when exceed max date [#11122](https://github.com/vant-ui/vant/issues/11122)
|
|
||||||
- Tabs: incorrect nav scroll animation in some cases [#11116](https://github.com/vant-ui/vant/issues/11116)
|
|
||||||
- Tabs: scroll position when using nav-bottom slot [#11115](https://github.com/vant-ui/vant/issues/11115)
|
|
||||||
|
|
||||||
### [v4.0.0-rc.4](https://github.com/vant-ui/vant/compare/v4.0.0-rc.3...v4.0.0-rc.4)
|
|
||||||
|
|
||||||
`2022-09-25`
|
|
||||||
|
|
||||||
**Feature**
|
|
||||||
|
|
||||||
- Field: add message param to 'end-validate' method [#11080](https://github.com/vant-ui/vant/issues/11080)
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Tabs: incorrect scroll position in some cases [#11085](https://github.com/vant-ui/vant/issues/11085)
|
|
||||||
- Tabs: incorrect scroll position when inited [#11059](https://github.com/vant-ui/vant/issues/11059)
|
|
||||||
|
|
||||||
### [v4.0.0-rc.3](https://github.com/vant-ui/vant/compare/v4.0.0-rc.2...v4.0.0-rc.3)
|
|
||||||
|
|
||||||
`2022-09-12`
|
|
||||||
|
|
||||||
**Feature**
|
|
||||||
|
|
||||||
- ConfigProvider: add ConfigProviderThemeVars type [#11034](https://github.com/vant-ui/vant/issues/11034)
|
|
||||||
- Notify: add z-index prop [#11032](https://github.com/vant-ui/vant/issues/11032)
|
|
||||||
- remove popperjs to reduce install size [#11030](https://github.com/vant-ui/vant/issues/11030)
|
|
||||||
|
|
||||||
**Types**
|
|
||||||
|
|
||||||
- Toast: fix missing global components type [#11033](https://github.com/vant-ui/vant/issues/11033)
|
|
||||||
|
|
||||||
### [v4.0.0-rc.2](https://github.com/vant-ui/vant/compare/v4.0.0-rc.1...v4.0.0-rc.2)
|
|
||||||
|
|
||||||
`2022-09-11`
|
|
||||||
|
|
||||||
**Breaking Changes**
|
|
||||||
|
|
||||||
- attach css variables to :root element [#11026](https://github.com/vant-ui/vant/issues/11026)
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Dialog: incorrect transform behavior [#11028](https://github.com/vant-ui/vant/issues/11028)
|
|
||||||
- Empty: fix opacity in dark mode [#11027](https://github.com/vant-ui/vant/issues/11027)
|
|
||||||
|
|
||||||
### [v4.0.0-rc.1](https://github.com/vant-ui/vant/compare/v4.0.0-rc.0...v4.0.0-rc.1)
|
|
||||||
|
|
||||||
`2022-09-10`
|
|
||||||
|
|
||||||
**Feature**
|
|
||||||
|
|
||||||
- export props of all components [#11024](https://github.com/vant-ui/vant/issues/11024)
|
|
||||||
- Dialog: message-align can be justify [#11014](https://github.com/vant-ui/vant/issues/11014)
|
|
||||||
- Image: add block prop [#11022](https://github.com/vant-ui/vant/issues/11022)
|
|
||||||
- Toast: add message slot [#11018](https://github.com/vant-ui/vant/issues/11018)
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Picker: failed to update value in some cases [#11009](https://github.com/vant-ui/vant/issues/11009)
|
|
||||||
- Locale: avoid getting unexpected value [#11010](https://github.com/vant-ui/vant/issues/11010)
|
|
||||||
|
|
||||||
### [v4.0.0-rc.0](https://github.com/vant-ui/vant/compare/v3.6.2...v4.0.0-rc.0)
|
### [v4.0.0-rc.0](https://github.com/vant-ui/vant/compare/v3.6.2...v4.0.0-rc.0)
|
||||||
|
|
||||||
`2022-09-04`
|
`2022-09-04`
|
||||||
|
@ -19,221 +19,6 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
|||||||
|
|
||||||
## 更新内容
|
## 更新内容
|
||||||
|
|
||||||
### [v4.0.6](https://github.com/vant-ui/vant/compare/v4.0.5...v4.0.6)
|
|
||||||
|
|
||||||
`2022-12-26`
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- 修复升级 vite v4 导致构建产物不全的问题 [#11423](https://github.com/vant-ui/vant/issues/11423)
|
|
||||||
|
|
||||||
### [v4.0.5](https://github.com/vant-ui/vant/compare/v4.0.4...v4.0.5)
|
|
||||||
|
|
||||||
`2022-12-25`
|
|
||||||
|
|
||||||
**Feature**
|
|
||||||
|
|
||||||
- Locale: 新增 Dutch 荷兰语 [#11419](https://github.com/vant-ui/vant/issues/11419)
|
|
||||||
- Locale: 新增 Mongolian 蒙古语 [#11418](https://github.com/vant-ui/vant/issues/11418)
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Badge: 修复 offset 属性部分情况下导致样式错误的问题 [#11400](https://github.com/vant-ui/vant/issues/11400)
|
|
||||||
- Form: 修复事件参数中可能出现 key 为 undefined 的问题 [#11410](https://github.com/vant-ui/vant/issues/11410)
|
|
||||||
- Picker: 修复深色模式下加载状态样式错误的问题 [#11405](https://github.com/vant-ui/vant/issues/11405)
|
|
||||||
|
|
||||||
### [v4.0.4](https://github.com/vant-ui/vant/compare/v4.0.3...v4.0.4)
|
|
||||||
|
|
||||||
`2022-12-23`
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Field: 修复使用 formatter 时光标位置可能错误的问题 [#11360](https://github.com/vant-ui/vant/issues/11360)
|
|
||||||
- Image: 修复 load 事件未正确触发导致 ImagePreview 报错的问题 [#11406](https://github.com/vant-ui/vant/issues/11406)
|
|
||||||
|
|
||||||
### [v4.0.3](https://github.com/vant-ui/vant/compare/v4.0.2...v4.0.3)
|
|
||||||
|
|
||||||
`2022-12-13`
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Field: 修复动态设置空的 label 不生效的问题 [#11373](https://github.com/vant-ui/vant/issues/11373)
|
|
||||||
- ImagePreview: 修复图片可能加载失败的问题 [#11376](https://github.com/vant-ui/vant/issues/11376)
|
|
||||||
|
|
||||||
### [v4.0.2](https://github.com/vant-ui/vant/compare/v4.0.1...v4.0.2)
|
|
||||||
|
|
||||||
`2022-12-03`
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Field: 修复使用 formatter 时光标位置错误的问题 [#11348](https://github.com/vant-ui/vant/issues/11348)
|
|
||||||
- Image: 修复在 Nuxt 3 下图片可能无法展示的问题 [128972](https://github.com/vant-ui/vant/commit/128972a75329d4b14028d00cd23dac66038e2d4c)
|
|
||||||
- NavBar: 修复屏幕旋转时 placeholder 未自动适配高度的问题 [#11351](https://github.com/vant-ui/vant/issues/11351)
|
|
||||||
|
|
||||||
### [v4.0.1](https://github.com/vant-ui/vant/compare/v4.0.0...v4.0.1)
|
|
||||||
|
|
||||||
`2022-12-01`
|
|
||||||
|
|
||||||
**Feature**
|
|
||||||
|
|
||||||
- Picker: 新增 selectedIndexes 作为事件入参 [#11329](https://github.com/vant-ui/vant/issues/11329)
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Field: 修复未选中时修改绑定的值会导致键盘弹出的问题 [#11333](https://github.com/vant-ui/vant/issues/11333)
|
|
||||||
|
|
||||||
### [v4.0.0](https://github.com/vant-ui/vant/compare/v4.0.0-rc.9...v4.0.0)
|
|
||||||
|
|
||||||
`2022-11-26`
|
|
||||||
|
|
||||||
> 完整内容请移步:[「4.0 更新介绍」](https://vant-ui.github.io/vant/#/zh-CN/release-note-v4)
|
|
||||||
|
|
||||||
**Feature**
|
|
||||||
|
|
||||||
- List: 新增 disabled 属性 [#11307](https://github.com/vant-ui/vant/issues/11307)
|
|
||||||
- BackTop: 支持动态设置 target 属性 [#11311](https://github.com/vant-ui/vant/issues/11311)
|
|
||||||
- BackTop: 支持通过 CSS 变量修改组件位置 [#11312](https://github.com/vant-ui/vant/issues/11312)
|
|
||||||
- BackTop: 重命名 visibility-height 属性为 offset [#11309](https://github.com/vant-ui/vant/issues/11309)
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Field: 修复格式化值后,光标位置错误的问题 [#11308](https://github.com/vant-ui/vant/issues/11308)
|
|
||||||
|
|
||||||
### [v4.0.0-rc.9](https://github.com/vant-ui/vant/compare/v4.0.0-rc.8...v4.0.0-rc.9)
|
|
||||||
|
|
||||||
`2022-11-24`
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Cell: 修复 arrow-direction 设置为 right 不显示的问题 [#11279](https://github.com/vant-ui/vant/issues/11279)
|
|
||||||
- Style: 修复 body 标签上的 normalize 样式未生效的问题 [#11287](https://github.com/vant-ui/vant/issues/11287)
|
|
||||||
|
|
||||||
### [v4.0.0-rc.8](https://github.com/vant-ui/vant/compare/v4.0.0-rc.7...v4.0.0-rc.8)
|
|
||||||
|
|
||||||
`2022-11-20`
|
|
||||||
|
|
||||||
**Feature**
|
|
||||||
|
|
||||||
- 新增 BackTop 回到顶部组件,注意该新组件的 API 尚未稳定,在 4.0 正式版发布前仍可能产生 breaking change [#11236](https://github.com/vant-ui/vant/issues/11236)
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- DropdownItem: 修复使用 teleport 时无法设置 attr 的问题 [#11273](https://github.com/vant-ui/vant/issues/11273)
|
|
||||||
- List: 修复初始的 loading 值为 true 时加载错误的问题 [#11275](https://github.com/vant-ui/vant/issues/11275)
|
|
||||||
- NumberKeyboard: 修复使用 teleport 时无法设置 attr 的问题 [#11274](https://github.com/vant-ui/vant/issues/11274)
|
|
||||||
|
|
||||||
### [v4.0.0-rc.7](https://github.com/vant-ui/vant/compare/v4.0.0-rc.6...v4.0.0-rc.7)
|
|
||||||
|
|
||||||
`2022-11-13`
|
|
||||||
|
|
||||||
**New Component**
|
|
||||||
|
|
||||||
- 新增 SkeletonAvatar、SkeletonTitle、SkeletonImage、SkeletonParagraph 组件 [#11173](https://github.com/vant-ui/vant/issues/11173)
|
|
||||||
|
|
||||||
**Feature**
|
|
||||||
|
|
||||||
- ImagePreview: 新增 long-press 事件 [#11252](https://github.com/vant-ui/vant/issues/11252)
|
|
||||||
- Popover: 支持非受控模式 [#11244](https://github.com/vant-ui/vant/issues/11244)
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- ActionSheet: 修复标题为空时取消按钮层级错误的问题 [#11213](https://github.com/vant-ui/vant/issues/11213)
|
|
||||||
- DatePicker: 在生产环境下不再抛出开发错误提示 [#11248](https://github.com/vant-ui/vant/issues/11248)
|
|
||||||
- Lazyload: 修复使用 lazy-image 时报错 h is not a function 的问题 [#11229](https://github.com/vant-ui/vant/issues/11229)
|
|
||||||
- Picker: 修复抛出 confirm 事件时 v-model 未正确更新的问题 [#11194](https://github.com/vant-ui/vant/issues/11194)
|
|
||||||
- Picker: 修复 column 为空时操作报错的问题 [#11249](https://github.com/vant-ui/vant/issues/11249)
|
|
||||||
- Uploader: 修复 show-upload 为 false 时 chooseFile 无法调用的问题 [#11218](https://github.com/vant-ui/vant/issues/11218)
|
|
||||||
|
|
||||||
### [v4.0.0-rc.6](https://github.com/vant-ui/vant/compare/v4.0.0-rc.5...v4.0.0-rc.6)
|
|
||||||
|
|
||||||
`2022-10-23`
|
|
||||||
|
|
||||||
**Feature**
|
|
||||||
|
|
||||||
- Calendar: subtitle 插槽新增 text 和 date 入参 [#11168](https://github.com/vant-ui/vant/issues/11168)
|
|
||||||
- Cell: 新增 tag 属性 [#11139](https://github.com/vant-ui/vant/issues/11139)
|
|
||||||
- ImagePreview: 新增 image 插槽 [#11133](https://github.com/vant-ui/vant/issues/11133)
|
|
||||||
- Toast: 新增 wordBreak 选项 [#11147](https://github.com/vant-ui/vant/issues/11147)
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- CouponList: 修复 coupon 位置错误的问题 [#11153](https://github.com/vant-ui/vant/issues/11153)
|
|
||||||
- CouponList: 修复输入框样式错误的问题 [#11155](https://github.com/vant-ui/vant/issues/11155)
|
|
||||||
- Swipe: 修复在 Popup 内时个别情况下渲染错误的问题 [#11162](https://github.com/vant-ui/vant/issues/11162)
|
|
||||||
|
|
||||||
### [v4.0.0-rc.5](https://github.com/vant-ui/vant/compare/v4.0.0-rc.4...v4.0.0-rc.5)
|
|
||||||
|
|
||||||
`2022-10-07`
|
|
||||||
|
|
||||||
**Feature**
|
|
||||||
|
|
||||||
- Field: 支持将 label-position 设置为 top [#11102](https://github.com/vant-ui/vant/issues/11102)
|
|
||||||
- Loading: 新增 icon 插槽 [#11109](https://github.com/vant-ui/vant/issues/11109)
|
|
||||||
- NavBar: 新增 clickable 属性 [#11048](https://github.com/vant-ui/vant/issues/11048)
|
|
||||||
- Stepper: 新增 auto-fixed 属性 [#11071](https://github.com/vant-ui/vant/issues/11071)
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- DatePicker: 修复日期超出 maxDate 时格式化不正确的问题 [#11122](https://github.com/vant-ui/vant/issues/11122)
|
|
||||||
- Tabs: 修复开启 scrollspy 时个别情况下标题栏滚动位置错误的问题 [#11116](https://github.com/vant-ui/vant/issues/11116)
|
|
||||||
- Tabs: 修复开启 scrollspy 时 nav-bottom 插槽遮挡内容的问题 [#11115](https://github.com/vant-ui/vant/issues/11115)
|
|
||||||
|
|
||||||
### [v4.0.0-rc.4](https://github.com/vant-ui/vant/compare/v4.0.0-rc.3...v4.0.0-rc.4)
|
|
||||||
|
|
||||||
`2022-09-25`
|
|
||||||
|
|
||||||
**Feature**
|
|
||||||
|
|
||||||
- Field: end-validate 事件新增 message 参数 [#11080](https://github.com/vant-ui/vant/issues/11080)
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Tabs: 修复个别情况下页面滚动位置错误的问题 [#11085](https://github.com/vant-ui/vant/issues/11085)
|
|
||||||
- Tabs: 修复初始化时菜单横向滚动位置错误的问题 [#11059](https://github.com/vant-ui/vant/issues/11059)
|
|
||||||
|
|
||||||
### [v4.0.0-rc.3](https://github.com/vant-ui/vant/compare/v4.0.0-rc.2...v4.0.0-rc.3)
|
|
||||||
|
|
||||||
`2022-09-12`
|
|
||||||
|
|
||||||
**Feature**
|
|
||||||
|
|
||||||
- ConfigProvider: 新增 ConfigProviderThemeVars 类型 [#11034](https://github.com/vant-ui/vant/issues/11034)
|
|
||||||
- Notify: 新增 z-index 属性 [#11032](https://github.com/vant-ui/vant/issues/11032)
|
|
||||||
- 移除 `@popperjs/core` 依赖,减少安装体积 1.6MB [#11030](https://github.com/vant-ui/vant/issues/11030)
|
|
||||||
|
|
||||||
**Types**
|
|
||||||
|
|
||||||
- Toast: 修复缺少全局类型定义的问题 [#11033](https://github.com/vant-ui/vant/issues/11033)
|
|
||||||
|
|
||||||
### [v4.0.0-rc.2](https://github.com/vant-ui/vant/compare/v4.0.0-rc.1...v4.0.0-rc.2)
|
|
||||||
|
|
||||||
`2022-09-11`
|
|
||||||
|
|
||||||
**Breaking Changes**
|
|
||||||
|
|
||||||
- 调整了所有 CSS 变量的挂载位置,由 `body` 节点调整回 `:root` 节点,调整后与 Vant v3 版本保持一致,以便于 v3 项目更平滑地升级到 v4 版本。 [#11026](https://github.com/vant-ui/vant/issues/11026)
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Dialog: 修复过渡动画异常的问题 [#11028](https://github.com/vant-ui/vant/issues/11028)
|
|
||||||
- Empty: 修复深色模式下亮度过高的问题 [#11027](https://github.com/vant-ui/vant/issues/11027)
|
|
||||||
|
|
||||||
### [v4.0.0-rc.1](https://github.com/vant-ui/vant/compare/v4.0.0-rc.0...v4.0.0-rc.1)
|
|
||||||
|
|
||||||
`2022-09-10`
|
|
||||||
|
|
||||||
**Feature**
|
|
||||||
|
|
||||||
- 导出所有组件的 props,方便进行二次封装 [#11024](https://github.com/vant-ui/vant/issues/11024)
|
|
||||||
- Dialog: message-align 属性支持设置为 justify [#11014](https://github.com/vant-ui/vant/issues/11014)
|
|
||||||
- Image: 新增 block 属性 [#11022](https://github.com/vant-ui/vant/issues/11022)
|
|
||||||
- Toast: 新增 message 插槽 [#11018](https://github.com/vant-ui/vant/issues/11018)
|
|
||||||
|
|
||||||
**Bug Fixes**
|
|
||||||
|
|
||||||
- Picker: 修复部分情况下未正确更新选中值的问题 [#11009](https://github.com/vant-ui/vant/issues/11009)
|
|
||||||
- Locale: 修复读取 i18n 文案时可能获取到 JS 原生方法的问题 [#11010](https://github.com/vant-ui/vant/issues/11010)
|
|
||||||
|
|
||||||
### [v4.0.0-rc.0](https://github.com/vant-ui/vant/compare/v3.6.2...v4.0.0-rc.0)
|
### [v4.0.0-rc.0](https://github.com/vant-ui/vant/compare/v3.6.2...v4.0.0-rc.0)
|
||||||
|
|
||||||
`2022-09-04`
|
`2022-09-04`
|
||||||
|
@ -38,7 +38,7 @@ pnpm dev
|
|||||||
|
|
||||||
仓库的不同分支对应不同的 Vant 版本,请切换到对应分支进行开发:
|
仓库的不同分支对应不同的 Vant 版本,请切换到对应分支进行开发:
|
||||||
|
|
||||||
- main 分支对应 Vant 4 版本,适用于 Vue 3
|
- dev 分支对应 Vant 4 版本,适用于 Vue 3
|
||||||
- 3.x 分支对应 Vant 3 版本 ,适用于 Vue 3
|
- 3.x 分支对应 Vant 3 版本 ,适用于 Vue 3
|
||||||
- 2.x 分支对应 Vant 2 版本,适用于 Vue 2
|
- 2.x 分支对应 Vant 2 版本,适用于 Vue 2
|
||||||
|
|
||||||
@ -106,7 +106,7 @@ src
|
|||||||
如果你是第一次在 GitHub 上提 Pull Request ,可以阅读下面这两篇文章来学习:
|
如果你是第一次在 GitHub 上提 Pull Request ,可以阅读下面这两篇文章来学习:
|
||||||
|
|
||||||
- [如何优雅地在 GitHub 上贡献代码](https://segmentfault.com/a/1190000000736629)
|
- [如何优雅地在 GitHub 上贡献代码](https://segmentfault.com/a/1190000000736629)
|
||||||
- [第一次参与开源](https://github.com/firstcontributions/first-contributions/blob/main/translations/README.zh-cn.md)
|
- [第一次参与开源](https://github.com/firstcontributions/first-contributions/blob/master/translations/README.chs.md)
|
||||||
|
|
||||||
### Pull Request 规范
|
### Pull Request 规范
|
||||||
|
|
||||||
@ -119,8 +119,8 @@ src
|
|||||||
### Pull Request 流程
|
### Pull Request 流程
|
||||||
|
|
||||||
1. fork 主仓库,如果已经 fork 过,请同步主仓库的最新代码。
|
1. fork 主仓库,如果已经 fork 过,请同步主仓库的最新代码。
|
||||||
2. 基于 fork 后仓库的 main 分支新建一个分支,比如 `feature/button_color`。
|
2. 基于 fork 后仓库的 dev 分支新建一个分支,比如 `feature/button_color`。
|
||||||
3. 在新分支上进行开发,开发完成后,提 Pull Request 到主仓库的 main 分支。
|
3. 在新分支上进行开发,开发完成后,提 Pull Request 到主仓库的 dev 分支。
|
||||||
4. Pull Request 会在 Review 通过后被合并到主仓库。
|
4. Pull Request 会在 Review 通过后被合并到主仓库。
|
||||||
5. 等待 Vant 发布新版本,一般是每周一次。
|
5. 等待 Vant 发布新版本,一般是每周一次。
|
||||||
|
|
||||||
@ -135,9 +135,9 @@ git remote add upstream git@github.com:vant-ui/vant.git
|
|||||||
# 拉取主仓库最新代码
|
# 拉取主仓库最新代码
|
||||||
git fetch upstream
|
git fetch upstream
|
||||||
|
|
||||||
# 切换至 main 分支
|
# 切换至 dev 分支
|
||||||
git checkout main
|
git checkout dev
|
||||||
|
|
||||||
# 合并主仓库代码
|
# 合并主仓库代码
|
||||||
git merge upstream/main
|
git merge upstream/dev
|
||||||
```
|
```
|
||||||
|
@ -22,7 +22,7 @@ Contains color specifications, font specifications, and component design specifi
|
|||||||
|
|
||||||
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/tab_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
|
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/tab_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
|
||||||
|
|
||||||
<a class="design-download" href="https://github.com/vant-ui/vant/blob/main/packages/vant/docs/assets/design.sketch?raw=true">Download</a>
|
<a class="design-download" href="https://github.com/vant-ui/vant/blob/dev/packages/vant/docs/assets/design.sketch?raw=true">Download</a>
|
||||||
|
|
||||||
### Icons (Sketch)
|
### Icons (Sketch)
|
||||||
|
|
||||||
@ -30,7 +30,7 @@ Contains icon library resources.
|
|||||||
|
|
||||||
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/design-icons-0321.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
|
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/design-icons-0321.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
|
||||||
|
|
||||||
<a class="design-download" href="https://github.com/vant-ui/vant/blob/main/packages/vant-icons/assets/icons.sketch?raw=true">Download</a>
|
<a class="design-download" href="https://github.com/vant-ui/vant/blob/dev/packages/vant-icons/assets/icons.sketch?raw=true">Download</a>
|
||||||
|
|
||||||
### Axure
|
### Axure
|
||||||
|
|
||||||
|
@ -22,7 +22,7 @@
|
|||||||
|
|
||||||
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/tab_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
|
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/tab_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
|
||||||
|
|
||||||
<a class="design-download" href="https://github.com/vant-ui/vant/blob/main/packages/vant/docs/assets/design.sketch?raw=true">下载</a>
|
<a class="design-download" href="https://github.com/vant-ui/vant/blob/dev/packages/vant/docs/assets/design.sketch?raw=true">下载</a>
|
||||||
|
|
||||||
### 图标设计稿(Sketch)
|
### 图标设计稿(Sketch)
|
||||||
|
|
||||||
@ -30,7 +30,7 @@
|
|||||||
|
|
||||||
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/design-icons-0321.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
|
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/design-icons-0321.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
|
||||||
|
|
||||||
<a class="design-download" href="https://github.com/vant-ui/vant/blob/main/packages/vant-icons/assets/icons.sketch?raw=true">下载</a>
|
<a class="design-download" href="https://github.com/vant-ui/vant/blob/dev/packages/vant-icons/assets/icons.sketch?raw=true">下载</a>
|
||||||
|
|
||||||
#### 在线资源
|
#### 在线资源
|
||||||
|
|
||||||
|
@ -68,12 +68,6 @@ Select 是桌面端常用的组件,但它的交互形式不适合移动端。
|
|||||||
|
|
||||||
在移动端,我们推荐使用 [Picker 选择器组件](#/zh-CN/picker) 作为代替。
|
在移动端,我们推荐使用 [Picker 选择器组件](#/zh-CN/picker) 作为代替。
|
||||||
|
|
||||||
### 是否支持在 uni-app 中使用?
|
|
||||||
|
|
||||||
Vant 所有组件都是基于 Vue 框架实现的,没有针对 uni-app 进行适配,因此不保证各个组件在 uni-app 下的可用性。
|
|
||||||
|
|
||||||
如果你在 uni-app 中使用 Vant 遇到问题,建议向 uni-app 进行反馈。
|
|
||||||
|
|
||||||
### 部分组件无法在桌面端进行操作?
|
### 部分组件无法在桌面端进行操作?
|
||||||
|
|
||||||
参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。
|
参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。
|
||||||
|
@ -19,8 +19,7 @@
|
|||||||
- 🍭 Support Tree Shaking
|
- 🍭 Support Tree Shaking
|
||||||
- 🍭 Support Custom Theme
|
- 🍭 Support Custom Theme
|
||||||
- 🍭 Support Accessibility (still improving)
|
- 🍭 Support Accessibility (still improving)
|
||||||
- 🍭 Support Dark Mode
|
- 🍭 Support Dark Mode (Requires upgrade to [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/en-US/config-provider))
|
||||||
- 🍭 Support Nuxt 3
|
|
||||||
- 🍭 Support SSR
|
- 🍭 Support SSR
|
||||||
- 🌍 Support i18n, built-in 20+ languages
|
- 🌍 Support i18n, built-in 20+ languages
|
||||||
|
|
||||||
@ -34,17 +33,6 @@ Vant 2 supports modern browsers and Android >= 4.0、iOS >= 8.0.
|
|||||||
|
|
||||||
Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).
|
Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).
|
||||||
|
|
||||||
### Maintenance Status
|
|
||||||
|
|
||||||
The current maintenance status of each version of Vant is as follows:
|
|
||||||
|
|
||||||
| Name | Framework | Release | Latest Version | Status |
|
|
||||||
| --- | --- | --- | --- | --- |
|
|
||||||
| Vant 4 | Vue 3 | `2022.12` |  | Under active development |
|
|
||||||
| Vant 3 | Vue 3 | `2020.12` |  | Bugfix only |
|
|
||||||
| Vant 2 | Vue 2 | `2019.06` |  | Bugfix only |
|
|
||||||
| Vant 1 | Vue 2 | `2018.03` |  | End of life |
|
|
||||||
|
|
||||||
## Links
|
## Links
|
||||||
|
|
||||||
### Official Ecosystem
|
### Official Ecosystem
|
||||||
@ -53,15 +41,16 @@ The current maintenance status of each version of Vant is as follows:
|
|||||||
| --- | --- |
|
| --- | --- |
|
||||||
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | WeChat MiniProgram UI |
|
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | WeChat MiniProgram UI |
|
||||||
| [vant-demo](https://github.com/vant-ui/vant-demo) | Collection of Vant demos |
|
| [vant-demo](https://github.com/vant-ui/vant-demo) | Collection of Vant demos |
|
||||||
| [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | Scaffold for UI library |
|
| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
|
||||||
| [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant icons |
|
| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant icons |
|
||||||
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | Using vant in desktop browsers |
|
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
|
||||||
|
|
||||||
### Community Ecosystem
|
### Community Ecosystem
|
||||||
|
|
||||||
| Project | Description |
|
| Project | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components based on Vant |
|
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components based on Vant |
|
||||||
|
| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | React Mobile UI Components Library |
|
||||||
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Alipay MiniProgram UI |
|
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Alipay MiniProgram UI |
|
||||||
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
|
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
|
||||||
| [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |
|
| [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |
|
||||||
@ -72,7 +61,7 @@ The current maintenance status of each version of Vant is as follows:
|
|||||||
|
|
||||||
- [Feedback](https://github.com/vant-ui/vant/issues)
|
- [Feedback](https://github.com/vant-ui/vant/issues)
|
||||||
- [Changelog](#/en-US/changelog)
|
- [Changelog](#/en-US/changelog)
|
||||||
- [Discussions](https://github.com/vant-ui/vant/discussions)
|
- [Gitter](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
|
||||||
|
|
||||||
## Contribution
|
## Contribution
|
||||||
|
|
||||||
@ -94,7 +83,7 @@ Thanks to the following friends for their contributions to Vant:
|
|||||||
|
|
||||||
### Contribution Guide
|
### Contribution Guide
|
||||||
|
|
||||||
Please make sure to read the [Contributing Guide](https://github.com/vant-ui/vant/blob/main/.github/CONTRIBUTING.md) before making a pull request.
|
Please make sure to read the [Contributing Guide](https://github.com/vant-ui/vant/blob/dev/.github/CONTRIBUTING.md) before making a pull request.
|
||||||
|
|
||||||
### LICENSE
|
### LICENSE
|
||||||
|
|
||||||
|
@ -25,8 +25,7 @@ Vant 是一个**轻量、可靠的移动端组件库**,于 2017 年开源。
|
|||||||
- 🍭 支持主题定制,内置 700+ 个主题变量
|
- 🍭 支持主题定制,内置 700+ 个主题变量
|
||||||
- 🍭 支持按需引入和 Tree Shaking
|
- 🍭 支持按需引入和 Tree Shaking
|
||||||
- 🍭 支持无障碍访问(持续改进中)
|
- 🍭 支持无障碍访问(持续改进中)
|
||||||
- 🍭 支持深色模式
|
- 🍭 支持深色模式(从 [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/zh-CN/config-provider) 开始支持)
|
||||||
- 🍭 支持 Nuxt 3
|
|
||||||
- 🍭 支持服务器端渲染
|
- 🍭 支持服务器端渲染
|
||||||
- 🌍 支持国际化,内置 20+ 种语言包
|
- 🌍 支持国际化,内置 20+ 种语言包
|
||||||
|
|
||||||
@ -44,17 +43,6 @@ Vant 2 支持现代浏览器以及 Android >= 4.0、iOS >= 8.0。
|
|||||||
|
|
||||||
Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一致)。
|
Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一致)。
|
||||||
|
|
||||||
### 维护状态
|
|
||||||
|
|
||||||
目前 Vant 各个版本的维护状态如下:
|
|
||||||
|
|
||||||
| 名称 | 框架 | 发布时间 | 最新版 | 维护状态 |
|
|
||||||
| --- | --- | --- | --- | --- |
|
|
||||||
| Vant 4 | Vue 3 | `2022.12` |  | 持续迭代新功能 |
|
|
||||||
| Vant 3 | Vue 3 | `2020.12` |  | 停止迭代新功能,bug 会被处理和修复 |
|
|
||||||
| Vant 2 | Vue 2 | `2019.06` |  | 停止迭代新功能,重要 bug 会被处理和修复 |
|
|
||||||
| Vant 1 | Vue 2 | `2018.03` |  | 停止维护,不再接受 PR |
|
|
||||||
|
|
||||||
## 链接
|
## 链接
|
||||||
|
|
||||||
### 官方生态
|
### 官方生态
|
||||||
@ -65,9 +53,9 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
|
|||||||
| --- | --- |
|
| --- | --- |
|
||||||
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | Vant 微信小程序版 |
|
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | Vant 微信小程序版 |
|
||||||
| [vant-demo](https://github.com/vant-ui/vant-demo) | Vant 官方示例合集 |
|
| [vant-demo](https://github.com/vant-ui/vant-demo) | Vant 官方示例合集 |
|
||||||
| [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | 开箱即用的组件库搭建工具 |
|
| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
|
||||||
| [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant 图标库 |
|
| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
|
||||||
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
|
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
|
||||||
|
|
||||||
### 社区生态
|
### 社区生态
|
||||||
|
|
||||||
@ -76,6 +64,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
|
|||||||
| 项目 | 描述 |
|
| 项目 | 描述 |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | 参照 Vant 打造的 React 移动端组件库 |
|
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | 参照 Vant 打造的 React 移动端组件库 |
|
||||||
|
| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | 基于 Vant 的 React 版本移动端 UI 组件库 |
|
||||||
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Vant 支付宝小程序版 |
|
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Vant 支付宝小程序版 |
|
||||||
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 |
|
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 |
|
||||||
| [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 |
|
| [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 |
|
||||||
@ -86,8 +75,8 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
|
|||||||
|
|
||||||
- [意见反馈](https://github.com/vant-ui/vant/issues)
|
- [意见反馈](https://github.com/vant-ui/vant/issues)
|
||||||
- [更新日志](#/zh-CN/changelog)
|
- [更新日志](#/zh-CN/changelog)
|
||||||
- [码云镜像仓库](https://gitee.com/vant-contrib/vant)
|
- [码云镜像](https://gitee.com/vant-contrib/vant)
|
||||||
- [Discussions 讨论区](https://github.com/vant-ui/vant/discussions)
|
- [Gitter 讨论组](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
|
||||||
|
|
||||||
## 贡献
|
## 贡献
|
||||||
|
|
||||||
|
@ -4,40 +4,11 @@
|
|||||||
|
|
||||||
本文档提供了从 Vant 3 到 Vant 4 的升级指南。
|
本文档提供了从 Vant 3 到 Vant 4 的升级指南。
|
||||||
|
|
||||||
### 安装 Vant 4
|
## 按需引入方式调整
|
||||||
|
|
||||||
首先你需要安装 Vant 4 以及 `@vant/compat`。
|
|
||||||
|
|
||||||
`@vant/compat` 是一个兼容包,可以帮助你从 Vant 3 过渡到 Vant 4。
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# 通过 npm 安装
|
|
||||||
npm add vant@^4 @vant/compat@^1
|
|
||||||
|
|
||||||
# 通过 yarn 安装
|
|
||||||
yarn add vant@^4 @vant/compat@^1
|
|
||||||
|
|
||||||
# 通过 pnpm 安装
|
|
||||||
pnpm add vant@^4 @vant/compat@^1
|
|
||||||
```
|
|
||||||
|
|
||||||
你也可以直接修改 `package.json` 的 `dependencies` 字段中的版本号,修改完成后需要重新安装依赖。
|
|
||||||
|
|
||||||
```diff
|
|
||||||
{
|
|
||||||
"dependencies": {
|
|
||||||
- "vant": "^3.0.0",
|
|
||||||
+ "vant": "^4.0.0",
|
|
||||||
+ "@vant/compat": "^1.0.0",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## 调整按需引入方式
|
|
||||||
|
|
||||||
### 移除 babel-plugin-import
|
### 移除 babel-plugin-import
|
||||||
|
|
||||||
从 Vant 4.0 开始,将不再支持 `babel-plugin-import`,请移除项目中依赖的 `babel-plugin-import` 插件。
|
从 Vant 4.0 版本开始,将不再支持 `babel-plugin-import`,请移除项目中依赖的 `babel-plugin-import` 插件。
|
||||||
|
|
||||||
只需要删除 `babel.config.js` 中的以下代码即可:
|
只需要删除 `babel.config.js` 中的以下代码即可:
|
||||||
|
|
||||||
@ -55,29 +26,28 @@ module.exports = {
|
|||||||
|
|
||||||
#### 收益
|
#### 收益
|
||||||
|
|
||||||
移除 `babel-plugin-import` 主要带来以下收益:
|
移除 `babel-plugin-import` 有以下收益:
|
||||||
|
|
||||||
- 不再强依赖 Babel 编译,项目可以使用 SWC、esbuild 等现代编译工具,进而提升编译效率。
|
- 不再强依赖 babel,项目可以使用 esbuild、swc 等更高效的编译工具,大幅度提升编译效率。
|
||||||
- 不再受到 `babel-plugin-import` 的 import 限制,可以从 Vant 中导入除组件以外的内容,比如 Vant 4 中新增的 `showToast` 方法,或是 `buttonProps` 对象:
|
- 不再受到 `babel-plugin-import` 的 import 写法限制,可以从 vant 中导入除了组件以外的其他内容,比如 Vant 4 中新增的 `showToast` 等方法:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import { showToast, buttonProps } from 'vant';
|
import { showToast, showDialog } from 'vant';
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 样式引入方案
|
#### 样式引入方案
|
||||||
|
|
||||||
移除 `babel-plugin-import` 对项目的 JS 体积不会有影响,因为 Vant 默认支持通过 Tree Shaking 来移除不需要的 JS 代码。
|
移除 `babel-plugin-import` 对项目的 JS 体积不会有影响,因为 Vant 默认支持通过 Tree Shaking 优化来移除不需要的 JS 代码。
|
||||||
|
|
||||||
而 CSS 代码的引入方式可以从以下两种方式中进行选择:
|
而 CSS 代码的引入方式可以从以下两种方式中进行选择:
|
||||||
|
|
||||||
|
- 通过 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件实现按需引入样式,详细用法参见 [快速上手](#/zh-CN/quickstart)。
|
||||||
- 在项目中全量引入 Vant 的样式文件:
|
- 在项目中全量引入 Vant 的样式文件:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import 'vant/lib/index.css';
|
import 'vant/lib/index.css';
|
||||||
```
|
```
|
||||||
|
|
||||||
- 通过 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件实现按需引入样式,详细用法参见 [快速上手](#/zh-CN/quickstart)。
|
|
||||||
|
|
||||||
## 组件重构
|
## 组件重构
|
||||||
|
|
||||||
### 介绍
|
### 介绍
|
||||||
@ -88,13 +58,12 @@ import 'vant/lib/index.css';
|
|||||||
- `Picker`
|
- `Picker`
|
||||||
- `DatetimePicker`
|
- `DatetimePicker`
|
||||||
|
|
||||||
这三个组件之所以被重构,是因为在之前的版本中,`Picker` 组件的 API 设计存在一些不合理的设计,导致大家在使用时经常遇到问题,比如:
|
之所以重构这三个组件,是因为在之前的版本中,`Picker` 组件的 API 设计存在一些不合理的设计,导致大家在使用时经常遇到问题,比如:
|
||||||
|
|
||||||
- Picker columns 数据格式定义不合理,容易产生误解
|
- columns 数据格式定义不合理,容易产生误解
|
||||||
- Picker 数据流不清晰,暴露了过多的实例方法来对数据进行操作
|
- 数据流不清晰,暴露了过多的实例方法来对数据进行操作
|
||||||
- DatetimePicker 逻辑过于复杂,经常在边界场景下出现 bug
|
|
||||||
|
|
||||||
为了解决上述问题,我们在 v4 版本中对 `Picker` 组件进行了重构,同时也重构了基于 `Picker` 派生出的 `Area` 和 `DatetimePicker` 组件。如果你的项目中使用了这三个组件,请仔细阅读文档并进行升级。
|
为了解决上述问题,我们在 v4 版本中对 `Picker` 组件进行了重构,同时也重构了基于 `Picker` 派生出的 `Area` 和 `DatetimePicker` 组件。
|
||||||
|
|
||||||
### Picker 组件重构
|
### Picker 组件重构
|
||||||
|
|
||||||
@ -112,11 +81,11 @@ import 'vant/lib/index.css';
|
|||||||
|
|
||||||
### DatetimePicker 组件重构
|
### DatetimePicker 组件重构
|
||||||
|
|
||||||
DatetimePicker 组件被拆分为三个子组件:
|
DatetimePicker 组件被拆分为:
|
||||||
|
|
||||||
- [TimePicker](#/zh-CN/time-picker): 用于时间选择,包括时、分、秒。
|
- [TimePicker](#/zh-CN/time-picker): 用于时间选择。
|
||||||
- [DatePicker](#/zh-CN/date-picker): 用于日期选择,包括年、月、日。
|
- [DatePicker](#/zh-CN/date-picker): 用于日期选择。
|
||||||
- [PickerGroup](#/zh-CN/picker-group): 用于结合多个 Picker 选择器组件,在一次交互中完成多个值的选择。
|
- [PickerGroup](#/zh-CN/picker-group): 用于用于结合多个 Picker 选择器组件。
|
||||||
|
|
||||||
同时,TimePicker 和 DatePicker 组件也基于新版 Picker 组件进行重构,并优化了部分 API 设计。
|
同时,TimePicker 和 DatePicker 组件也基于新版 Picker 组件进行重构,并优化了部分 API 设计。
|
||||||
|
|
||||||
@ -134,7 +103,7 @@ DatetimePicker 组件被拆分为三个子组件:
|
|||||||
|
|
||||||
### Area 组件重构
|
### Area 组件重构
|
||||||
|
|
||||||
Area 组件是基于 Picker 组件进行封装的,因此本次升级也对 Area 组件进行了内部逻辑的重构,并优化了部分 API。
|
Area 组件是基于 Picker 组件进行封装的,因此本次升级也对 Area 组件进行了内部逻辑的重构,并优化了部分 API 设计。
|
||||||
|
|
||||||
#### 主要变更
|
#### 主要变更
|
||||||
|
|
||||||
@ -154,7 +123,7 @@ Area 组件是基于 Picker 组件进行封装的,因此本次升级也对 Are
|
|||||||
|
|
||||||
在 Vant 3 中,`Dialog` 是一个函数,调用函数可以快速唤起全局的弹窗组件,而 `Dialog.Component` 才是 `Dialog` 组件对象,这与大部分组件的用法存在差异,容易导致使用错误。
|
在 Vant 3 中,`Dialog` 是一个函数,调用函数可以快速唤起全局的弹窗组件,而 `Dialog.Component` 才是 `Dialog` 组件对象,这与大部分组件的用法存在差异,容易导致使用错误。
|
||||||
|
|
||||||
为了更符合直觉,我们在 Vant 4 中调整了 `Dialog` 的调用方式,将 `Dialog()` 函数重命名为 `showDialog()`,并让 `Dialog` 直接指向组件对象。
|
为了更符合直觉,我们在 Vant 4 中调整了 `Dialog` 的调用方式,将 `Dialog()` 函数重命名为 `showDialog()`。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// Vant 3
|
// Vant 3
|
||||||
@ -166,7 +135,7 @@ showDialog(); // 函数调用
|
|||||||
Dialog; // 组件对象
|
Dialog; // 组件对象
|
||||||
```
|
```
|
||||||
|
|
||||||
由于 `Dialog` 变为了组件对象,`Dialog` 上挂载的其他方法也进行了重命名,新旧 API 的映射关系如下:
|
`Dialog` 上挂载的其他方法也进行了重命名,新旧 API 的映射关系如下:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
Dialog(); // -> showDialog()
|
Dialog(); // -> showDialog()
|
||||||
@ -179,9 +148,7 @@ Dialog.resetDefaultOptions(); // -> resetDialogDefaultOptions()
|
|||||||
|
|
||||||
#### 兼容方案
|
#### 兼容方案
|
||||||
|
|
||||||
为了便于旧版本代码迁移至 v4,我们提供了兼容方案,你可以使用 `@vant/compat` 中导出的 `Dialog` 对象来兼容原有代码。
|
为了便于代码迁移,我们提供了兼容方案,你可以使用 `@vant/compat` 中导出的 `Dialog` 对象来兼容原有代码。
|
||||||
|
|
||||||
从 `@vant/compat` 中引用 `Dialog` 方法:
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { Dialog } from '@vant/compat';
|
import { Dialog } from '@vant/compat';
|
||||||
@ -192,8 +159,6 @@ Dialog.close();
|
|||||||
|
|
||||||
`@vant/compat` 中导出的 `Dialog` 与 Vant 3 中的 `Dialog` 拥有完全一致的 API 和行为,因此你只需要修改 `Dialog` 的引用路径,其他代码可以保持不变。
|
`@vant/compat` 中导出的 `Dialog` 与 Vant 3 中的 `Dialog` 拥有完全一致的 API 和行为,因此你只需要修改 `Dialog` 的引用路径,其他代码可以保持不变。
|
||||||
|
|
||||||
在项目完成升级到 Vant v4 后,建议在迭代中逐步替换为新的 `showDialog` 等方法,并移除 `@vant/compat` 包。
|
|
||||||
|
|
||||||
### Toast 调用方式调整
|
### Toast 调用方式调整
|
||||||
|
|
||||||
Vant 4 中,`Toast` 组件的调用方式也进行了调整,与 `Dialog` 组件的改动一致:
|
Vant 4 中,`Toast` 组件的调用方式也进行了调整,与 `Dialog` 组件的改动一致:
|
||||||
@ -310,14 +275,14 @@ emit('click-input');
|
|||||||
emit('clickInput');
|
emit('clickInput');
|
||||||
```
|
```
|
||||||
|
|
||||||
这项改动**不影响原有的模板代码**,Vue 会自动在模板中对事件名进行格式转换,因此你无须做任何更改。
|
这项改动**不影响原有的模板代码**,Vue 会自动在模板中对事件名进行格式转换:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- 以下代码可以照常运行,无须做任何更改 -->
|
<!-- 以下代码可以照常运行,无须做任何更改 -->
|
||||||
<van-field @click-input="onClick" />
|
<van-field @click-input="onClick" />
|
||||||
```
|
```
|
||||||
|
|
||||||
如果你在 JSX 中使用 Vant 组件,需要将监听的事件名调整为驼峰格式,原有的中划线格式将不再生效,新的监听方式更加符合 JSX 本身的规范:
|
如果你在 JSX 中使用 Vant 组件,需要将监听的事件名调整为驼峰格式,新的监听方式更加符合 JSX 本身的规范:
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
// Vant 3
|
// Vant 3
|
||||||
@ -340,7 +305,7 @@ emit('clickInput');
|
|||||||
|
|
||||||
#### Popup
|
#### Popup
|
||||||
|
|
||||||
Popup 的 CSS 样式进行了一定调整,如果你在 Popup 组件上添加了一些自定义的 CSS 样式,请确认本次升级是否对项目中的 UI 产生影响。
|
Popup 的 CSS 样式进行了一定调整,请确认是否对项目中的 UI 产生影响。
|
||||||
|
|
||||||
- 默认添加了 `box-sizing: border-box` 样式
|
- 默认添加了 `box-sizing: border-box` 样式
|
||||||
- 调整了 `position="center"` 时的水平居中方式,以解决弹窗宽度无法正确自适应的问题:
|
- 调整了 `position="center"` 时的水平居中方式,以解决弹窗宽度无法正确自适应的问题:
|
||||||
@ -367,35 +332,11 @@ Popup 的 CSS 样式进行了一定调整,如果你在 Popup 组件上添加
|
|||||||
|
|
||||||
- 移除了 `click` 和 `disabled` 事件,请使用 `click-tab` 事件代替
|
- 移除了 `click` 和 `disabled` 事件,请使用 `click-tab` 事件代替
|
||||||
|
|
||||||
## 样式调整
|
## 样式变量调整
|
||||||
|
|
||||||
### 主色调统一
|
|
||||||
|
|
||||||
在之前的版本中,Vant 组件有两种主色调,部分组件采用蓝色(#1989fa)作为主色调,另一部分则采用红色(#ee0a24)。
|
|
||||||
|
|
||||||
为了保持色彩规范的一致性,我们在 Vant 4 中对主色调进行统一,所有组件均采用蓝色作为主色调。
|
|
||||||
|
|
||||||
以下组件的主色调由红色调整为蓝色:
|
|
||||||
|
|
||||||
- AddressEdit
|
|
||||||
- AddressList
|
|
||||||
- Card
|
|
||||||
- Calendar
|
|
||||||
- Cascader
|
|
||||||
- ContactList
|
|
||||||
- ContactEdit
|
|
||||||
- CouponList
|
|
||||||
- Dialog
|
|
||||||
- DropdownMenu
|
|
||||||
- IndexBar
|
|
||||||
- Sidebar
|
|
||||||
- Steps
|
|
||||||
- Tabs
|
|
||||||
- TreeSelect
|
|
||||||
|
|
||||||
### 移除 Less 变量
|
### 移除 Less 变量
|
||||||
|
|
||||||
目前 Vant 已经支持了基于 CSS 变量的主题定制能力,相较于 Less 定制更加灵活。因此,Vant 4 将不再提供基于 Less 的主题定制方式。
|
目前 Vant 已经支持了基于 CSS 变量的主题定制能力,因此后续将不再提供基于 Less 的主题定制方式。
|
||||||
|
|
||||||
这意味着 Vant 的 npm 包中将不再会包含 `.less` 样式源文件,只会提供编译后的 `.css` 样式文件。
|
这意味着 Vant 的 npm 包中将不再会包含 `.less` 样式源文件,只会提供编译后的 `.css` 样式文件。
|
||||||
|
|
||||||
@ -403,9 +344,7 @@ Popup 的 CSS 样式进行了一定调整,如果你在 Popup 组件上添加
|
|||||||
|
|
||||||
### 简化 CSS 变量名
|
### 简化 CSS 变量名
|
||||||
|
|
||||||
考虑到 **代码体积** 和 **使用便捷性**,我们对部分 CSS 变量的名称进行了简化,在变量名中使用了更简短的单词,以减小代码体积。
|
考虑到 **代码体积** 和 **使用便捷性**,我们对部分 CSS 变量的名称进行了简化,在变量名中使用更简短的单词,涉及以下变更:
|
||||||
|
|
||||||
本次升级涉及以下变量名变更:
|
|
||||||
|
|
||||||
```less
|
```less
|
||||||
animation-duration -> duration
|
animation-duration -> duration
|
||||||
@ -424,13 +363,3 @@ transition-duration -> duration
|
|||||||
```
|
```
|
||||||
|
|
||||||
由于涉及的 CSS 变量较多,建议在代码仓库中进行全局匹配和替换。
|
由于涉及的 CSS 变量较多,建议在代码仓库中进行全局匹配和替换。
|
||||||
|
|
||||||
对于 `ConfigProvider` 组件,我们新增了 `ConfigProviderThemeVars` 类型定义,提供完整的类型提示。在 TypeScript 代码中,你可以通过类型提示来确保主题变量被正确替换。
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import type { ConfigProviderThemeVars } from 'vant';
|
|
||||||
|
|
||||||
const themeVars: ConfigProviderThemeVars = {
|
|
||||||
sliderBarHeight: '4px',
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
@ -32,12 +32,12 @@ The easiest way to use Vant is to include a CDN link in the HTML file, after whi
|
|||||||
<!-- import style -->
|
<!-- import style -->
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"
|
href="https://fastly.jsdelivr.net/npm/vant@3/lib/index.css"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- import script -->
|
<!-- import script -->
|
||||||
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
|
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
|
||||||
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
|
<script src="https://fastly.jsdelivr.net/npm/vant@3/lib/vant.min.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Render the Button component
|
// Render the Button component
|
||||||
@ -213,11 +213,6 @@ import 'vant/es/image-preview/style';
|
|||||||
|
|
||||||
> Tip: "Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides.
|
> Tip: "Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides.
|
||||||
|
|
||||||
#### Tips
|
|
||||||
|
|
||||||
- "Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides.
|
|
||||||
- unplugin-vue-components is not officially maintained by Vant. If you encounter issues when using this plugin, please feedback to [antfu/unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) repository.
|
|
||||||
|
|
||||||
## With Frameworks
|
## With Frameworks
|
||||||
|
|
||||||
### Use Vant in Nuxt 3
|
### Use Vant in Nuxt 3
|
||||||
|
@ -36,12 +36,12 @@ pnpm add vant
|
|||||||
<!-- 引入样式文件 -->
|
<!-- 引入样式文件 -->
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"
|
href="https://fastly.jsdelivr.net/npm/vant@3/lib/index.css"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
|
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
|
||||||
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
|
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
|
||||||
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
|
<script src="https://fastly.jsdelivr.net/npm/vant@3/lib/vant.min.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 在 #app 标签下渲染一个按钮组件
|
// 在 #app 标签下渲染一个按钮组件
|
||||||
@ -89,6 +89,7 @@ pnpm add vant
|
|||||||
- 配置基于 Rem 的适配方案
|
- 配置基于 Rem 的适配方案
|
||||||
- 配置基于 Viewport 的适配方案
|
- 配置基于 Viewport 的适配方案
|
||||||
- 配置基于 TypeScript 的工程
|
- 配置基于 TypeScript 的工程
|
||||||
|
- 配置自定义主题色方案
|
||||||
|
|
||||||
## 引入组件
|
## 引入组件
|
||||||
|
|
||||||
@ -217,10 +218,7 @@ import 'vant/es/image-preview/style';
|
|||||||
|
|
||||||
你可以在项目的入口文件或公共模块中引入以上组件的样式,这样在业务代码中使用组件时,便不再需要重复引入样式了。
|
你可以在项目的入口文件或公共模块中引入以上组件的样式,这样在业务代码中使用组件时,便不再需要重复引入样式了。
|
||||||
|
|
||||||
#### 使用提示
|
> 提示:在单个项目中不应该同时使用「全量引入」和「按需引入」,否则会导致代码重复、样式错乱等问题。
|
||||||
|
|
||||||
- 请避免同时使用「全量引入」和「按需引入」这两种引入方式,否则会导致代码重复、样式错乱等问题。
|
|
||||||
- unplugin-vue-components 并不是 Vant 官方维护的插件,如果在使用过程中遇到问题,建议优先到 [antfu/unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 仓库下反馈。
|
|
||||||
|
|
||||||
## 在框架中使用
|
## 在框架中使用
|
||||||
|
|
||||||
|
@ -1,229 +0,0 @@
|
|||||||
# 4.0 版本介绍
|
|
||||||
|
|
||||||
### 引言
|
|
||||||
|
|
||||||
历经一年的迭代,Vant 4.0 版本已正式发布,这是 Vant 自 2017 年开源以来发布的第四个重要版本。
|
|
||||||
|
|
||||||
在本次迭代中,Vant 支持了深色模式,增加五个新组件,改善工具函数 API 并重构 Picker 等组件,同时继续在轻量化和易用性方面做出改进。
|
|
||||||
|
|
||||||
### 支持深色模式
|
|
||||||
|
|
||||||
**Vant 4.0 支持切换所有组件为深色模式。**
|
|
||||||
|
|
||||||
只需要把 [ConfigProvider 组件](https://vant-ui.github.io/vant/#/zh-CN/config-provider)的 `theme` 属性设置为 `dark`,即可切换为深色模式,将页面上的所有 Vant 组件变成深色风格。
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-config-provider theme="dark">
|
|
||||||
<!-- child components -->
|
|
||||||
</van-config-provider>
|
|
||||||
```
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
同时,Vant 4.0 文档也已支持切换为深色模式:
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
### 几个新组件
|
|
||||||
|
|
||||||
**Vant 4.0 包含以下新组件:**
|
|
||||||
|
|
||||||
- [BackTop 回到顶部](https://vant-ui.github.io/vant/#/zh-CN/back-top):返回页面顶部的操作按钮。
|
|
||||||
- [TimePicker 时间选择器](https://vant-ui.github.io/vant/#/zh-CN/time-picker):用于时间选择,包括时、分、秒。
|
|
||||||
- [DatePicker 日期选择器](https://vant-ui.github.io/vant/#/zh-CN/time-picker):用于日期选择,包括年、月、日。
|
|
||||||
- [PickerGroup 选择器组](https://vant-ui.github.io/vant/#/zh-CN/picker-group):用于结合多个 Picker 选择器组件,在一次交互中完成多个值的选择。
|
|
||||||
- [Skeleton 骨架屏子组件](https://vant-ui.github.io/vant/#/zh-CN/skeleton):通过 SkeletonTitle、SkeletonImage、SkeletonAvatar 等子组件来自定义骨架屏。
|
|
||||||
|
|
||||||
其中,TimePicker 和 DatePicker 由旧版的 DatetimePicker 组件拆分而来,DatetimePicker 组件不再提供。你可以通过 PickerGroup 来实现同时选择日期和时间的交互效果。
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
### 保持轻量
|
|
||||||
|
|
||||||
**Vant 4.0 的安装体积降低 30%,包体积保持轻量。**
|
|
||||||
|
|
||||||
随着 npm 生态的发展,node_modules 正在吞噬我们的磁盘空间。为了缓解 node_modules 黑洞、加快安装速度,我们对 Vant 的 npm 依赖和构建产物进行了优化。
|
|
||||||
|
|
||||||
相较于 Vant 3.6.2 版本,Vant 4.0.0 版本的安装体积由 7MB 下降至 5MB。作为对比,社区中主流组件库的安装体积普遍在 15MB ~ 80MB。你可以通过 [packagephobia](https://packagephobia.com/result?p=vant) 来查询 npm 包的安装体积。
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
在包体积上,本次更新依然加量不加价,Minified + Gzipped 后的体积保持在 70KB 以下:
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
### 统一主色调
|
|
||||||
|
|
||||||
**Vant 4.0 统一了所有组件的主色调。**
|
|
||||||
|
|
||||||
在之前的版本中,Vant 组件有两种主色调,部分组件采用蓝色 `#1989fa` 作为主色调,另一部分则采用红色 `#ee0a24`。
|
|
||||||
|
|
||||||
为了保持色彩规范的一致性,我们在 Vant 4 中对主色调进行统一,所有组件均采用蓝色作为主色调。
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
统一主色调后,主题定制会变得更加容易。比如,你可以覆盖 `--van-primary-color` 这个 CSS 变量,将所有组件的主色调设置为绿色:
|
|
||||||
|
|
||||||
```css
|
|
||||||
:root {
|
|
||||||
--van-primary-color: #07c160;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 按需引入方式调整
|
|
||||||
|
|
||||||
**Vant 4.0 不再使用 babel-plugin-import 实现按需引入。**
|
|
||||||
|
|
||||||
在早期,组件库大多使用 `babel-plugin-import` 实现按需引入,这意味着组件库会强依赖 Babel 编译。从 Vant 4.0 开始,将不再支持 `babel-plugin-import`,主要带来以下收益:
|
|
||||||
|
|
||||||
- 不再强依赖 Babel 编译,项目可以使用 SWC、esbuild 等现代编译工具,进而提升编译效率。
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
- 不再受到 `babel-plugin-import` 的 import 限制,可以从 Vant 中导入除组件以外的内容,比如 Vant 4 中新增的 `showToast` 方法,或是 `buttonProps` 对象:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import { showToast, buttonProps } from 'vant';
|
|
||||||
```
|
|
||||||
|
|
||||||
在包体积方面,移除 `babel-plugin-import` 对项目的 JS 体积不会有影响,因为 Vant 默认支持通过 Tree Shaking 来移除不需要的 JS 代码,而 CSS 代码可以通过 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件实现按需引入,详细用法请参考 [「快速上手」](https://vant-ui.github.io/vant/#/zh-CN/quickstart)。
|
|
||||||
|
|
||||||
### 样式变量类型提示
|
|
||||||
|
|
||||||
**Vant 4.0 提供了样式变量的类型提示。**
|
|
||||||
|
|
||||||
Vant 提供了 700 多个样式变量,你可以通过 CSS 代码或 `ConfigProvider` 组件修改这些样式变量。在 Vant 4.0 中,我们新增了 `ConfigProviderThemeVars` 类型,以提供样式变量的类型提示。
|
|
||||||
|
|
||||||
因此在编写 TypeScript 代码时,你可以通过类型提示来补全主题变量名称:
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
### Picker 组件重构
|
|
||||||
|
|
||||||
**Vant 4.0 重构了 Picker 组件,以及基于 Picker 的 Area 和 DatetimePicker 组件。**
|
|
||||||
|
|
||||||
在之前的版本中,`Picker` 组件的 API 设计不够合理,导致大家在使用时经常遇到问题,比如:
|
|
||||||
|
|
||||||
- Picker 的 columns 数据格式不合理,容易产生误解。
|
|
||||||
- Picker 的数据流不清晰,暴露了过多的实例方法来对数据进行操作。
|
|
||||||
- DatetimePicker 的逻辑过于复杂,经常在边界场景下出现 bug。
|
|
||||||
|
|
||||||
为了解决上述问题,我们在 Vant 4.0 中对 `Picker` 组件进行了重构,同时也重构了基于 `Picker` 派生出的 `Area` 和 `DatetimePicker` 组件。
|
|
||||||
|
|
||||||
如果你的项目中使用了这三个组件,请阅读 [「升级指南」](https://vant-ui.github.io/vant/#/zh-CN/migrate-from-v3) 进行升级。
|
|
||||||
|
|
||||||
### 组件工具函数调整
|
|
||||||
|
|
||||||
**Vant 4.0 调整了组件工具函数的用法,使其更符合直觉。**
|
|
||||||
|
|
||||||
Vant 3 提供了一些组件工具函数,比如调用 `Dialog()` 函数,可以快速唤起全局的弹窗组件,而 `Dialog.Component` 才是 `Dialog` 对应的组件对象。
|
|
||||||
|
|
||||||
```ts
|
|
||||||
// 函数调用
|
|
||||||
Dialog({ message: 'Hello World!' });
|
|
||||||
|
|
||||||
// 组件注册
|
|
||||||
app.use('van-dialog', Dialog.Component);
|
|
||||||
```
|
|
||||||
|
|
||||||
以上 API 设计导致 Dialog 等支持工具函数的组件与常规组件存在用法差异,容易被误用;同时也导致 `unplugin-vue-components` 无法自动引入 Dialog 等组件。
|
|
||||||
|
|
||||||
为了更符合直觉,我们在 Vant 4 中调整了组件工具函数的调用方式,受影响的函数包括 `Dialog()`、`Toast()`、`Notify()` 和 `ImagePreview()`。以 Dialog 为例,我们将 `Dialog()` 函数重命名为 `showDialog()`,并让 `Dialog` 直接指向组件对象。
|
|
||||||
|
|
||||||
```ts
|
|
||||||
// 函数调用
|
|
||||||
showDialog({ message: 'Hello World!' });
|
|
||||||
|
|
||||||
// 组件注册
|
|
||||||
app.use('van-dialog', Dialog);
|
|
||||||
```
|
|
||||||
|
|
||||||
为了便于存量代码迁移至 Vant 4.0,我们提供了兼容方案,你可以使用 `@vant/compat` 中导出的 `Dialog()` 函数来兼容原有代码。
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { Dialog } from '@vant/compat';
|
|
||||||
|
|
||||||
Dialog({ message: 'Hello World!' });
|
|
||||||
```
|
|
||||||
|
|
||||||
`@vant/compat` 中导出的 `Dialog()` 与 Vant 3 中的 `Dialog()` 拥有完全一致的 API 和行为,因此在升级时,你只需要修改它的引用路径,其余代码可以保持不变。在项目完成升级到 Vant 4.0 后,建议在迭代中逐步替换为新的 `showDialog()` 等方法,并移除 `@vant/compat` 包。
|
|
||||||
|
|
||||||
### 事件命名调整
|
|
||||||
|
|
||||||
**Vant 4.0 将事件名改为驼峰格式。**
|
|
||||||
|
|
||||||
从 Vant 4 开始,所有的事件均采用 Vue 官方推荐的驼峰格式进行命名。
|
|
||||||
|
|
||||||
```js
|
|
||||||
// Vant 3
|
|
||||||
emit('click-input');
|
|
||||||
|
|
||||||
// Vant 4
|
|
||||||
emit('clickInput');
|
|
||||||
```
|
|
||||||
|
|
||||||
这项改动**不影响原有的模板代码**,Vue 会自动在模板中对事件名进行格式转换,因此你无须做任何更改。
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!-- 以下代码可以照常运行,无须做任何更改 -->
|
|
||||||
<van-field @click-input="onClick" />
|
|
||||||
```
|
|
||||||
|
|
||||||
如果你在 JSX 中使用 Vant 组件,需要将监听的事件名调整为驼峰格式,原有的中划线格式将不再生效,新的监听方式更加符合 JSX 本身的规范:
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
// Vant 3
|
|
||||||
<Field onClick-input={onClick} />
|
|
||||||
|
|
||||||
// Vant 4
|
|
||||||
<Field onClickInput={onClick} />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 移除 Less 变量
|
|
||||||
|
|
||||||
**Vant 4.0 不再支持通过 Less 变量定制主题。**
|
|
||||||
|
|
||||||
目前 Vant 已经支持基于 CSS 变量的主题定制,相较于 Less 定制更加灵活。因此,Vant 4 将不再提供基于 Less 的主题定制。这意味着 Vant 的 npm 包中将不再会包含 `.less` 样式源文件,仅会提供编译后的 `.css` 样式文件。
|
|
||||||
|
|
||||||
如果你的项目正在使用旧版的 Less 主题定制,请使用 [ConfigProvider 全局配置](#/zh-CN/config-provider) 进行替换。
|
|
||||||
|
|
||||||
### Vant Cli 5.0
|
|
||||||
|
|
||||||
**本次更新同步发布了 Vant Cli 5.0 版本。**
|
|
||||||
|
|
||||||
[Vant Cli](https://github.com/youzan/vant/tree/main/packages/vant-cli) 是 Vant 底层的组件库构建工具,本次更新内容有:
|
|
||||||
|
|
||||||
- 升级 Vite 到 3.0 版本,并对相关的 Vite 插件进行升级。
|
|
||||||
- 不再默认安装 `stylelint` 和 `@vant/stylelint-config` 依赖,需要的话可以自行安装:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm add stylelint@13 @vant/stylelint-config
|
|
||||||
```
|
|
||||||
|
|
||||||
- 不再默认安装 `gh-pages` 依赖,请按照如下方式更新 package.json:
|
|
||||||
|
|
||||||
```diff
|
|
||||||
- "release:site": "pnpm build:site && gh-pages -d site-dist",
|
|
||||||
+ "release:site": "pnpm build:site && npx gh-pages -d site-dist",
|
|
||||||
```
|
|
||||||
|
|
||||||
### 版本信息
|
|
||||||
|
|
||||||
**目前 [Vant 官网](https://vant-ui.github.io/vant/) 和 npm latest 标签均已指向 Vant 4.0。**
|
|
||||||
|
|
||||||
我们为 Vant 4.0 准备了完整的升级指南,请阅读 [从 v3 升级到 v4](https://vant-ui.github.io/vant/#/zh-CN/migrate-from-v3) 进行升级。
|
|
||||||
|
|
||||||
同时,Vant 3.x 也会进入维护状态,后续 Vant 各个版本的维护状态如下:
|
|
||||||
|
|
||||||
| 名称 | 框架 | 发布时间 | 维护状态 |
|
|
||||||
| ------ | ----- | --------- | --------------------------------------- |
|
|
||||||
| Vant 4 | Vue 3 | `2022.12` | 持续迭代新功能 |
|
|
||||||
| Vant 3 | Vue 3 | `2020.12` | 停止迭代新功能,bug 会被处理和修复 |
|
|
||||||
| Vant 2 | Vue 2 | `2019.06` | 停止迭代新功能,重要 bug 会被处理和修复 |
|
|
||||||
| Vant 1 | Vue 2 | `2018.03` | 停止维护,不再接受 PR |
|
|
||||||
|
|
||||||
### 最后
|
|
||||||
|
|
||||||
感谢在 Vant 4.0 迭代期间做出贡献的朋友们,感谢所有使用 Vant 的开发者,愿大家在开源的道路上步履不停。
|
|
||||||
|
|
||||||

|
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vant",
|
"name": "vant",
|
||||||
"version": "4.0.7",
|
"version": "4.0.0-rc.0",
|
||||||
"description": "Mobile UI Components built on Vue",
|
"description": "Mobile UI Components built on Vue",
|
||||||
"main": "lib/vant.cjs.js",
|
"main": "lib/vant.cjs.js",
|
||||||
"module": "es/index.mjs",
|
"module": "es/index.mjs",
|
||||||
@ -8,6 +8,9 @@
|
|||||||
"typings": "lib/index.d.ts",
|
"typings": "lib/index.d.ts",
|
||||||
"unpkg": "lib/vant.min.js",
|
"unpkg": "lib/vant.min.js",
|
||||||
"jsdelivr": "lib/vant.min.js",
|
"jsdelivr": "lib/vant.min.js",
|
||||||
|
"npm": {
|
||||||
|
"tag": "next"
|
||||||
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"es",
|
"es",
|
||||||
"lib"
|
"lib"
|
||||||
@ -44,23 +47,23 @@
|
|||||||
"components"
|
"components"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vant/popperjs": "^1.3.0",
|
"@vant/icons": "^1.8.0",
|
||||||
"@vant/use": "^1.4.3"
|
"@vant/popperjs": "^1.2.1",
|
||||||
|
"@vant/use": "^1.4.2"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"vue": "^3.0.0"
|
"vue": "^3.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "^18.11.18",
|
"@types/node": "^16.11.56",
|
||||||
"@types/jest": "^29.1.1",
|
"@types/jest": "^27.0.0",
|
||||||
"@vant/area-data": "workspace:*",
|
"@vant/area-data": "workspace:*",
|
||||||
"@vant/cli": "workspace:*",
|
"@vant/cli": "workspace:*",
|
||||||
"@vant/eslint-config": "workspace:*",
|
"@vant/eslint-config": "workspace:*",
|
||||||
"@vant/icons": "workspace:*",
|
|
||||||
"@vue/runtime-core": "^3.2.38",
|
"@vue/runtime-core": "^3.2.38",
|
||||||
"@vue/test-utils": "^2.0.2",
|
"@vue/test-utils": "^2.0.2",
|
||||||
"typescript": "^4.8.2",
|
"typescript": "^4.8.2",
|
||||||
"vue": "^3.2.45",
|
"vue": "^3.2.38",
|
||||||
"vue-router": "^4.1.5"
|
"vue-router": "^4.1.5"
|
||||||
},
|
},
|
||||||
"sideEffects": [
|
"sideEffects": [
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
:root {
|
body {
|
||||||
--van-action-bar-button-height: 40px;
|
--van-action-bar-button-height: 40px;
|
||||||
--van-action-bar-button-warning-color: var(--van-gradient-orange);
|
--van-action-bar-button-warning-color: var(--van-gradient-orange);
|
||||||
--van-action-bar-button-danger-color: var(--van-gradient-red);
|
--van-action-bar-button-danger-color: var(--van-gradient-red);
|
||||||
|
@ -5,7 +5,6 @@ export const ActionBarButton = withInstall(_ActionBarButton);
|
|||||||
export default ActionBarButton;
|
export default ActionBarButton;
|
||||||
export { actionBarButtonProps } from './ActionBarButton';
|
export { actionBarButtonProps } from './ActionBarButton';
|
||||||
export type { ActionBarButtonProps } from './ActionBarButton';
|
export type { ActionBarButtonProps } from './ActionBarButton';
|
||||||
export type { ActionBarButtonThemeVars } from './types';
|
|
||||||
|
|
||||||
declare module 'vue' {
|
declare module 'vue' {
|
||||||
export interface GlobalComponents {
|
export interface GlobalComponents {
|
||||||
|
@ -1,5 +0,0 @@
|
|||||||
export type ActionBarButtonThemeVars = {
|
|
||||||
actionBarButtonHeight?: string;
|
|
||||||
actionBarButtonWarningColor?: string;
|
|
||||||
actionBarButtonDangerColor?: string;
|
|
||||||
};
|
|
@ -1,4 +1,4 @@
|
|||||||
:root {
|
body {
|
||||||
--van-action-bar-icon-width: 48px;
|
--van-action-bar-icon-width: 48px;
|
||||||
--van-action-bar-icon-height: 100%;
|
--van-action-bar-icon-height: 100%;
|
||||||
--van-action-bar-icon-color: var(--van-text-color);
|
--van-action-bar-icon-color: var(--van-text-color);
|
||||||
|
@ -5,7 +5,6 @@ export const ActionBarIcon = withInstall(_ActionBarIcon);
|
|||||||
export default ActionBarIcon;
|
export default ActionBarIcon;
|
||||||
export { actionBarIconProps } from './ActionBarIcon';
|
export { actionBarIconProps } from './ActionBarIcon';
|
||||||
export type { ActionBarIconProps } from './ActionBarIcon';
|
export type { ActionBarIconProps } from './ActionBarIcon';
|
||||||
export type { ActionBarIconThemeVars } from './types';
|
|
||||||
|
|
||||||
declare module 'vue' {
|
declare module 'vue' {
|
||||||
export interface GlobalComponents {
|
export interface GlobalComponents {
|
||||||
|
@ -1,10 +0,0 @@
|
|||||||
export type ActionBarIconThemeVars = {
|
|
||||||
actionBarIconWidth?: string;
|
|
||||||
actionBarIconHeight?: string;
|
|
||||||
actionBarIconColor?: string;
|
|
||||||
actionBarIconSize?: string;
|
|
||||||
actionBarIconFontSize?: string;
|
|
||||||
actionBarIconActiveColor?: string;
|
|
||||||
actionBarIconTextColor?: string;
|
|
||||||
actionBarIconBackground?: string;
|
|
||||||
};
|
|
@ -1,4 +1,4 @@
|
|||||||
:root {
|
body {
|
||||||
--van-action-bar-background: var(--van-background-2);
|
--van-action-bar-background: var(--van-background-2);
|
||||||
--van-action-bar-height: 50px;
|
--van-action-bar-height: 50px;
|
||||||
}
|
}
|
||||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user