Compare commits

...

15 Commits
next ... v3.6.4

Author SHA1 Message Date
chenjiahan
c20a51c07d release: 3.6.4 2022-10-07 23:26:39 +08:00
neverland
d88c04cae4 fix(Tabs): incorrect nav scroll animation in some cases (#11116)
* fix(Tabs): incorrect nav scroll animation in some cases

* chore: fix snapshot
2022-10-06 16:23:46 +08:00
neverland
8f12b6c715 fix(Tabs): scroll position when using nav-bottom slot (#11115) 2022-10-06 16:07:34 +08:00
neverland
46c1ce3ae3 docs: add faq of uni-app (#11114) 2022-10-05 09:28:55 +08:00
neverland
a0d07a373b perf(cli): code split documents (#11111) 2022-10-04 08:55:58 +08:00
neverland
a2d1280044
docs: fix website redirect (#11097) 2022-09-28 21:54:15 +08:00
neverland
c6baa88461
docs(changelog): vant@3.6.3 (#11086) 2022-09-24 23:05:54 +08:00
chenjiahan
808ae4a076 release: 3.6.3 2022-09-24 23:02:18 +08:00
neverland
8444c6f2f0
fix(Tabs): incorrect scroll position in some cases (#11085) 2022-09-24 22:59:47 +08:00
chenjiahan
3d41ac66a1 chore: update deploy v3 site 2022-09-24 20:37:22 +08:00
neverland
41cfae4aa6
fix(Tabs): incorrect scroll position when inited (#11059) 2022-09-18 22:06:37 +08:00
chenjiahan
2d47824ae7 docs: update links for 3.x branch 2022-09-12 11:42:33 +08:00
neverland
abad89d7dd docs: update links (#11041) 2022-09-12 11:27:37 +08:00
chenjiahan
1294e51248 chore: update branches in GitHub actions 2022-09-10 22:00:18 +08:00
chenjiahan
99833f2185 docs: switch dev branch to v4 2022-09-10 21:53:14 +08:00
35 changed files with 365 additions and 292 deletions

View File

@ -1,6 +1,6 @@
### Before submitting a pull request, please make sure the following is done:
1. Read the [contributing guide](https://github.com/vant-ui/vant/blob/dev/.github/CONTRIBUTING.md).
1. Read the [contributing guide](https://github.com/vant-ui/vant/blob/3.x/.github/CONTRIBUTING.md).
2. If you've added code that should be tested, add tests.
3. If you've changed APIs, update the documentation.
4. Ensure the test suite passes (`npm test`).

View File

@ -2,7 +2,7 @@ name: Deploy V3 Site
on:
push:
branches: [dev]
branches: [3.x]
paths:
- 'packages/vant/docs/**'
@ -15,7 +15,7 @@ jobs:
- name: Checkout 🛎️
uses: actions/checkout@v2
with:
ref: 'dev'
ref: '3.x'
- name: Install pnpm
run: npm i pnpm@7 -g
@ -32,8 +32,18 @@ jobs:
run: npm run build:site
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@4.1.1
uses: JamesIves/github-pages-deploy-action@v4.4.0
with:
branch: gh-pages
folder: packages/vant/site-dist
clean: false
- 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

View File

@ -2,7 +2,7 @@ name: Sync to Gitee
on:
push:
branches: [dev, 2.x, gh-pages]
branches: [dev, 2.x, 3.x, gh-pages]
workflow_dispatch:

View File

@ -92,16 +92,15 @@ 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-demo](https://github.com/vant-ui/vant-demo) | Collection of Vant demos |
| [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/dev/packages/vant-icons) | Vant icons |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
| [vant-cli](https://github.com/vant-ui/vant/tree/3.x/packages/vant-cli) | Scaffold for UI library |
| [vant-icons](https://github.com/vant-ui/vant/tree/3.x/packages/vant-icons) | Vant icons |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/3.x/packages/vant-touch-emulator) | Using vant in desktop browsers |
## Community Ecosystem
| Project | Description |
| --- | --- |
| [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 |
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
| [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |
@ -112,7 +111,7 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
- [Documentation](https://vant-ui.github.io/vant)
- [Changelog](https://vant-ui.github.io/vant#/en-US/changelog)
- [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)
## Preview

View File

@ -98,9 +98,9 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
| --- | --- |
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | Vant 微信小程序版 |
| [vant-demo](https://github.com/vant-ui/vant-demo) | Vant 官方示例合集 |
| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
| [vant-cli](https://github.com/vant-ui/vant/tree/3.x/packages/vant-cli) | 开箱即用的组件库搭建工具 |
| [vant-icons](https://github.com/vant-ui/vant/tree/3.x/packages/vant-icons) | Vant 图标库 |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/3.x/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
## 社区生态
@ -109,7 +109,6 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
| 项目 | 描述 |
| --- | --- |
| [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 支付宝小程序版 |
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 |
| [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 |
@ -120,7 +119,8 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
- [详细文档](https://vant-contrib.gitee.io/vant)
- [更新日志](https://vant-contrib.gitee.io/vant#/zh-CN/changelog)
- [Gitter 讨论组](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
- [码云镜像仓库](https://gitee.com/vant-contrib/vant)
- [Discussions 讨论区](https://github.com/vant-ui/vant/discussions)
## 手机预览

View File

@ -65,7 +65,7 @@ Please add the followed config to `package.json` file.
## More Details
- [cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/commands.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/dev/packages/vant-cli/docs/directory.md)
- [CHANGELOG](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/changelog.md)
- [cli](https://github.com/vant-ui/vant/tree/3.x/packages/vant-cli/docs/commands.md)
- [config](https://github.com/vant-ui/vant/tree/3.x/packages/vant-cli/docs/config.md)
- [directory structure](https://github.com/vant-ui/vant/tree/3.x/packages/vant-cli/docs/directory.md)
- [CHANGELOG](https://github.com/vant-ui/vant/tree/3.x/packages/vant-cli/changelog.md)

View File

@ -62,7 +62,7 @@ pnpm add @vant/cli -D
## 详细文档
- [命令](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/commands.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/dev/packages/vant-cli/docs/directory.zh-CN.md)
- [更新日志](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/changelog.md)
- [命令](https://github.com/vant-ui/vant/tree/3.x/packages/vant-cli/docs/commands.zh-CN.md)
- [配置指南](https://github.com/vant-ui/vant/tree/3.x/packages/vant-cli/docs/config.zh-CN.md)
- [目录结构](https://github.com/vant-ui/vant/tree/3.x/packages/vant-cli/docs/directory.zh-CN.md)
- [更新日志](https://github.com/vant-ui/vant/tree/3.x/packages/vant-cli/changelog.md)

View File

@ -29,7 +29,7 @@ Start local dev server for browsering components and demo.
Build Vue component library.
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)
Files will be output to `es` and `lib` directory. More details [directory structure](https://github.com/vant-ui/vant/tree/3.x/packages/vant-cli/docs/directory.md)
Please add the followed config to `package.json` when publish to npm.

View File

@ -31,7 +31,7 @@ npx vant-cli dev
构建组件库。
运行 build 命令会在 `es``lib` 目录下生成可用于生产环境的组件代码,详见 [目录结构](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.zh-CN.md)。
运行 build 命令会在 `es``lib` 目录下生成可用于生产环境的组件代码,详见 [目录结构](https://github.com/vant-ui/vant/tree/3.x/packages/vant-cli/docs/directory.zh-CN.md)。
发布 npm 时,请将以下配置加入到 `package.json` 中,使 npm 包能被正确识别:

View File

@ -1,12 +1,7 @@
import glob from 'fast-glob';
import { join, parse } from 'path';
import { existsSync, readFileSync, readdirSync } from 'fs';
import {
isDev,
pascalize,
getVantConfig,
normalizePath,
} from '../common/index.js';
import { pascalize, getVantConfig, normalizePath } from '../common/index.js';
import {
SRC_DIR,
DOCS_DIR,
@ -80,10 +75,7 @@ function genImportDocuments(items: DocumentItem[]) {
return items
.map((item) => {
const path = normalizePath(item.path);
if (isDev()) {
return `const ${item.name} = () => import('${path}');`;
}
return `import ${item.name} from '${path}';`;
return `const ${item.name} = () => import('${path}');`;
})
.join('\n');
}

View File

@ -132,7 +132,7 @@ module.exports = {
### 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/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.
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/3.x/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
# Install

View File

@ -197,7 +197,7 @@ module.exports = {
Vant 是一个面向移动端的组件库,因此默认只适配了移动端设备,这意味着组件只监听了移动端的 `touch` 事件,没有监听桌面端的 `mouse` 事件。
如果你需要在桌面端使用 Vant可以引入我们提供的 [@vant/touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator),这个库会在桌面端自动将 `mouse` 事件转换成对应的 `touch` 事件,使得组件能够在桌面端使用。
如果你需要在桌面端使用 Vant可以引入我们提供的 [@vant/touch-emulator](https://github.com/vant-ui/vant/tree/3.x/packages/vant-touch-emulator),这个库会在桌面端自动将 `mouse` 事件转换成对应的 `touch` 事件,使得组件能够在桌面端使用。
```bash
# 安装模块

View File

@ -19,6 +19,21 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
## Details
### [v3.6.3](https://github.com/vant-ui/vant/compare/v3.6.2...v3.6.3)
`2022-09-24`
**Feature**
- 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)
**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)
- utils: avoid getting unexpected value [#11010](https://github.com/vant-ui/vant/issues/11010)
### [v3.6.2](https://github.com/vant-ui/vant/compare/v3.6.1...v3.6.2)
`2022-09-04`

View File

@ -19,6 +19,21 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
## 更新内容
### [v3.6.3](https://github.com/vant-ui/vant/compare/v3.6.2...v3.6.3)
`2022-09-24`
**Feature**
- Dialog: message-align 属性支持设置为 justify [#11014](https://github.com/vant-ui/vant/issues/11014)
- Image: 新增 block 属性 [#11022](https://github.com/vant-ui/vant/issues/11022)
**Bug Fixes**
- Tabs: 修复个别情况下页面滚动位置错误的问题 [#11085](https://github.com/vant-ui/vant/issues/11085)
- Tabs: 修复初始化时菜单横向滚动位置错误的问题 [#11059](https://github.com/vant-ui/vant/issues/11059)
- Locale: 修复读取 i18n 文案时可能获取到 JS 原生方法的问题 [#11010](https://github.com/vant-ui/vant/issues/11010)
### [v3.6.2](https://github.com/vant-ui/vant/compare/v3.6.1...v3.6.2)
`2022-09-04`

View File

@ -38,9 +38,9 @@ pnpm dev
仓库的不同分支对应不同的 Vant 版本,请切换到对应分支进行开发:
- dev 分支对应 Vant 4 版本,适用于 Vue 3
- 3.x 分支对应 Vant 3 版本 ,适用于 Vue 3
- 2.x 分支对应 Vant 2 版本,适用于 Vue 2
- dev 分支对应 Vant 3 版本 ,适用于 Vue 3
- next 分支对应 Vant 4 版本,适用于 Vue 3
### 镜像仓库

View File

@ -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)">
<a class="design-download" href="https://github.com/vant-ui/vant/blob/dev/packages/vant/docs/assets/design.sketch?raw=true">Download</a>
<a class="design-download" href="https://github.com/vant-ui/vant/blob/3.x/packages/vant/docs/assets/design.sketch?raw=true">Download</a>
### 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)">
<a class="design-download" href="https://github.com/vant-ui/vant/blob/dev/packages/vant-icons/assets/icons.sketch?raw=true">Download</a>
<a class="design-download" href="https://github.com/vant-ui/vant/blob/3.x/packages/vant-icons/assets/icons.sketch?raw=true">Download</a>
### Axure

View File

@ -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)">
<a class="design-download" href="https://github.com/vant-ui/vant/blob/dev/packages/vant/docs/assets/design.sketch?raw=true">下载</a>
<a class="design-download" href="https://github.com/vant-ui/vant/blob/3.x/packages/vant/docs/assets/design.sketch?raw=true">下载</a>
### 图标设计稿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)">
<a class="design-download" href="https://github.com/vant-ui/vant/blob/dev/packages/vant-icons/assets/icons.sketch?raw=true">下载</a>
<a class="design-download" href="https://github.com/vant-ui/vant/blob/3.x/packages/vant-icons/assets/icons.sketch?raw=true">下载</a>
#### 在线资源

View File

@ -68,6 +68,12 @@ Select 是桌面端常用的组件,但它的交互形式不适合移动端。
在移动端,我们推荐使用 [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)。

View File

@ -41,16 +41,15 @@ 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-demo](https://github.com/vant-ui/vant-demo) | Collection of Vant demos |
| [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/dev/packages/vant-icons) | Vant icons |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
| [vant-cli](https://github.com/vant-ui/vant/tree/3.x/packages/vant-cli) | Scaffold for UI library |
| [vant-icons](https://github.com/vant-ui/vant/tree/3.x/packages/vant-icons) | Vant icons |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/3.x/packages/vant-touch-emulator) | Using vant in desktop browsers |
### Community Ecosystem
| Project | Description |
| --- | --- |
| [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 |
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
| [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |
@ -61,7 +60,7 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
- [Feedback](https://github.com/vant-ui/vant/issues)
- [Changelog](#/en-US/changelog)
- [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)
## Contribution
@ -83,7 +82,7 @@ Thanks to the following friends for their contributions to Vant:
### Contribution Guide
Please make sure to read the [Contributing Guide](https://github.com/vant-ui/vant/blob/dev/.github/CONTRIBUTING.md) before making a pull request.
Please make sure to read the [Contributing Guide](https://github.com/vant-ui/vant/blob/3.x/.github/CONTRIBUTING.md) before making a pull request.
### LICENSE

View File

@ -53,9 +53,9 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
| --- | --- |
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | Vant 微信小程序版 |
| [vant-demo](https://github.com/vant-ui/vant-demo) | Vant 官方示例合集 |
| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
| [vant-cli](https://github.com/vant-ui/vant/tree/3.x/packages/vant-cli) | 开箱即用的组件库搭建工具 |
| [vant-icons](https://github.com/vant-ui/vant/tree/3.x/packages/vant-icons) | Vant 图标库 |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/3.x/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
### 社区生态
@ -64,7 +64,6 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
| 项目 | 描述 |
| --- | --- |
| [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 支付宝小程序版 |
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 |
| [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 |
@ -75,8 +74,8 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
- [意见反馈](https://github.com/vant-ui/vant/issues)
- [更新日志](#/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)
- [码云镜像仓库](https://gitee.com/vant-contrib/vant)
- [Discussions 讨论区](https://github.com/vant-ui/vant/discussions)
## 贡献

View File

@ -10,7 +10,7 @@ Vant use [Less](http://lesscss.org/) as css preprocessoryou can override the
### Less variables
There are some [basic variables](<(https://github.com/vant-ui/vant/blob/dev/packages/vant/src/style/var.less)>) below, for component less variables, please refer to the documentation of each component, or view the `var.less` file in the component source directory.
There are some [basic variables](<(https://github.com/vant-ui/vant/blob/3.x/packages/vant/src/style/var.less)>) below, for component less variables, please refer to the documentation of each component, or view the `var.less` file in the component source directory.
```less
// Color Palette

View File

@ -16,7 +16,7 @@ Vant 提供了一套默认主题CSS 命名采用 BEM 的风格,方便使用
Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理,并内置了一些样式变量,通过替换样式变量即可定制你自己需要的主题。
下面是所有的[基础样式变量](https://github.com/vant-ui/vant/blob/dev/packages/vant/src/style/var.less),组件的样式变量请参考各个组件的文档,或查看组件源码目录下的 `var.less` 文件。
下面是所有的[基础样式变量](https://github.com/vant-ui/vant/blob/3.x/packages/vant/src/style/var.less),组件的样式变量请参考各个组件的文档,或查看组件源码目录下的 `var.less` 文件。
```less
// Color Palette

View File

@ -1,6 +1,6 @@
{
"name": "vant",
"version": "3.6.2",
"version": "3.6.4",
"description": "Lightweight Mobile UI Components built on Vue",
"main": "lib/vant.cjs.js",
"module": "es/index.mjs",

View File

@ -52,7 +52,7 @@ export default {
### @vant/area-data
Vant officially provides a default China area data, which can be imported through [@vant/area-data](https://github.com/vant-ui/vant/tree/dev/packages/vant-area-data):
Vant officially provides a default China area data, which can be imported through [@vant/area-data](https://github.com/vant-ui/vant/tree/3.x/packages/vant-area-data):
```bash
# with npm

View File

@ -54,7 +54,7 @@ const areaList = {
### @vant/area-data
Vant 官方提供了一份默认的中国省市区数据,可以通过 [@vant/area-data](https://github.com/vant-ui/vant/tree/dev/packages/vant-area-data) 引入:
Vant 官方提供了一份默认的中国省市区数据,可以通过 [@vant/area-data](https://github.com/vant-ui/vant/tree/3.x/packages/vant-area-data) 引入:
```bash
# 通过 npm

View File

@ -1 +1 @@
// 已迁移至 https://github.com/vant-ui/vant/tree/dev/packages/vant-area-data
// 已迁移至 https://github.com/vant-ui/vant/tree/3.x/packages/vant-area-data

View File

@ -111,7 +111,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
<div style="transition-duration: 0ms; transform: translateX(0px); width: 200px;"
class="van-swipe__track"
>
<div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
<div class="van-swipe-item van-tab__panel-wrapper"
id="van-tab"
role="tabpanel"
tabindex="-1"

View File

@ -4,58 +4,60 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs van-tabs--line">
<div>
<div class="van-sticky">
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Demo
</span>
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Basic
</span>
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Outline
</span>
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Filled
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(50px) translateX(-50%);"
<div>
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Demo
</span>
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Basic
</span>
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Outline
</span>
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Filled
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
</div>
</div>

View File

@ -72,7 +72,7 @@ Current supported languages:
| Traditional Chinese (HK) | zh-HK | - |
| Traditional Chinese (TW) | zh-TW | - |
> View all language configs [Here](https://github.com/vant-ui/vant/tree/dev/packages/vant/src/locale/lang).
> View all language configs [Here](https://github.com/vant-ui/vant/tree/3.x/packages/vant/src/locale/lang).
### Add new language

View File

@ -73,7 +73,7 @@ Locale.add(messages);
| 繁體中文(港) | zh-HK | - |
| 繁體中文(台) | zh-TW | - |
> 在 [这里](https://github.com/vant-ui/vant/tree/dev/packages/vant/src/locale/lang) 查看所有的语言包源文件。
> 在 [这里](https://github.com/vant-ui/vant/tree/3.x/packages/vant/src/locale/lang) 查看所有的语言包源文件。
## 常见问题

View File

@ -21,7 +21,7 @@ import {
import { TABS_KEY } from '../tabs/Tabs';
// Composables
import { useParent } from '@vant/use';
import { doubleRaf, useParent } from '@vant/use';
import { useId } from '../composables/use-id';
import { useExpose } from '../composables/use-expose';
import { routeProps } from '../composables/use-route';
@ -84,6 +84,21 @@ export default defineComponent({
return isActive;
});
const hasInactiveClass = ref(!active.value);
watch(active, (val) => {
if (val) {
hasInactiveClass.value = false;
} else {
// mark tab as inactive until the active tab is rendered
// to avoid incorrect scroll position or other render issue
// https://github.com/youzan/vant/issues/11050
doubleRaf(() => {
hasInactiveClass.value = true;
});
}
});
watch(
() => props.title,
() => {
@ -109,7 +124,7 @@ export default defineComponent({
<SwipeItem
id={id}
role="tabpanel"
class={bem('panel-wrapper', { inactive: !active.value })}
class={bem('panel-wrapper', { inactive: hasInactiveClass.value })}
tabindex={active.value ? 0 : -1}
aria-hidden={!active.value}
aria-labelledby={label}

View File

@ -546,58 +546,60 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs van-tabs--line">
<div>
<div class="van-sticky">
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 1
</span>
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 2
</span>
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 3
</span>
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 4
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(50px) translateX(-50%);"
<div>
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line"
aria-orientation="horizontal"
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 1
</span>
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 2
</span>
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 3
</span>
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 4
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
</div>
</div>
@ -1096,102 +1098,104 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs van-tabs--line">
<div>
<div class="van-sticky">
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
aria-orientation="horizontal"
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--line van-tab--grow van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 1
</span>
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 2
</span>
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 3
</span>
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 4
</span>
</div>
<div id="van-tabs-4"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 5
</span>
</div>
<div id="van-tabs-5"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 6
</span>
</div>
<div id="van-tabs-6"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 7
</span>
</div>
<div id="van-tabs-7"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 8
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(50px) translateX(-50%);"
<div>
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
aria-orientation="horizontal"
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--line van-tab--grow van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 1
</span>
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 2
</span>
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 3
</span>
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 4
</span>
</div>
<div id="van-tabs-4"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 5
</span>
</div>
<div id="van-tabs-5"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 6
</span>
</div>
<div id="van-tabs-6"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 7
</span>
</div>
<div id="van-tabs-7"
role="tab"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Tab 8
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
</div>
</div>

View File

@ -470,7 +470,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
<div style="transition-duration: 300ms; transform: translateX(-100px); width: 300px;"
class="van-swipe__track"
>
<div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
<div class="van-swipe-item van-tab__panel-wrapper"
id="van-tab"
role="tabpanel"
tabindex="-1"
@ -560,7 +560,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
<div style="transition-duration: 300ms; transform: translateX(-200px); width: 300px;"
class="van-swipe__track"
>
<div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
<div class="van-swipe-item van-tab__panel-wrapper"
id="van-tab"
role="tabpanel"
tabindex="-1"

View File

@ -239,7 +239,10 @@ export default defineComponent({
}
};
const setCurrentIndex = (currentIndex: number) => {
const setCurrentIndex = (
currentIndex: number,
skipScrollIntoView?: boolean
) => {
const newIndex = findAvailableTab(currentIndex);
if (!isDef(newIndex)) {
@ -250,7 +253,14 @@ export default defineComponent({
const newName = getTabName(newTab, newIndex);
const shouldEmitChange = state.currentIndex !== null;
state.currentIndex = newIndex;
if (state.currentIndex !== newIndex) {
state.currentIndex = newIndex;
if (!skipScrollIntoView) {
scrollIntoView();
}
setLine();
}
if (newName !== props.active) {
emit('update:active', newName);
@ -259,16 +269,26 @@ export default defineComponent({
emit('change', newName, newTab.title);
}
}
// scroll to correct position
if (stickyFixed && !props.scrollspy) {
setRootScrollTop(
Math.ceil(getElementTop(root.value!) - offsetTopPx.value)
);
}
};
// correct the index of active tab
const setCurrentIndexByName = (name: Numeric) => {
const setCurrentIndexByName = (
name: Numeric,
skipScrollIntoView?: boolean
) => {
const matched = children.find(
(tab, index) => getTabName(tab, index) === name
);
const index = matched ? children.indexOf(matched) : 0;
setCurrentIndex(index);
setCurrentIndex(index, skipScrollIntoView);
};
const scrollToCurrentContent = (immediate = false) => {
@ -397,10 +417,11 @@ export default defineComponent({
};
const renderHeader = () => {
const { type, border } = props;
return (
const { type, border, sticky } = props;
const Header = [
<div
ref={wrapRef}
ref={sticky ? undefined : wrapRef}
class={[
bem('wrap'),
{ [BORDER_TOP_BOTTOM]: type === 'line' && border },
@ -421,8 +442,14 @@ export default defineComponent({
{renderLine()}
{slots['nav-right']?.()}
</div>
</div>
);
</div>,
slots['nav-bottom']?.(),
];
if (sticky) {
return <div ref={wrapRef}>{Header}</div>;
}
return Header;
};
watch([() => props.color, windowWidth], setLine);
@ -449,23 +476,8 @@ export default defineComponent({
}
);
watch(
() => state.currentIndex,
() => {
scrollIntoView();
setLine();
// scroll to correct position
if (stickyFixed && !props.scrollspy) {
setRootScrollTop(
Math.ceil(getElementTop(root.value!) - offsetTopPx.value)
);
}
}
);
const init = () => {
setCurrentIndexByName(props.active);
setCurrentIndexByName(props.active, true);
nextTick(() => {
state.inited = true;
if (wrapRef.value) {
@ -514,10 +526,9 @@ export default defineComponent({
onScroll={onStickyScroll}
>
{renderHeader()}
{slots['nav-bottom']?.()}
</Sticky>
) : (
[renderHeader(), slots['nav-bottom']?.()]
renderHeader()
)}
<TabsContent
ref={contentRef}

View File

@ -27,6 +27,12 @@ export default {
htmlMeta: {
'docsearch:version': 'v3',
},
headHtml: `<script>
if (location.host === 'youzan.github.io') {
location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io');
}
</script>
`,
locales: {
'zh-CN': {
title: 'Vant 3',