mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Compare commits
51 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
bc468d7219 | ||
|
1e585b5ce0 | ||
|
f56634c4a5 | ||
|
c88f457e84 | ||
|
e6fd665707 | ||
|
dbf3fe5f8b | ||
|
5a1188c468 | ||
|
7abb6bd6f9 | ||
|
9e53bd5f89 | ||
|
b27a3cedfe | ||
|
74d77a6c12 | ||
|
e172db192a | ||
|
26b442b517 | ||
|
32b5d39f7b | ||
|
882ca4db4e | ||
|
af2d52f359 | ||
|
c8270a1059 | ||
|
b4339fd6f0 | ||
|
3012e7c705 | ||
|
e9203517ee | ||
|
73469bf240 | ||
|
4713238b00 | ||
|
11cc1a4932 | ||
|
521748a5f8 | ||
|
41cf5706fd | ||
|
1f3711236d | ||
|
e18a3d49ce | ||
|
772875535f | ||
|
ccc0649cba | ||
|
44281be985 | ||
|
78d6bcc939 | ||
|
711f9cc852 | ||
|
97d2badd45 | ||
|
7d48159e65 | ||
|
685351799e | ||
|
f595d41b3b | ||
|
c20a51c07d | ||
|
d88c04cae4 | ||
|
8f12b6c715 | ||
|
46c1ce3ae3 | ||
|
a0d07a373b | ||
|
a2d1280044 | ||
|
c6baa88461 | ||
|
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`).
|
||||
|
17
.github/workflows/deploy-v3-site.yml
vendored
17
.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,17 @@ 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
|
||||
target-folder: v3
|
||||
|
||||
- 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/v3
|
||||
|
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:
|
||||
|
||||
|
11
README.md
11
README.md
@ -37,7 +37,7 @@
|
||||
- 🍭 Support Tree Shaking
|
||||
- 🍭 Support Custom Theme
|
||||
- 🍭 Support Accessibility (still improving)
|
||||
- 🍭 Support Dark Mode (Requires upgrade to [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/en-US/config-provider))
|
||||
- 🍭 Support Dark Mode
|
||||
- 🍭 Support SSR
|
||||
- 🌍 Support i18n, built-in 20+ languages
|
||||
|
||||
@ -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
|
||||
|
||||
|
@ -41,7 +41,7 @@ Vant 是一个**轻量、可靠的移动端组件库**,于 2017 年开源。
|
||||
- 🍭 支持主题定制,内置 700+ 个主题变量
|
||||
- 🍭 支持按需引入和 Tree Shaking
|
||||
- 🍭 支持无障碍访问(持续改进中)
|
||||
- 🍭 支持深色模式(从 [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/zh-CN/config-provider) 开始支持)
|
||||
- 🍭 支持深色模式
|
||||
- 🍭 支持服务器端渲染
|
||||
- 🌍 支持国际化,内置 20+ 种语言包
|
||||
|
||||
@ -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 包能被正确识别:
|
||||
|
||||
|
@ -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');
|
||||
}
|
||||
|
@ -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
|
||||
# 安装模块
|
||||
|
@ -19,6 +19,90 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
|
||||
|
||||
## Details
|
||||
|
||||
### [v3.6.11](https://github.com/vant-ui/vant/compare/v3.6.10...v3.6.11)
|
||||
|
||||
`2022-12-25`
|
||||
|
||||
**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)
|
||||
|
||||
### [v3.6.10](https://github.com/vant-ui/vant/compare/v3.6.9...v3.6.10)
|
||||
|
||||
`2022-12-03`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Field: incorrect cursor position when using formatter [#11348](https://github.com/vant-ui/vant/issues/11348)
|
||||
|
||||
### [v3.6.9](https://github.com/vant-ui/vant/compare/v3.6.8...v3.6.9)
|
||||
|
||||
`2022-12-01`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Field: set selection range only when focused [#11333](https://github.com/vant-ui/vant/issues/11333)
|
||||
|
||||
### [v3.6.8](https://github.com/vant-ui/vant/compare/v3.6.7...v3.6.8)
|
||||
|
||||
`2022-11-26`
|
||||
|
||||
- Switch npm tag of vant@3 to `latest-v3`
|
||||
|
||||
### [v3.6.7](https://github.com/vant-ui/vant/compare/v3.6.6...v3.6.7)
|
||||
|
||||
`2022-11-26`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Field: keep selection position after updating value [#11308](https://github.com/vant-ui/vant/issues/11308)
|
||||
|
||||
### [v3.6.6](https://github.com/vant-ui/vant/compare/v3.6.5...v3.6.6)
|
||||
|
||||
`2022-11-23`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Cell: arrow-direction assignment right is invalid [#11279](https://github.com/vant-ui/vant/issues/11279)
|
||||
- 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)
|
||||
|
||||
### [v3.6.5](https://github.com/vant-ui/vant/compare/v3.6.4...v3.6.5)
|
||||
|
||||
`2022-11-08`
|
||||
|
||||
**Feature**
|
||||
|
||||
- ImagePreview: add preview image slot [#11133](https://github.com/vant-ui/vant/issues/11133)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- lazyload: lazy-image h is not a function [#11230](https://github.com/vant-ui/vant/issues/11230)
|
||||
|
||||
### [v3.6.4](https://github.com/vant-ui/vant/compare/v3.6.3...v3.6.4)
|
||||
|
||||
`2022-10-07`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- 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)
|
||||
|
||||
### [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`
|
||||
|
@ -19,6 +19,90 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
|
||||
## 更新内容
|
||||
|
||||
### [v3.6.11](https://github.com/vant-ui/vant/compare/v3.6.10...v3.6.11)
|
||||
|
||||
`2022-12-25`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Field: 修复使用 formatter 时光标位置可能错误的问题 [#11360](https://github.com/vant-ui/vant/issues/11360)
|
||||
|
||||
### [v3.6.10](https://github.com/vant-ui/vant/compare/v3.6.9...v3.6.10)
|
||||
|
||||
`2022-12-03`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Field: 修复使用 formatter 时光标位置错误的问题 [#11348](https://github.com/vant-ui/vant/issues/11348)
|
||||
|
||||
### [v3.6.9](https://github.com/vant-ui/vant/compare/v3.6.8...v3.6.9)
|
||||
|
||||
`2022-12-01`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Field: 修复未选中时修改绑定的值会导致键盘弹出的问题 [#11333](https://github.com/vant-ui/vant/issues/11333)
|
||||
|
||||
### [v3.6.8](https://github.com/vant-ui/vant/compare/v3.6.7...v3.6.8)
|
||||
|
||||
`2022-11-26`
|
||||
|
||||
- 将 vant@3 的 npm tag 切换至 `latest-v3`
|
||||
|
||||
### [v3.6.7](https://github.com/vant-ui/vant/compare/v3.6.6...v3.6.7)
|
||||
|
||||
`2022-11-26`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Field: 修复格式化值后,光标位置错误的问题 [#11308](https://github.com/vant-ui/vant/issues/11308)
|
||||
|
||||
### [v3.6.6](https://github.com/vant-ui/vant/compare/v3.6.5...v3.6.6)
|
||||
|
||||
`2022-11-23`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Cell: 修复 arrow-direction 属性设置为 right 不生效的问题 [#11279](https://github.com/vant-ui/vant/issues/11279)
|
||||
- List: 修复初始的 loading 状态可能不正确的问题 [#11275](https://github.com/vant-ui/vant/issues/11275)
|
||||
- NumberKeyboard: 修复使用 teleport 属性时未正确继承 attrs 的问题 [#11274](https://github.com/vant-ui/vant/issues/11274)
|
||||
|
||||
### [v3.6.5](https://github.com/vant-ui/vant/compare/v3.6.4...v3.6.5)
|
||||
|
||||
`2022-11-08`
|
||||
|
||||
**Feature**
|
||||
|
||||
- ImagePreview: 新增 preview image 插槽 [#11133](https://github.com/vant-ui/vant/issues/11133)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- lazyload: 修复使用 lazy-image 时提示 h is not a function 的问题 [#11230](https://github.com/vant-ui/vant/issues/11230)
|
||||
|
||||
### [v3.6.4](https://github.com/vant-ui/vant/compare/v3.6.3...v3.6.4)
|
||||
|
||||
`2022-10-07`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Tabs: 修复开启 scrollspy 时个别情况下标题栏滚动位置错误的问题 [#11116](https://github.com/vant-ui/vant/issues/11116)
|
||||
- Tabs: 修复开启 scrollspy 时 nav-bottom 插槽遮挡内容的问题 [#11115](https://github.com/vant-ui/vant/issues/11115)
|
||||
|
||||
### [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`
|
||||
|
@ -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>
|
||||
|
||||
#### 在线资源
|
||||
|
||||
|
@ -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)。
|
||||
|
@ -19,7 +19,7 @@
|
||||
- 🍭 Support Tree Shaking
|
||||
- 🍭 Support Custom Theme
|
||||
- 🍭 Support Accessibility (still improving)
|
||||
- 🍭 Support Dark Mode (Requires upgrade to [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/en-US/config-provider))
|
||||
- 🍭 Support Dark Mode
|
||||
- 🍭 Support SSR
|
||||
- 🌍 Support i18n, built-in 20+ languages
|
||||
|
||||
@ -33,6 +33,17 @@ 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).
|
||||
|
||||
### 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.11` |  | 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
|
||||
|
||||
### Official Ecosystem
|
||||
@ -41,16 +52,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 +71,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 +93,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
|
||||
|
||||
|
@ -25,7 +25,7 @@ Vant 是一个**轻量、可靠的移动端组件库**,于 2017 年开源。
|
||||
- 🍭 支持主题定制,内置 700+ 个主题变量
|
||||
- 🍭 支持按需引入和 Tree Shaking
|
||||
- 🍭 支持无障碍访问(持续改进中)
|
||||
- 🍭 支持深色模式(从 [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/zh-CN/config-provider) 开始支持)
|
||||
- 🍭 支持深色模式
|
||||
- 🍭 支持服务器端渲染
|
||||
- 🌍 支持国际化,内置 20+ 种语言包
|
||||
|
||||
@ -43,6 +43,17 @@ Vant 2 支持现代浏览器以及 Android >= 4.0、iOS >= 8.0。
|
||||
|
||||
Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一致)。
|
||||
|
||||
### 维护状态
|
||||
|
||||
目前 Vant 各个版本的维护状态如下:
|
||||
|
||||
| 名称 | 框架 | 发布时间 | 最新版 | 维护状态 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Vant 4 | Vue 3 | `2022.11` |  | 持续迭代新功能 |
|
||||
| Vant 3 | Vue 3 | `2020.12` |  | 停止迭代新功能,bug 会被处理和修复 |
|
||||
| Vant 2 | Vue 2 | `2019.06` |  | 停止迭代新功能,重要 bug 会被处理和修复 |
|
||||
| Vant 1 | Vue 2 | `2018.03` |  | 停止维护,不再接受 PR |
|
||||
|
||||
## 链接
|
||||
|
||||
### 官方生态
|
||||
@ -53,9 +64,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 +75,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 +85,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.12",
|
||||
"description": "Lightweight Mobile UI Components built on Vue",
|
||||
"main": "lib/vant.cjs.js",
|
||||
"module": "es/index.mjs",
|
||||
@ -12,13 +12,16 @@
|
||||
"es",
|
||||
"lib"
|
||||
],
|
||||
"npm": {
|
||||
"tag": "latest-v3"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vant-cli dev",
|
||||
"lint": "vant-cli lint",
|
||||
"test": "vant-cli test",
|
||||
"build": "vant-cli build",
|
||||
"build:site": "vant-cli build-site",
|
||||
"release": "cp ../../README.md ./ && vant-cli release && rm ./README.md",
|
||||
"release": "cp ../../README.md ./ && vant-cli release --tag latest-v3 && rm ./README.md",
|
||||
"release:site": "pnpm build:site && npx gh-pages -d site-dist --add",
|
||||
"test:watch": "vant-cli test --watch",
|
||||
"test:coverage": "open test/coverage/index.html"
|
||||
|
@ -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"
|
||||
|
@ -124,7 +124,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
if (props.isLink) {
|
||||
const name = props.arrowDirection
|
||||
const name = props.arrowDirection && props.arrowDirection !== 'right'
|
||||
? `arrow-${props.arrowDirection}`
|
||||
: 'arrow';
|
||||
return <Icon name={name} class={bem('right-icon')} />;
|
||||
|
@ -63,7 +63,7 @@ import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const currentDate = ref(new Date());
|
||||
const currentDate = ref(new Date(2020, 0, 1));
|
||||
|
||||
const formatter = (type, val) => {
|
||||
if (type === 'year') {
|
||||
@ -103,7 +103,7 @@ import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const currentDate = ref(new Date());
|
||||
const currentDate = ref(new Date(2020, 0, 1));
|
||||
|
||||
const formatter = (type, val) => {
|
||||
if (type === 'month') {
|
||||
@ -165,7 +165,7 @@ import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const currentDate = ref(new Date());
|
||||
const currentDate = ref(new Date(2020, 0, 1));
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
@ -192,7 +192,7 @@ import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const currentDate = ref(new Date());
|
||||
const currentDate = ref(new Date(2020, 0, 1));
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
@ -252,7 +252,7 @@ import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const currentDate = ref(new Date());
|
||||
const currentDate = ref(new Date(2020, 0, 1));
|
||||
|
||||
const formatter = (type, val) => {
|
||||
if (type === 'year') {
|
||||
|
@ -67,7 +67,7 @@ import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const currentDate = ref(new Date());
|
||||
const currentDate = ref(new Date(2020, 0, 1));
|
||||
|
||||
const formatter = (type, val) => {
|
||||
if (type === 'year') {
|
||||
@ -109,7 +109,7 @@ import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const currentDate = ref(new Date());
|
||||
const currentDate = ref(new Date(2020, 0, 1));
|
||||
|
||||
const formatter = (type, val) => {
|
||||
if (type === 'month') {
|
||||
@ -175,7 +175,7 @@ import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const currentDate = ref(new Date());
|
||||
const currentDate = ref(new Date(2020, 0, 1));
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
@ -204,7 +204,7 @@ import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const currentDate = ref(new Date());
|
||||
const currentDate = ref(new Date(2020, 0, 1));
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
@ -261,7 +261,7 @@ import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const currentDate = ref(new Date());
|
||||
const currentDate = ref(new Date(2020, 0, 1));
|
||||
|
||||
const formatter = (type, val) => {
|
||||
if (type === 'year') {
|
||||
|
@ -216,7 +216,7 @@ export default {
|
||||
| ---------------- | -------------- |
|
||||
| default | Custom message |
|
||||
| title | Custom title |
|
||||
| footer `v3.0.10` | Custom footer |
|
||||
| footer `v3.0.11` | Custom footer |
|
||||
|
||||
### Types
|
||||
|
||||
|
@ -278,7 +278,7 @@ export default {
|
||||
| ---------------- | ------------------ |
|
||||
| default | 自定义内容 |
|
||||
| title | 自定义标题 |
|
||||
| footer `v3.0.10` | 自定义底部按钮区域 |
|
||||
| footer `v3.0.11` | 自定义底部按钮区域 |
|
||||
|
||||
### 类型定义
|
||||
|
||||
|
@ -282,6 +282,15 @@ export default defineComponent({
|
||||
if (modelValue && getStringLength(modelValue) === +maxlength) {
|
||||
return modelValue;
|
||||
}
|
||||
// Remove redundant interpolated values,
|
||||
// make it consistent with the native input maxlength behavior.
|
||||
const selectionEnd = inputRef.value?.selectionEnd;
|
||||
if (state.focused && selectionEnd) {
|
||||
const valueArr = [...value];
|
||||
const exceededLength = valueArr.length - +maxlength;
|
||||
valueArr.splice(selectionEnd - exceededLength, exceededLength);
|
||||
return valueArr.join('');
|
||||
}
|
||||
return cutString(value, +maxlength);
|
||||
}
|
||||
return value;
|
||||
@ -291,19 +300,63 @@ export default defineComponent({
|
||||
value: string,
|
||||
trigger: FieldFormatTrigger = 'onChange'
|
||||
) => {
|
||||
const originalValue = value;
|
||||
value = limitValueLength(value);
|
||||
// When the value length exceeds maxlength,
|
||||
// record the excess length for correcting the cursor position.
|
||||
// https://github.com/youzan/vant/issues/11289
|
||||
const limitDiffLen =
|
||||
getStringLength(originalValue) - getStringLength(value);
|
||||
|
||||
if (props.type === 'number' || props.type === 'digit') {
|
||||
const isNumber = props.type === 'number';
|
||||
value = formatNumber(value, isNumber, isNumber);
|
||||
}
|
||||
|
||||
let formatterDiffLen = 0;
|
||||
if (props.formatter && trigger === props.formatTrigger) {
|
||||
value = props.formatter(value);
|
||||
const { formatter, maxlength } = props;
|
||||
value = formatter(value);
|
||||
// The length of the formatted value may exceed maxlength.
|
||||
if (isDef(maxlength) && getStringLength(value) > maxlength) {
|
||||
value = cutString(value, +maxlength);
|
||||
}
|
||||
if (inputRef.value && state.focused) {
|
||||
const { selectionEnd } = inputRef.value;
|
||||
// The value before the cursor of the original value.
|
||||
const bcoVal = cutString(originalValue, selectionEnd!);
|
||||
// Record the length change of `bcoVal` after formatting,
|
||||
// which is used to correct the cursor position.
|
||||
formatterDiffLen =
|
||||
getStringLength(formatter(bcoVal)) - getStringLength(bcoVal);
|
||||
}
|
||||
}
|
||||
|
||||
if (inputRef.value && inputRef.value.value !== value) {
|
||||
inputRef.value.value = value;
|
||||
// When the input is focused, correct the cursor position.
|
||||
if (state.focused) {
|
||||
let { selectionStart, selectionEnd } = inputRef.value;
|
||||
inputRef.value.value = value;
|
||||
|
||||
if (isDef(selectionStart) && isDef(selectionEnd)) {
|
||||
const valueLen = getStringLength(value);
|
||||
|
||||
if (limitDiffLen) {
|
||||
selectionStart -= limitDiffLen;
|
||||
selectionEnd -= limitDiffLen;
|
||||
} else if (formatterDiffLen) {
|
||||
selectionStart += formatterDiffLen;
|
||||
selectionEnd += formatterDiffLen;
|
||||
}
|
||||
|
||||
inputRef.value.setSelectionRange(
|
||||
Math.min(selectionStart, valueLen),
|
||||
Math.min(selectionEnd, valueLen)
|
||||
);
|
||||
}
|
||||
} else {
|
||||
inputRef.value.value = value;
|
||||
}
|
||||
}
|
||||
|
||||
if (value !== props.modelValue) {
|
||||
|
@ -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>
|
||||
|
@ -157,6 +157,9 @@ export default defineComponent({
|
||||
rootHeight={state.rootHeight}
|
||||
onScale={emitScale}
|
||||
onClose={emitClose}
|
||||
v-slots={{
|
||||
image: slots.image,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Swipe>
|
||||
|
@ -47,7 +47,7 @@ export default defineComponent({
|
||||
|
||||
emits: ['scale', 'close'],
|
||||
|
||||
setup(props, { emit }) {
|
||||
setup(props, { emit, slots }) {
|
||||
const state = reactive({
|
||||
scale: 1,
|
||||
moveX: 0,
|
||||
@ -293,14 +293,20 @@ export default defineComponent({
|
||||
onTouchend={onTouchEnd}
|
||||
onTouchcancel={onTouchEnd}
|
||||
>
|
||||
<Image
|
||||
v-slots={imageSlots}
|
||||
src={props.src}
|
||||
fit="contain"
|
||||
class={bem('image', { vertical: vertical.value })}
|
||||
style={imageStyle.value}
|
||||
onLoad={onLoad}
|
||||
/>
|
||||
{slots.image ? (
|
||||
<div class={bem('image-wrap')}>
|
||||
{slots.image({ src: props.src })}
|
||||
</div>
|
||||
) : (
|
||||
<Image
|
||||
v-slots={imageSlots}
|
||||
src={props.src}
|
||||
fit="contain"
|
||||
class={bem('image', { vertical: vertical.value })}
|
||||
style={imageStyle.value}
|
||||
onLoad={onLoad}
|
||||
/>
|
||||
)}
|
||||
</SwipeItem>
|
||||
);
|
||||
};
|
||||
|
@ -118,6 +118,39 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Use image slot
|
||||
|
||||
When using ImagePreview component, you can custom the image through the `image` slot, such as render a video content.
|
||||
|
||||
```html
|
||||
<van-image-preview v-model:show="show" :images="images">
|
||||
<template #image="{ src }">
|
||||
<video style="width: 100%;" controls>
|
||||
<source :src="src" />
|
||||
</video>
|
||||
</template>
|
||||
</van-image-preview>
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const show = ref(false);
|
||||
const images = [
|
||||
'https://www.w3school.com.cn/i/movie.ogg',
|
||||
'https://www.w3school.com.cn/i/movie.ogg',
|
||||
'https://www.w3school.com.cn/i/movie.ogg',
|
||||
];
|
||||
return {
|
||||
show,
|
||||
images,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Options
|
||||
@ -218,6 +251,7 @@ imagePreviewRef.value?.swipeTo(1);
|
||||
| --- | --- | --- |
|
||||
| index | Custom index | { index: index of current image } |
|
||||
| cover | Custom content that covers the image preview | - |
|
||||
| image `v3.6.5` | Custom image content | { src: current image src } |
|
||||
|
||||
### onClose Parameters
|
||||
|
||||
|
@ -172,6 +172,39 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 使用 image 插槽
|
||||
|
||||
当以组件调用的方式使用 ImagePreview 时,可以通过 `image` 插槽来插入自定义的内容,比如展示一个视频内容。
|
||||
|
||||
```html
|
||||
<van-image-preview v-model:show="show" :images="images">
|
||||
<template #image="{ src }">
|
||||
<video style="width: 100%;" controls>
|
||||
<source :src="src" />
|
||||
</video>
|
||||
</template>
|
||||
</van-image-preview>
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const show = ref(false);
|
||||
const images = [
|
||||
'https://www.w3school.com.cn/i/movie.ogg',
|
||||
'https://www.w3school.com.cn/i/movie.ogg',
|
||||
'https://www.w3school.com.cn/i/movie.ogg',
|
||||
];
|
||||
return {
|
||||
show,
|
||||
images,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Options
|
||||
@ -275,10 +308,11 @@ imagePreviewRef.value?.swipeTo(1);
|
||||
|
||||
通过组件调用 `ImagePreview` 时,支持以下插槽:
|
||||
|
||||
| 名称 | 说明 | 参数 |
|
||||
| ----- | ------------------------------ | ------------------------- |
|
||||
| index | 自定义页码内容 | { index: 当前图片的索引 } |
|
||||
| cover | 自定义覆盖在图片预览上方的内容 | - |
|
||||
| 名称 | 说明 | 参数 |
|
||||
| -------------- | ------------------------------ | ------------------------- |
|
||||
| index | 自定义页码内容 | { index: 当前图片的索引 } |
|
||||
| cover | 自定义覆盖在图片预览上方的内容 | - |
|
||||
| image `v3.6.5` | 自定义图片内容 | { src: 当前资源地址 } |
|
||||
|
||||
### onClose 回调参数
|
||||
|
||||
|
@ -17,6 +17,7 @@ const t = useTranslate({
|
||||
customConfig: '传入配置项',
|
||||
startPosition: '指定初始位置',
|
||||
componentCall: '组件调用',
|
||||
useImageSlot: '使用 image 插槽',
|
||||
index: (index: number) => `第${index + 1}页`,
|
||||
},
|
||||
'en-US': {
|
||||
@ -28,6 +29,7 @@ const t = useTranslate({
|
||||
customConfig: 'Custom Config',
|
||||
startPosition: 'Set Start Position',
|
||||
componentCall: 'Component Call',
|
||||
useImageSlot: 'Use image slot',
|
||||
index: (index: number) => `Page: ${index}`,
|
||||
},
|
||||
});
|
||||
@ -39,9 +41,18 @@ const images = [
|
||||
cdnURL('apple-4.jpeg'),
|
||||
];
|
||||
|
||||
const imagesSlot = [
|
||||
'https://www.w3school.com.cn/i/movie.ogg',
|
||||
'https://www.w3school.com.cn/i/movie.ogg',
|
||||
'https://www.w3school.com.cn/i/movie.ogg',
|
||||
'https://www.w3school.com.cn/i/movie.ogg',
|
||||
];
|
||||
|
||||
const show = ref(false);
|
||||
const index = ref(0);
|
||||
|
||||
const showSlot = ref(false);
|
||||
|
||||
const onClose = () => Toast(t('closed'));
|
||||
|
||||
const beforeClose = () =>
|
||||
@ -59,6 +70,10 @@ const onChange = (newIndex: number) => {
|
||||
index.value = newIndex;
|
||||
};
|
||||
|
||||
const showComponentCallSlot = () => {
|
||||
showSlot.value = true;
|
||||
};
|
||||
|
||||
const showImagePreview = (options: Partial<ImagePreviewOptions> = {}) => {
|
||||
const instance = ImagePreview({
|
||||
images,
|
||||
@ -110,4 +125,19 @@ const showImagePreview = (options: Partial<ImagePreviewOptions> = {}) => {
|
||||
<template #index>{{ t('index', index) }}</template>
|
||||
</van-image-preview>
|
||||
</demo-block>
|
||||
|
||||
<demo-block card :title="t('useImageSlot')">
|
||||
<van-cell
|
||||
is-link
|
||||
:value="t('useImageSlot')"
|
||||
@click="showComponentCallSlot"
|
||||
/>
|
||||
<van-image-preview v-model:show="showSlot" :images="imagesSlot">
|
||||
<template #image="{ src }">
|
||||
<video style="width: 100%" controls>
|
||||
<source :src="src" />
|
||||
</video>
|
||||
</template>
|
||||
</van-image-preview>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
@ -38,7 +38,8 @@
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&__image {
|
||||
&__image,
|
||||
&__image-wrap {
|
||||
width: 100%;
|
||||
transition-property: transform;
|
||||
|
||||
@ -47,7 +48,8 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
img,
|
||||
video {
|
||||
// disable desktop browser image drag
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
@ -254,3 +254,36 @@ test('zoom out', async () => {
|
||||
|
||||
restore();
|
||||
});
|
||||
|
||||
test('should render image slot correctly', async () => {
|
||||
const wrapper = mount(ImagePreviewComponent, {
|
||||
props: {
|
||||
show: true,
|
||||
images,
|
||||
},
|
||||
slots: {
|
||||
image: ({ src }) => `<img class="test-img" src="${src}" />`,
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
expect(wrapper.html().includes('test-img')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('should render image slot correctly 2', async () => {
|
||||
const wrapper = mount(ImagePreviewComponent, {
|
||||
props: {
|
||||
show: true,
|
||||
images,
|
||||
},
|
||||
slots: {
|
||||
image: ({ src }) =>
|
||||
`<video style="width: 100%;" controls><source src="${src}" /></video>`,
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
expect(wrapper.html().includes('video')).toBeTruthy();
|
||||
});
|
||||
|
@ -6,6 +6,7 @@
|
||||
import { useRect } from '@vant/use';
|
||||
import { loadImageAsync } from './util';
|
||||
import { noop } from '../../utils';
|
||||
import { h } from 'vue';
|
||||
|
||||
export default (lazyManager) => ({
|
||||
props: {
|
||||
@ -15,15 +16,13 @@ export default (lazyManager) => ({
|
||||
default: 'img',
|
||||
},
|
||||
},
|
||||
render(h) {
|
||||
render() {
|
||||
return h(
|
||||
this.tag,
|
||||
{
|
||||
attrs: {
|
||||
src: this.renderSrc,
|
||||
},
|
||||
src: this.renderSrc,
|
||||
},
|
||||
this.$slots.default
|
||||
this.$slots.default?.()
|
||||
);
|
||||
},
|
||||
data() {
|
||||
|
@ -53,7 +53,7 @@ export default defineComponent({
|
||||
|
||||
setup(props, { emit, slots }) {
|
||||
// use sync innerLoading state to avoid repeated loading in some edge cases
|
||||
const loading = ref(false);
|
||||
const loading = ref(props.loading);
|
||||
const root = ref<HTMLElement>();
|
||||
const placeholder = ref<HTMLElement>();
|
||||
const tabStatus = useTabStatus();
|
||||
|
@ -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) 查看所有的语言包源文件。
|
||||
|
||||
## 常见问题
|
||||
|
||||
|
@ -79,6 +79,8 @@ function shuffle(array: unknown[]) {
|
||||
export default defineComponent({
|
||||
name,
|
||||
|
||||
inheritAttrs: false,
|
||||
|
||||
props: numberKeyboardProps,
|
||||
|
||||
emits: [
|
||||
@ -91,7 +93,7 @@ export default defineComponent({
|
||||
'update:modelValue',
|
||||
],
|
||||
|
||||
setup(props, { emit, slots }) {
|
||||
setup(props, { emit, slots, attrs }) {
|
||||
const root = ref<HTMLElement>();
|
||||
|
||||
const genBasicKeys = () => {
|
||||
@ -282,6 +284,7 @@ export default defineComponent({
|
||||
})}
|
||||
onAnimationend={onAnimationEnd}
|
||||
onTouchstartPassive={stopPropagation}
|
||||
{...attrs}
|
||||
>
|
||||
{Title}
|
||||
<div class={bem('body')}>
|
||||
|
@ -246,3 +246,18 @@ test('should not emit close event after clicking close button when blur-on-close
|
||||
clickKey(wrapper.findAll('.van-key')[12]);
|
||||
expect(wrapper.emitted('blur')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('should inherit attrs when using teleport prop', () => {
|
||||
const root = document.createElement('div');
|
||||
mount(NumberKeyboard, {
|
||||
props: {
|
||||
teleport: root,
|
||||
},
|
||||
attrs: {
|
||||
class: 'foo',
|
||||
},
|
||||
});
|
||||
|
||||
const el = root.querySelector('.van-number-keyboard');
|
||||
expect(el?.classList.contains('foo')).toBeTruthy();
|
||||
});
|
||||
|
@ -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}
|
||||
|
@ -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>
|
||||
|
@ -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)) {
|
||||
@ -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}
|
||||
|
@ -41,15 +41,18 @@ export default {
|
||||
children: [
|
||||
{ text: 'Delaware', id: 1 },
|
||||
{ text: 'Florida', id: 2 },
|
||||
{ text: 'Georqia', id: 3, disabled: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'Group 2',
|
||||
children: [
|
||||
{ text: 'Alabama', id: 5 },
|
||||
{ text: 'Kansas', id: 6 },
|
||||
{ text: 'Alabama', id: 4 },
|
||||
{ text: 'Kansas', id: 5 },
|
||||
{ text: 'Louisiana', id: 6 },
|
||||
],
|
||||
},
|
||||
{ text: 'Group 3', disabled: true },
|
||||
];
|
||||
|
||||
return {
|
||||
@ -84,15 +87,18 @@ export default {
|
||||
children: [
|
||||
{ text: 'Delaware', id: 1 },
|
||||
{ text: 'Florida', id: 2 },
|
||||
{ text: 'Georqia', id: 3, disabled: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'Group 2',
|
||||
children: [
|
||||
{ text: 'Alabama', id: 5 },
|
||||
{ text: 'Kansas', id: 6 },
|
||||
{ text: 'Alabama', id: 4 },
|
||||
{ text: 'Kansas', id: 5 },
|
||||
{ text: 'Louisiana', id: 6 },
|
||||
],
|
||||
},
|
||||
{ text: 'Group 3', disabled: true },
|
||||
];
|
||||
|
||||
return {
|
||||
@ -158,8 +164,24 @@ export default {
|
||||
return {
|
||||
activeIndex,
|
||||
items: [
|
||||
{ text: 'Group 1', children: [], dot: true },
|
||||
{ text: 'Group 2', children: [], badge: 5 },
|
||||
{
|
||||
text: 'Group 1',
|
||||
children: [
|
||||
{ text: 'Delaware', id: 1 },
|
||||
{ text: 'Florida', id: 2 },
|
||||
{ text: 'Georqia', id: 3, disabled: true },
|
||||
],
|
||||
dot: true,
|
||||
},
|
||||
{
|
||||
text: 'Group 2',
|
||||
children: [
|
||||
{ text: 'Alabama', id: 4 },
|
||||
{ text: 'Kansas', id: 5 },
|
||||
{ text: 'Louisiana', id: 6 },
|
||||
],
|
||||
badge: 5,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
@ -43,15 +43,18 @@ export default {
|
||||
children: [
|
||||
{ text: '杭州', id: 1 },
|
||||
{ text: '温州', id: 2 },
|
||||
{ text: '宁波', id: 3, disabled: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '江苏',
|
||||
children: [
|
||||
{ text: '南京', id: 5 },
|
||||
{ text: '无锡', id: 6 },
|
||||
{ text: '南京', id: 4 },
|
||||
{ text: '无锡', id: 5 },
|
||||
{ text: '徐州', id: 6 },
|
||||
],
|
||||
},
|
||||
{ text: '福建', disabled: true },
|
||||
];
|
||||
|
||||
return {
|
||||
@ -88,15 +91,18 @@ export default {
|
||||
children: [
|
||||
{ text: '杭州', id: 1 },
|
||||
{ text: '温州', id: 2 },
|
||||
{ text: '宁波', id: 3, disabled: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '江苏',
|
||||
children: [
|
||||
{ text: '南京', id: 5 },
|
||||
{ text: '无锡', id: 6 },
|
||||
{ text: '南京', id: 4 },
|
||||
{ text: '无锡', id: 5 },
|
||||
{ text: '徐州', id: 6 },
|
||||
],
|
||||
},
|
||||
{ text: '福建', disabled: true },
|
||||
];
|
||||
|
||||
return {
|
||||
@ -166,8 +172,24 @@ export default {
|
||||
return {
|
||||
activeIndex,
|
||||
items: [
|
||||
{ text: '浙江', children: [], dot: true },
|
||||
{ text: '江苏', children: [], badge: 5 },
|
||||
{
|
||||
text: '浙江',
|
||||
children: [
|
||||
{ text: '杭州', id: 1 },
|
||||
{ text: '温州', id: 2 },
|
||||
{ text: '宁波', id: 3, disabled: true },
|
||||
],
|
||||
dot: true,
|
||||
},
|
||||
{
|
||||
text: '江苏',
|
||||
children: [
|
||||
{ text: '南京', id: 4 },
|
||||
{ text: '无锡', id: 5 },
|
||||
{ text: '徐州', id: 6 },
|
||||
],
|
||||
badge: 5,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
@ -12,39 +12,31 @@ const group1 = [
|
||||
id: 3,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
text: 'Indiana',
|
||||
id: 4,
|
||||
},
|
||||
];
|
||||
|
||||
const group2 = [
|
||||
{
|
||||
text: 'Alabama',
|
||||
id: 5,
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
text: 'Kansas',
|
||||
id: 6,
|
||||
id: 5,
|
||||
},
|
||||
{
|
||||
text: 'Louisiana',
|
||||
id: 7,
|
||||
},
|
||||
{
|
||||
text: 'Texas',
|
||||
id: 8,
|
||||
id: 6,
|
||||
},
|
||||
];
|
||||
|
||||
const group3 = [
|
||||
{
|
||||
text: 'Alabama',
|
||||
id: 9,
|
||||
id: 7,
|
||||
},
|
||||
{
|
||||
text: 'Kansas',
|
||||
id: 10,
|
||||
id: 8,
|
||||
},
|
||||
];
|
||||
|
||||
|
@ -12,39 +12,31 @@ const zhejiang = [
|
||||
id: 3,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
text: '义乌',
|
||||
id: 4,
|
||||
},
|
||||
];
|
||||
|
||||
const jiangsu = [
|
||||
{
|
||||
text: '南京',
|
||||
id: 5,
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
text: '无锡',
|
||||
id: 6,
|
||||
id: 5,
|
||||
},
|
||||
{
|
||||
text: '徐州',
|
||||
id: 7,
|
||||
},
|
||||
{
|
||||
text: '苏州',
|
||||
id: 8,
|
||||
id: 6,
|
||||
},
|
||||
];
|
||||
|
||||
const fujian = [
|
||||
{
|
||||
text: '泉州',
|
||||
id: 9,
|
||||
id: 7,
|
||||
},
|
||||
{
|
||||
text: '厦门',
|
||||
id: 10,
|
||||
id: 8,
|
||||
},
|
||||
];
|
||||
|
||||
|
@ -47,9 +47,6 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-ellipsis van-tree-select__item van-tree-select__item--disabled">
|
||||
Georqia
|
||||
</div>
|
||||
<div class="van-ellipsis van-tree-select__item">
|
||||
Indiana
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -101,9 +98,6 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-ellipsis van-tree-select__item van-tree-select__item--disabled">
|
||||
Georqia
|
||||
</div>
|
||||
<div class="van-ellipsis van-tree-select__item">
|
||||
Indiana
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -185,9 +179,6 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-ellipsis van-tree-select__item van-tree-select__item--disabled">
|
||||
Georqia
|
||||
</div>
|
||||
<div class="van-ellipsis van-tree-select__item">
|
||||
Indiana
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -158,6 +158,7 @@ export default defineComponent({
|
||||
file,
|
||||
status: '',
|
||||
message: '',
|
||||
objectUrl: URL.createObjectURL(file)
|
||||
};
|
||||
|
||||
if (contents[index]) {
|
||||
@ -175,6 +176,7 @@ export default defineComponent({
|
||||
file: files as File,
|
||||
status: '',
|
||||
message: '',
|
||||
objectUrl: URL.createObjectURL(files as File),
|
||||
};
|
||||
|
||||
if (content) {
|
||||
@ -230,8 +232,8 @@ export default defineComponent({
|
||||
const imageFiles = props.modelValue.filter(isImageFile);
|
||||
const images = imageFiles
|
||||
.map((item) => {
|
||||
if (item.file && !item.url && item.status !== 'failed') {
|
||||
item.url = URL.createObjectURL(item.file);
|
||||
if (item.objectUrl && !item.url && item.status !== 'failed') {
|
||||
item.url = item.objectUrl;
|
||||
urls.push(item.url);
|
||||
}
|
||||
return item.url;
|
||||
|
@ -111,7 +111,7 @@ export default defineComponent({
|
||||
<Image
|
||||
v-slots={{ default: renderCover }}
|
||||
fit={imageFit}
|
||||
src={item.content || item.url}
|
||||
src={item.objectUrl || item.content || item.url}
|
||||
class={bem('preview-image')}
|
||||
width={Array.isArray(previewSize) ? previewSize[0] : previewSize}
|
||||
height={Array.isArray(previewSize) ? previewSize[1] : previewSize}
|
||||
|
@ -8,6 +8,7 @@ export type UploaderResultType = 'dataUrl' | 'text' | 'file';
|
||||
export type UploaderFileListItem = {
|
||||
url?: string;
|
||||
file?: File;
|
||||
objectUrl?: string;
|
||||
content?: string;
|
||||
isImage?: boolean;
|
||||
status?: '' | 'uploading' | 'done' | 'failed';
|
||||
|
@ -63,7 +63,7 @@ export function filterFiles(
|
||||
return { valid, invalid };
|
||||
}
|
||||
|
||||
const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i;
|
||||
const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg|avif)/i;
|
||||
|
||||
export const isImageUrl = (url: string): boolean => IMAGE_REGEXP.test(url);
|
||||
|
||||
|
@ -11,7 +11,7 @@ export default {
|
||||
},
|
||||
site: {
|
||||
publicPath:
|
||||
(typeof window === 'undefined' && process.env.PUBLIC_PATH) || '/vant/',
|
||||
(typeof window === 'undefined' && process.env.PUBLIC_PATH) || '/vant/v3/',
|
||||
},
|
||||
},
|
||||
site: {
|
||||
@ -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',
|
||||
|
Loading…
x
Reference in New Issue
Block a user