mirror of
https://gitee.com/vant-contrib/vant.git
synced 2026-01-13 09:56:56 +08:00
Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
808ae4a076 | ||
|
|
8444c6f2f0 | ||
|
|
3d41ac66a1 | ||
|
|
41cfae4aa6 | ||
|
|
2d47824ae7 | ||
|
|
abad89d7dd | ||
|
|
1294e51248 | ||
|
|
99833f2185 |
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:
|
||||
|
||||
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`).
|
||||
|
||||
16
.github/workflows/deploy-v3-site.yml
vendored
16
.github/workflows/deploy-v3-site.yml
vendored
@ -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
|
||||
|
||||
2
.github/workflows/sync-gitee.yml
vendored
2
.github/workflows/sync-gitee.yml
vendored
@ -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:
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
## 手机预览
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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 包能被正确识别:
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
# 安装模块
|
||||
|
||||
@ -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
|
||||
|
||||
### 镜像仓库
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
#### 在线资源
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
## 贡献
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ Vant use [Less](http://lesscss.org/) as css preprocessor,you 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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vant",
|
||||
"version": "3.6.2",
|
||||
"version": "3.6.3",
|
||||
"description": "Lightweight Mobile UI Components built on Vue",
|
||||
"main": "lib/vant.cjs.js",
|
||||
"module": "es/index.mjs",
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -346,7 +346,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-tabs__line"
|
||||
style="transform: translateX(50px) translateX(-50%);"
|
||||
style="transform: translateX(50px) translateX(-50%); transition-duration: 0.3s;"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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) 查看所有的语言包源文件。
|
||||
|
||||
## 常见问题
|
||||
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -239,7 +239,10 @@ export default defineComponent({
|
||||
}
|
||||
};
|
||||
|
||||
const setCurrentIndex = (currentIndex: number) => {
|
||||
const setCurrentIndex = (
|
||||
currentIndex: number,
|
||||
skipScrollIntoView?: boolean
|
||||
) => {
|
||||
const newIndex = findAvailableTab(currentIndex);
|
||||
|
||||
if (!isDef(newIndex)) {
|
||||
@ -259,16 +262,31 @@ export default defineComponent({
|
||||
emit('change', newName, newTab.title);
|
||||
}
|
||||
}
|
||||
|
||||
if (!skipScrollIntoView) {
|
||||
scrollIntoView();
|
||||
}
|
||||
setLine();
|
||||
|
||||
// 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) => {
|
||||
@ -449,23 +467,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) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user