Compare commits

..

2 Commits

Author SHA1 Message Date
chenjiahan
b45b0b7608 chore: update branches in GitHub actions 2022-09-10 21:57:09 +08:00
chenjiahan
c309ca2aaf docs: switch dev branch to v4 2022-09-10 21:53:49 +08:00
437 changed files with 3043 additions and 7533 deletions

View File

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

View File

@ -13,10 +13,10 @@ name: "CodeQL"
on: on:
push: push:
branches: [ main ] branches: [ dev ]
pull_request: pull_request:
# The branches below must be a subset of the branches above # The branches below must be a subset of the branches above
branches: [ main ] branches: [ dev ]
schedule: schedule:
- cron: '36 21 * * 2' - cron: '36 21 * * 2'

View File

@ -2,7 +2,7 @@ name: Deploy V4 Site
on: on:
push: push:
branches: [main] branches: [dev]
paths: paths:
- 'packages/vant/docs/**' - 'packages/vant/docs/**'
@ -15,7 +15,7 @@ jobs:
- name: Checkout 🛎️ - name: Checkout 🛎️
uses: actions/checkout@v2 uses: actions/checkout@v2
with: with:
ref: 'main' ref: 'next'
- name: Install pnpm - name: Install pnpm
run: npm i pnpm@7 -g run: npm i pnpm@7 -g
@ -31,18 +31,10 @@ jobs:
- name: Build Site - name: Build Site
run: npm run build:site run: npm run build:site
- name: Deploy for Gitee 🚀 - name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@v4.4.0 uses: JamesIves/github-pages-deploy-action@4.1.1
with: with:
branch: gh-pages branch: gh-pages
folder: packages/vant/site-dist folder: packages/vant/site-dist
target-folder: v4 target-folder: v4
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/v4

View File

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

View File

@ -7,7 +7,7 @@ on:
pull_request: pull_request:
branches: branches:
- main - dev
workflow_dispatch: workflow_dispatch:

1
.nvmrc
View File

@ -1 +0,0 @@
lts/Gallium

View File

@ -92,15 +92,16 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
| --- | --- | | --- | --- |
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | WeChat MiniProgram UI | | [vant-weapp](https://github.com/vant-ui/vant-weapp) | WeChat MiniProgram UI |
| [vant-demo](https://github.com/vant-ui/vant-demo) | Collection of Vant demos | | [vant-demo](https://github.com/vant-ui/vant-demo) | Collection of Vant demos |
| [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | Scaffold for UI library | | [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
| [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant icons | | [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant icons |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | Using vant in desktop browsers | | [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
## Community Ecosystem ## Community Ecosystem
| Project | Description | | Project | Description |
| --- | --- | | --- | --- |
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components based on Vant | | [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components based on Vant |
| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | React mobile UI Components based on Vant |
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Alipay MiniProgram UI | | [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Alipay MiniProgram UI |
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro | | [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
| [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI | | [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |
@ -111,7 +112,7 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
- [Documentation](https://vant-ui.github.io/vant) - [Documentation](https://vant-ui.github.io/vant)
- [Changelog](https://vant-ui.github.io/vant#/en-US/changelog) - [Changelog](https://vant-ui.github.io/vant#/en-US/changelog)
- [Discussions](https://github.com/vant-ui/vant/discussions) - [Gitter](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
## Preview ## Preview

View File

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

View File

@ -14,9 +14,6 @@
"*.{ts,tsx,js,vue,less}": "prettier --write", "*.{ts,tsx,js,vue,less}": "prettier --write",
"*.{ts,tsx,js,vue}": "eslint --fix" "*.{ts,tsx,js,vue}": "eslint --fix"
}, },
"engines": {
"pnpm": ">= 7.0.0"
},
"packageManager": "pnpm@7.11.0", "packageManager": "pnpm@7.11.0",
"devDependencies": { "devDependencies": {
"@vant/cli": "workspace:*", "@vant/cli": "workspace:*",
@ -28,9 +25,6 @@
"rimraf": "^3.0.2" "rimraf": "^3.0.2"
}, },
"pnpm": { "pnpm": {
"overrides": {
"esbuild": "^0.14"
},
"peerDependencyRules": { "peerDependencyRules": {
"ignoreMissing": [ "ignoreMissing": [
"@algolia/client-search", "@algolia/client-search",

View File

@ -31,7 +31,7 @@
"vue": "^3.0.0" "vue": "^3.0.0"
}, },
"devDependencies": { "devDependencies": {
"@vant/cli": "^5.0.0", "@vant/cli": "^4.0.0",
"vue": "^3.0.0", "vue": "^3.0.0",
"sass": "^1.49.7" "sass": "^1.49.7"
}, },

View File

@ -1,6 +1,6 @@
{ {
"name": "create-vant-cli-app", "name": "create-vant-cli-app",
"version": "2.1.0", "version": "2.0.1",
"description": "Create Vant CLI App", "description": "Create Vant CLI App",
"main": "lib/index.js", "main": "lib/index.js",
"bin": { "bin": {

View File

@ -36,7 +36,7 @@
"author": "chenjiahan", "author": "chenjiahan",
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"esbuild": "^0.15.9", "esbuild": "^0.14.54",
"release-it": "^15.4.1", "release-it": "^15.4.1",
"typescript": "^4.8.2" "typescript": "^4.8.2"
}, },

View File

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

View File

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

View File

@ -1,36 +1,14 @@
# 更新日志 # 更新日志
## v5.1.0 ## v5.0.0 (未发布)
`2022-11-05`
- 支持读取 `vite.config.ts` 文件来自定义 vite 配置
- 修复设置 vite 的 `server.port` 配置项不生效的问题
## v5.0.2
`2022-10-07`
- 修复首次运行 dev 时 vite 引入了两份 Vue 代码导致渲染失败的问题
## v5.0.1
`2022-10-06`
- 修复 jest 版本未正确升级的问题
## v5.0.0
### 依赖升级 ### 依赖升级
`2022-10-06`
对以下依赖进行了大版本升级: 对以下依赖进行了大版本升级:
- vite: 由 v2 升级至 v3 - vite v3
- jest: 由 v27 升级至 v29 - @vitejs/plugin-vue v3
- @vitejs/plugin-vue: 由 v2 升级至 v3 - @vitejs/plugin-vue-jsx v2
- @vitejs/plugin-vue-jsx: 由 v1 升级至 v2
### 依赖精简 ### 依赖精简

View File

@ -29,10 +29,6 @@ const DEFAULT_CONFIG = {
], ],
coverageReporters: ['html', 'lcov', 'text-summary'], coverageReporters: ['html', 'lcov', 'text-summary'],
coverageDirectory: './test/coverage', coverageDirectory: './test/coverage',
testEnvironmentOptions: {
// https://stackoverflow.com/questions/72428323/jest-referenceerror-vue-is-not-defined
customExportConditions: ['node', 'node-addons'],
},
}; };
function readRootConfig() { function readRootConfig() {

View File

@ -87,8 +87,6 @@ module.exports = {
if (isJsxFile(path)) { if (isJsxFile(path)) {
code = transformJsx(code, path); code = transformJsx(code, path);
} }
return { return transformScript(code);
code: transformScript(code)
};
}, },
}; };

View File

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

View File

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

View File

@ -177,16 +177,17 @@ When set to `true`, `export * from 'xxx'` will be used to export all modules and
### build.configureVite ### build.configureVite
- Type: `(config: InlineConfig): InlineConfig | undefined` - Type: `(config: InlineConfig): InlineConfig`
- Default: `undefined` - Default: `undefined`
Custom [vite config](https://vitejs.dev/config/), requires `@vant/cli>= 4.0.0`. Custom vite config(`@vant/cli>= 4.0.0`)
```js ```js
module.exports = { module.exports = {
build: { build: {
configureVite(config) { configureVite(config) {
config.server.port = 3000; // add vite plugin
config.plugins.push(vitePluginXXX);
return config; return config;
}, },
}, },
@ -213,10 +214,6 @@ module.exports = {
}; };
``` ```
Note that you are not allowed to import vite plugins in `vant.config.mjs`, because the file will be bundled into the website code.
If you need to configure some vite plugins, please create a `vite.config.ts` file in the same directory of `vant.config.mjs`, in which you can add any vite configuration (this feature requires @vant/cli 5.1.0).
### build.packageManager ### build.packageManager
- Type: `'npm' | 'yarn' | 'pnpm'` - Type: `'npm' | 'yarn' | 'pnpm'`

View File

@ -177,16 +177,17 @@ module.exports = {
### build.configureVite ### build.configureVite
- Type: `(config: InlineConfig): InlineConfig | undefined` - Type: `(config: InlineConfig): InlineConfig`
- Default: `undefined` - Default: `undefined`
vant-cli 使用 vite 来构建组件库和文档站点,通过 `configureVite` 选项可以自定义 [vite 配置](https://vitejs.dev/config/)(从 4.0.0 版本开始支持)。 vant-cli 使用 vite 来构建组件库和文档站点,通过 `configureVite` 选项可以自定义 vite 配置(从 4.0.0 版本开始支持)。
```js ```js
module.exports = { module.exports = {
build: { build: {
configureVite(config) { configureVite(config) {
config.server.port = 3000; // 添加一个自定义插件
config.plugins.push(vitePluginXXX);
return config; return config;
}, },
}, },
@ -215,10 +216,6 @@ module.exports = {
}; };
``` ```
注意,由于 `vant.config.mjs` 文件会被打包到文档网站的代码中,因此 `configureVite` 中不允许引用 vite 插件。
如果需要配置 vite 插件,可以在 `vant.config.mjs` 的同级目录下创建 `vite.config.ts` 文件,在该文件中你可以添加任意的 vite 配置(该特性从 @vant/cli 5.1.0 版本开始支持)。
### build.packageManager ### build.packageManager
- Type: `'npm' | 'yarn' | 'pnpm'` - Type: `'npm' | 'yarn' | 'pnpm'`

View File

@ -1,6 +1,6 @@
{ {
"name": "@vant/cli", "name": "@vant/cli",
"version": "5.1.0", "version": "4.0.4",
"type": "module", "type": "module",
"main": "lib/index.js", "main": "lib/index.js",
"typings": "lib/index.d.ts", "typings": "lib/index.d.ts",
@ -39,20 +39,20 @@
"author": "chenjiahan", "author": "chenjiahan",
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"@jest/types": "^29.1.2", "@jest/types": "^27.5.1",
"@types/fs-extra": "^9.0.13", "@types/fs-extra": "^9.0.13",
"@types/less": "^3.0.3", "@types/less": "^3.0.3",
"@types/markdown-it": "^12.2.3", "@types/markdown-it": "^12.2.3",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"vue": "^3.2.45" "vue": "^3.2.38"
}, },
"dependencies": { "dependencies": {
"@babel/core": "^7.18.13", "@babel/core": "^7.18.13",
"@babel/preset-typescript": "^7.18.6", "@babel/preset-typescript": "^7.18.6",
"@docsearch/css": "^3.2.1", "@docsearch/css": "^3.2.1",
"@docsearch/js": "^3.2.1", "@docsearch/js": "^3.2.1",
"@types/jest": "^29.1.1", "@types/jest": "^27.5.2",
"@vant/eslint-config": "^3.5.0", "@vant/eslint-config": "^3.5.0",
"@vant/touch-emulator": "^1.4.0", "@vant/touch-emulator": "^1.4.0",
"@vitejs/plugin-vue": "^3.0.3", "@vitejs/plugin-vue": "^3.0.3",
@ -62,7 +62,7 @@
"commander": "^9.4.0", "commander": "^9.4.0",
"consola": "^2.15.3", "consola": "^2.15.3",
"conventional-changelog": "^3.1.25", "conventional-changelog": "^3.1.25",
"esbuild": "^0.15.9", "esbuild": "^0.14.54",
"eslint": "^8.23.0", "eslint": "^8.23.0",
"execa": "^5.1.1", "execa": "^5.1.1",
"fast-glob": "^3.2.11", "fast-glob": "^3.2.11",
@ -70,10 +70,9 @@
"hash-sum": "^2.0.0", "hash-sum": "^2.0.0",
"highlight.js": "^11.6.0", "highlight.js": "^11.6.0",
"husky": "^8.0.1", "husky": "^8.0.1",
"jest": "^29.1.2", "jest": "^27.5.1",
"jest-canvas-mock": "^2.4.0", "jest-canvas-mock": "^2.4.0",
"jest-serializer-html": "^7.1.0", "jest-serializer-html": "^7.1.0",
"jest-environment-jsdom": "^29.1.2",
"less": "^4.1.3", "less": "^4.1.3",
"markdown-it": "^12.3.2", "markdown-it": "^12.3.2",
"markdown-it-anchor": "^8.6.4", "markdown-it-anchor": "^8.6.4",
@ -86,7 +85,7 @@
"release-it": "^15.4.1", "release-it": "^15.4.1",
"transliteration": "^2.3.5", "transliteration": "^2.3.5",
"typescript": "^4.8.2", "typescript": "^4.8.2",
"vite": "3.1.8", "vite": "^3.0.9",
"vite-plugin-html": "^2.1.2", "vite-plugin-html": "^2.1.2",
"vite-plugin-md": "^0.11.9", "vite-plugin-md": "^0.11.9",
"vue-router": "^4.1.5" "vue-router": "^4.1.5"

View File

@ -1,4 +1,4 @@
:root { body {
// colors // colors
--van-doc-black: #000; --van-doc-black: #000;
--van-doc-white: #fff; --van-doc-white: #fff;
@ -44,7 +44,7 @@
--van-doc-code-background: var(--van-doc-gray-1); --van-doc-code-background: var(--van-doc-gray-1);
// blockquote // blockquote
--van-doc-blockquote-color: #2f85da; --van-doc-blockquote-color: #4994df;
--van-doc-blockquote-background: #ecf9ff; --van-doc-blockquote-background: #ecf9ff;
} }

View File

@ -303,8 +303,7 @@ export default {
> blockquote { > blockquote {
margin: 16px 0 0; margin: 16px 0 0;
padding: 16px; padding: 16px;
font-size: 15px; font-size: 14px;
line-height: 26px;
color: var(--van-doc-blockquote-color); color: var(--van-doc-blockquote-color);
background-color: var(--van-doc-blockquote-background); background-color: var(--van-doc-blockquote-background);
border-radius: var(--van-doc-border-radius); border-radius: var(--van-doc-border-radius);

View File

@ -138,8 +138,8 @@ export default {
currentTheme: { currentTheme: {
handler(newVal, oldVal) { handler(newVal, oldVal) {
window.localStorage.setItem('vantTheme', newVal); window.localStorage.setItem('vantTheme', newVal);
document.documentElement.classList.remove(`van-doc-theme-${oldVal}`); document.body.classList.remove(`van-doc-theme-${oldVal}`);
document.documentElement.classList.add(`van-doc-theme-${newVal}`); document.body.classList.add(`van-doc-theme-${newVal}`);
syncThemeToChild(newVal); syncThemeToChild(newVal);
}, },
immediate: true, immediate: true,

View File

@ -24,21 +24,12 @@ export default {
watch( watch(
theme, theme,
(newVal, oldVal) => { (newVal, oldVal) => {
document.documentElement.classList.remove(`van-doc-theme-${oldVal}`); document.body.classList.remove(`van-doc-theme-${oldVal}`);
document.documentElement.classList.add(`van-doc-theme-${newVal}`); document.body.classList.add(`van-doc-theme-${newVal}`);
const { darkModeClass, lightModeClass } = config.site; const { darkModeClass } = config.site;
if (darkModeClass) { if (darkModeClass) {
document.documentElement.classList.toggle( document.body.classList.toggle(darkModeClass, newVal === 'dark');
darkModeClass,
newVal === 'dark'
);
}
if (lightModeClass) {
document.documentElement.classList.toggle(
lightModeClass,
newVal === 'light'
);
} }
}, },
{ immediate: true } { immediate: true }
@ -52,7 +43,6 @@ export default {
body { body {
min-width: 100vw; min-width: 100vw;
background-color: inherit;
} }
.van-doc-theme-light { .van-doc-theme-light {

View File

@ -1,7 +1,7 @@
import fse from 'fs-extra'; import fse from 'fs-extra';
import { sep, join } from 'path'; import { sep, join } from 'path';
import { SRC_DIR, getVantConfig } from './constant.js'; import { SRC_DIR, getVantConfig } from './constant.js';
import { InlineConfig, loadConfigFromFile, mergeConfig } from 'vite'; import type { InlineConfig } from 'vite';
const { lstatSync, existsSync, readdirSync, readFileSync, outputFileSync } = const { lstatSync, existsSync, readdirSync, readFileSync, outputFileSync } =
fse; fse;
@ -114,33 +114,13 @@ export function smartOutputFile(filePath: string, content: string) {
outputFileSync(filePath, content); outputFileSync(filePath, content);
} }
export async function mergeCustomViteConfig( export function mergeCustomViteConfig(config: InlineConfig) {
config: InlineConfig,
mode: 'production' | 'development'
): Promise<InlineConfig> {
const vantConfig = getVantConfig(); const vantConfig = getVantConfig();
const configureVite = vantConfig.build?.configureVite; const configureVite = vantConfig.build?.configureVite;
const userConfig = await loadConfigFromFile(
{
mode,
command: mode === 'development' ? 'serve' : 'build',
},
undefined,
process.cwd()
);
if (configureVite) { if (configureVite) {
const ret = configureVite(config); return configureVite(config);
if (ret) {
config = ret;
} }
}
if (userConfig) {
return mergeConfig(config, userConfig.config);
}
return config; return config;
} }

View File

@ -34,13 +34,8 @@ export async function compileBundles() {
getVantConfig().build?.bundleOptions || DEFAULT_OPTIONS; getVantConfig().build?.bundleOptions || DEFAULT_OPTIONS;
await Promise.all( await Promise.all(
bundleOptions.map(async (config) => bundleOptions.map((config) =>
build( build(mergeCustomViteConfig(getViteConfigForPackage(config)))
await mergeCustomViteConfig(
getViteConfigForPackage(config),
'production'
)
)
) )
); );
} }

View File

@ -29,18 +29,12 @@ export function genSiteEntry(): Promise<void> {
export async function compileSite(production = false) { export async function compileSite(production = false) {
await genSiteEntry(); await genSiteEntry();
if (production) { if (production) {
const config = await mergeCustomViteConfig( const config = mergeCustomViteConfig(getViteConfigForSiteProd());
getViteConfigForSiteProd(),
'production'
);
await build(config); await build(config);
} else { } else {
const config = await mergeCustomViteConfig( const config = mergeCustomViteConfig(getViteConfigForSiteDev());
getViteConfigForSiteDev(),
'development'
);
const server = await createServer(config); const server = await createServer(config);
await server.listen(config.server?.port); await server.listen();
const require = createRequire(import.meta.url); const require = createRequire(import.meta.url);
const { version } = require('vite/package.json'); const { version } = require('vite/package.json');

View File

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

View File

@ -1,6 +1,11 @@
/* eslint-disable no-continue */ /* eslint-disable no-continue */
import { Articles } from './parser.js'; import { Articles } from './parser.js';
import { formatType, removeVersion, toKebabCase } from './utils.js'; import {
formatOptions,
formatType,
removeVersion,
toKebabCase,
} from './utils.js';
import { VueEventArgument, VueTag } from './type.js'; import { VueEventArgument, VueTag } from './type.js';
function formatComponentName(name: string, tagPrefix: string) { function formatComponentName(name: string, tagPrefix: string) {
@ -61,6 +66,9 @@ function findTag(vueTags: VueTag[], name: string) {
const newTag: VueTag = { const newTag: VueTag = {
name, name,
slots: [],
events: [],
attributes: [],
}; };
vueTags.push(newTag); vueTags.push(newTag);
@ -99,16 +107,12 @@ export function formatter(
const tag = findTag(vueTags, name); const tag = findTag(vueTags, name);
table.body.forEach((line) => { table.body.forEach((line) => {
const [name, desc, type, defaultVal] = line; const [name, desc, type, defaultVal, options] = line;
tag.attributes!.push({
if (!tag.attributes) {
tag.attributes = [];
}
tag.attributes.push({
name: removeVersion(name), name: removeVersion(name),
default: defaultVal, default: defaultVal,
description: desc, description: desc,
options: formatOptions(options),
value: { value: {
type: formatType(type), type: formatType(type),
kind: 'expression', kind: 'expression',
@ -124,12 +128,7 @@ export function formatter(
table.body.forEach((line) => { table.body.forEach((line) => {
const [name, desc, args] = line; const [name, desc, args] = line;
tag.events!.push({
if (!tag.events) {
tag.events = [];
}
tag.events.push({
name: removeVersion(name), name: removeVersion(name),
description: desc, description: desc,
arguments: formatArguments(args), arguments: formatArguments(args),
@ -144,12 +143,7 @@ export function formatter(
table.body.forEach((line) => { table.body.forEach((line) => {
const [name, desc] = line; const [name, desc] = line;
tag.slots!.push({
if (!tag.slots) {
tag.slots = [];
}
tag.slots.push({
name: removeVersion(name), name: removeVersion(name),
description: desc, description: desc,
}); });

View File

@ -36,7 +36,7 @@ export async function parseAndWrite(options: Options) {
const webTypes = genWebTypes(vueTags, options); const webTypes = genWebTypes(vueTags, options);
fse.outputFileSync( fse.outputFileSync(
join(options.outputDir, 'web-types.json'), join(options.outputDir, 'web-types.json'),
JSON.stringify(webTypes) JSON.stringify(webTypes, null, 2)
); );
} }

View File

@ -20,6 +20,7 @@ export type VueAttribute = {
name: string; name: string;
default: string; default: string;
description: string; description: string;
options: string[];
value: { value: {
kind: 'expression'; kind: 'expression';
type: string; type: string;

View File

@ -20,3 +20,9 @@ export function formatType(type: string) {
export function normalizePath(path: string): string { export function normalizePath(path: string): string {
return path.replace(/\\/g, '/'); return path.replace(/\\/g, '/');
} }
// `default` `primary` -> ['default', 'primary']
export function formatOptions(options?: string) {
if (!options) return [];
return options.replace(/`/g, '').split(' ');
}

View File

@ -12,8 +12,8 @@ export function genWebTypes(tags: VueTag[], options: Options) {
html: { html: {
tags, tags,
attributes: [], attributes: [],
'types-syntax': 'typescript',
}, },
}, },
'js-types-syntax': 'typescript',
}; };
} }

View File

@ -144,11 +144,6 @@ export function getViteConfigForSiteDev(): InlineConfig {
return { return {
root: SITE_SRC_DIR, root: SITE_SRC_DIR,
optimizeDeps: {
// https://github.com/youzan/vant/issues/10930
include: ['vue', 'vue-router'],
},
plugins: [ plugins: [
vitePluginGenVantBaseCode(), vitePluginGenVantBaseCode(),
vitePluginVue({ vitePluginVue({

View File

@ -38,8 +38,8 @@
"devDependencies": { "devDependencies": {
"@vue/runtime-core": "^3.2.27", "@vue/runtime-core": "^3.2.27",
"vant": "workspace:*", "vant": "workspace:*",
"vue": "^3.2.45", "vue": "^3.2.27",
"esbuild": "^0.15.9", "esbuild": "^0.14.29",
"release-it": "^15.1.1", "release-it": "^15.1.1",
"typescript": "^4.7.4" "typescript": "^4.7.4"
}, },

View File

@ -1,6 +1,6 @@
{ {
"name": "@vant/popperjs", "name": "@vant/popperjs",
"version": "1.3.0", "version": "1.2.1",
"description": "Pre-compiled popperjs core", "description": "Pre-compiled popperjs core",
"main": "dist/index.cjs.js", "main": "dist/index.cjs.js",
"module": "dist/index.esm.mjs", "module": "dist/index.esm.mjs",
@ -36,9 +36,11 @@
"bugs": "https://github.com/vant-ui/vant/issues", "bugs": "https://github.com/vant-ui/vant/issues",
"author": "chenjiahan", "author": "chenjiahan",
"license": "MIT", "license": "MIT",
"dependencies": {
"@popperjs/core": "^2.11.6"
},
"devDependencies": { "devDependencies": {
"@popperjs/core": "^2.11.6", "esbuild": "^0.14.54",
"esbuild": "^0.15.9",
"release-it": "^15.4.1", "release-it": "^15.4.1",
"typescript": "^4.8.2" "typescript": "^4.8.2"
}, },

View File

@ -1,6 +1,6 @@
import { createPopper } from '@popperjs/core/lib/popper-lite'; import { createPopper } from '@popperjs/core/lib/popper-lite';
import offsetModifier from '@popperjs/core/lib/modifiers/offset'; import offsetModifier from '@popperjs/core/lib/modifiers/offset';
import type { Instance } from '@popperjs/core'; import type { Instance, Placement } from '@popperjs/core';
export { createPopper, offsetModifier }; export { createPopper, offsetModifier };
export type { Instance }; export type { Instance, Placement };

View File

@ -1,13 +1,5 @@
# Changelog # Changelog
## v1.4.3
- improve `useEventListener` typing
## v1.4.2
- `useClickAway` support multiple targets
## v1.4.1 ## v1.4.1
- Add `exports` field to package.json, support nuxt 3. - Add `exports` field to package.json, support nuxt 3.

View File

@ -1,6 +1,6 @@
{ {
"name": "@vant/use", "name": "@vant/use",
"version": "1.4.3", "version": "1.4.2",
"description": "Vant Composition API", "description": "Vant Composition API",
"main": "dist/index.cjs.js", "main": "dist/index.cjs.js",
"module": "dist/index.esm.mjs", "module": "dist/index.esm.mjs",
@ -37,10 +37,10 @@
"author": "chenjiahan", "author": "chenjiahan",
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"esbuild": "^0.15.9", "esbuild": "^0.14.54",
"release-it": "^15.4.1", "release-it": "^15.4.1",
"typescript": "^4.8.2", "typescript": "^4.8.2",
"vue": "^3.2.45" "vue": "^3.2.38"
}, },
"release-it": { "release-it": {
"git": { "git": {

View File

@ -0,0 +1,4 @@
node_modules
dist
lib
*.tsx

View File

@ -132,7 +132,7 @@ module.exports = {
### Adapt to PC Browsers ### Adapt to PC Browsers
Vant is a mobile-first component library, if you want to use Vant in PC browsers, you can use the [@vant/touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) module. This module will automatically convert the mouse events of the PC browser into the touch events of the mobile browser. Vant is a mobile-first component library, if you want to use Vant in PC browsers, you can use the [@vant/touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) module. This module will automatically convert the mouse events of the PC browser into the touch events of the mobile browser.
```bash ```bash
# Install # Install

View File

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

View File

@ -19,132 +19,6 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
## Details ## Details
### [v4.0.0-rc.8](https://github.com/vant-ui/vant/compare/v4.0.0-rc.7...v4.0.0-rc.8)
`2022-11-20`
**Feature**
- add new BackTop component, note that the API is not stable yet, we may change the API before 4.0 release. [#11236](https://github.com/vant-ui/vant/issues/11236)
**Bug Fixes**
- DropdownItem: should inherit attrs when using teleport [#11273](https://github.com/vant-ui/vant/issues/11273)
- List: incorrect initial loading value [#11275](https://github.com/vant-ui/vant/issues/11275)
- NumberKeyboard: should inherit attrs when using teleport [#11274](https://github.com/vant-ui/vant/issues/11274)
### [v4.0.0-rc.7](https://github.com/vant-ui/vant/compare/v4.0.0-rc.6...v4.0.0-rc.7)
`2022-11-13`
**New Component**
- Add new SkeletonAvatar、SkeletonTitle、SkeletonImage、SkeletonParagraph components [#11173](https://github.com/vant-ui/vant/issues/11173)
**Feature**
- ImagePreview: add long-press event [#11252](https://github.com/vant-ui/vant/issues/11252)
- Popover: support uncontrolled mode [#11244](https://github.com/vant-ui/vant/issues/11244)
**Bug Fixes**
- ActionSheet: fix that close is invalid without title [#11213](https://github.com/vant-ui/vant/issues/11213)
- DatePicker: only throw error in development [#11248](https://github.com/vant-ui/vant/issues/11248)
- Lazyload: lazy-image h is not a function [#11229](https://github.com/vant-ui/vant/issues/11229)
- Picker: correct v-model when emit confirm event [#11194](https://github.com/vant-ui/vant/issues/11194)
- Picker: empty column will cause error [#11249](https://github.com/vant-ui/vant/issues/11249)
- Uploader: chooseFile is invalid when show-upload is false [#11218](https://github.com/vant-ui/vant/issues/11218)
### [v4.0.0-rc.6](https://github.com/vant-ui/vant/compare/v4.0.0-rc.5...v4.0.0-rc.6)
`2022-10-23`
**Feature**
- Calendar: add params for subtitle slot [#11168](https://github.com/vant-ui/vant/issues/11168)
- Cell: add tag prop [#11139](https://github.com/vant-ui/vant/issues/11139)
- ImagePreview: add image slot [#11133](https://github.com/vant-ui/vant/issues/11133)
- Toast: add wordBreak prop [#11147](https://github.com/vant-ui/vant/issues/11147)
**Bug Fixes**
- CouponList: fix the style of coupon checkbox [#11153](https://github.com/vant-ui/vant/issues/11153)
- CouponList: incorrect field style [#11155](https://github.com/vant-ui/vant/issues/11155)
- Swipe: failed to render when inside popup [#11162](https://github.com/vant-ui/vant/issues/11162)
### [v4.0.0-rc.5](https://github.com/vant-ui/vant/compare/v4.0.0-rc.4...v4.0.0-rc.5)
`2022-10-07`
**Feature**
- Field: support label-position top [#11102](https://github.com/vant-ui/vant/issues/11102)
- Loading: add icon slot [#11109](https://github.com/vant-ui/vant/issues/11109)
- NavBar: add clickable prop [#11048](https://github.com/vant-ui/vant/issues/11048)
- Stepper: add auto-fixed prop [#11071](https://github.com/vant-ui/vant/issues/11071)
**Bug Fixes**
- DatePicker: format value when exceed max date [#11122](https://github.com/vant-ui/vant/issues/11122)
- Tabs: incorrect nav scroll animation in some cases [#11116](https://github.com/vant-ui/vant/issues/11116)
- Tabs: scroll position when using nav-bottom slot [#11115](https://github.com/vant-ui/vant/issues/11115)
### [v4.0.0-rc.4](https://github.com/vant-ui/vant/compare/v4.0.0-rc.3...v4.0.0-rc.4)
`2022-09-25`
**Feature**
- Field: add message param to 'end-validate' method [#11080](https://github.com/vant-ui/vant/issues/11080)
**Bug Fixes**
- Tabs: incorrect scroll position in some cases [#11085](https://github.com/vant-ui/vant/issues/11085)
- Tabs: incorrect scroll position when inited [#11059](https://github.com/vant-ui/vant/issues/11059)
### [v4.0.0-rc.3](https://github.com/vant-ui/vant/compare/v4.0.0-rc.2...v4.0.0-rc.3)
`2022-09-12`
**Feature**
- ConfigProvider: add ConfigProviderThemeVars type [#11034](https://github.com/vant-ui/vant/issues/11034)
- Notify: add z-index prop [#11032](https://github.com/vant-ui/vant/issues/11032)
- remove popperjs to reduce install size [#11030](https://github.com/vant-ui/vant/issues/11030)
**Types**
- Toast: fix missing global components type [#11033](https://github.com/vant-ui/vant/issues/11033)
### [v4.0.0-rc.2](https://github.com/vant-ui/vant/compare/v4.0.0-rc.1...v4.0.0-rc.2)
`2022-09-11`
**Breaking Changes**
- attach css variables to :root element [#11026](https://github.com/vant-ui/vant/issues/11026)
**Bug Fixes**
- Dialog: incorrect transform behavior [#11028](https://github.com/vant-ui/vant/issues/11028)
- Empty: fix opacity in dark mode [#11027](https://github.com/vant-ui/vant/issues/11027)
### [v4.0.0-rc.1](https://github.com/vant-ui/vant/compare/v4.0.0-rc.0...v4.0.0-rc.1)
`2022-09-10`
**Feature**
- export props of all components [#11024](https://github.com/vant-ui/vant/issues/11024)
- Dialog: message-align can be justify [#11014](https://github.com/vant-ui/vant/issues/11014)
- Image: add block prop [#11022](https://github.com/vant-ui/vant/issues/11022)
- Toast: add message slot [#11018](https://github.com/vant-ui/vant/issues/11018)
**Bug Fixes**
- Picker: failed to update value in some cases [#11009](https://github.com/vant-ui/vant/issues/11009)
- Locale: avoid getting unexpected value [#11010](https://github.com/vant-ui/vant/issues/11010)
### [v4.0.0-rc.0](https://github.com/vant-ui/vant/compare/v3.6.2...v4.0.0-rc.0) ### [v4.0.0-rc.0](https://github.com/vant-ui/vant/compare/v3.6.2...v4.0.0-rc.0)
`2022-09-04` `2022-09-04`

View File

@ -19,132 +19,6 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
## 更新内容 ## 更新内容
### [v4.0.0-rc.8](https://github.com/vant-ui/vant/compare/v4.0.0-rc.7...v4.0.0-rc.8)
`2022-11-20`
**Feature**
- 新增 BackTop 回到顶部组件,注意该新组件的 API 尚未稳定,在 4.0 正式版发布前仍可能产生 breaking change [#11236](https://github.com/vant-ui/vant/issues/11236)
**Bug Fixes**
- DropdownItem: 修复使用 teleport 时无法设置 attr 的问题 [#11273](https://github.com/vant-ui/vant/issues/11273)
- List: 修复初始的 loading 值为 true 时加载错误的问题 [#11275](https://github.com/vant-ui/vant/issues/11275)
- NumberKeyboard: 修复使用 teleport 时无法设置 attr 的问题 [#11274](https://github.com/vant-ui/vant/issues/11274)
### [v4.0.0-rc.7](https://github.com/vant-ui/vant/compare/v4.0.0-rc.6...v4.0.0-rc.7)
`2022-11-13`
**New Component**
- 新增 SkeletonAvatar、SkeletonTitle、SkeletonImage、SkeletonParagraph 组件 [#11173](https://github.com/vant-ui/vant/issues/11173)
**Feature**
- ImagePreview: 新增 long-press 事件 [#11252](https://github.com/vant-ui/vant/issues/11252)
- Popover: 支持非受控模式 [#11244](https://github.com/vant-ui/vant/issues/11244)
**Bug Fixes**
- ActionSheet: 修复标题为空时取消按钮层级错误的问题 [#11213](https://github.com/vant-ui/vant/issues/11213)
- DatePicker: 在生产环境下不再抛出开发错误提示 [#11248](https://github.com/vant-ui/vant/issues/11248)
- Lazyload: 修复使用 lazy-image 时报错 h is not a function 的问题 [#11229](https://github.com/vant-ui/vant/issues/11229)
- Picker: 修复抛出 confirm 事件时 v-model 未正确更新的问题 [#11194](https://github.com/vant-ui/vant/issues/11194)
- Picker: 修复 column 为空时操作报错的问题 [#11249](https://github.com/vant-ui/vant/issues/11249)
- Uploader: 修复 show-upload 为 false 时 chooseFile 无法调用的问题 [#11218](https://github.com/vant-ui/vant/issues/11218)
### [v4.0.0-rc.6](https://github.com/vant-ui/vant/compare/v4.0.0-rc.5...v4.0.0-rc.6)
`2022-10-23`
**Feature**
- Calendar: subtitle 插槽新增 text 和 date 入参 [#11168](https://github.com/vant-ui/vant/issues/11168)
- Cell: 新增 tag 属性 [#11139](https://github.com/vant-ui/vant/issues/11139)
- ImagePreview: 新增 image 插槽 [#11133](https://github.com/vant-ui/vant/issues/11133)
- Toast: 新增 wordBreak 选项 [#11147](https://github.com/vant-ui/vant/issues/11147)
**Bug Fixes**
- CouponList: 修复 coupon 位置错误的问题 [#11153](https://github.com/vant-ui/vant/issues/11153)
- CouponList: 修复输入框样式错误的问题 [#11155](https://github.com/vant-ui/vant/issues/11155)
- Swipe: 修复在 Popup 内时个别情况下渲染错误的问题 [#11162](https://github.com/vant-ui/vant/issues/11162)
### [v4.0.0-rc.5](https://github.com/vant-ui/vant/compare/v4.0.0-rc.4...v4.0.0-rc.5)
`2022-10-07`
**Feature**
- Field: 支持将 label-position 设置为 top [#11102](https://github.com/vant-ui/vant/issues/11102)
- Loading: 新增 icon 插槽 [#11109](https://github.com/vant-ui/vant/issues/11109)
- NavBar: 新增 clickable 属性 [#11048](https://github.com/vant-ui/vant/issues/11048)
- Stepper: 新增 auto-fixed 属性 [#11071](https://github.com/vant-ui/vant/issues/11071)
**Bug Fixes**
- DatePicker: 修复日期超出 maxDate 时格式化不正确的问题 [#11122](https://github.com/vant-ui/vant/issues/11122)
- Tabs: 修复开启 scrollspy 时个别情况下标题栏滚动位置错误的问题 [#11116](https://github.com/vant-ui/vant/issues/11116)
- Tabs: 修复开启 scrollspy 时 nav-bottom 插槽遮挡内容的问题 [#11115](https://github.com/vant-ui/vant/issues/11115)
### [v4.0.0-rc.4](https://github.com/vant-ui/vant/compare/v4.0.0-rc.3...v4.0.0-rc.4)
`2022-09-25`
**Feature**
- Field: end-validate 事件新增 message 参数 [#11080](https://github.com/vant-ui/vant/issues/11080)
**Bug Fixes**
- Tabs: 修复个别情况下页面滚动位置错误的问题 [#11085](https://github.com/vant-ui/vant/issues/11085)
- Tabs: 修复初始化时菜单横向滚动位置错误的问题 [#11059](https://github.com/vant-ui/vant/issues/11059)
### [v4.0.0-rc.3](https://github.com/vant-ui/vant/compare/v4.0.0-rc.2...v4.0.0-rc.3)
`2022-09-12`
**Feature**
- ConfigProvider: 新增 ConfigProviderThemeVars 类型 [#11034](https://github.com/vant-ui/vant/issues/11034)
- Notify: 新增 z-index 属性 [#11032](https://github.com/vant-ui/vant/issues/11032)
- 移除 `@popperjs/core` 依赖,减少安装体积 1.6MB [#11030](https://github.com/vant-ui/vant/issues/11030)
**Types**
- Toast: 修复缺少全局类型定义的问题 [#11033](https://github.com/vant-ui/vant/issues/11033)
### [v4.0.0-rc.2](https://github.com/vant-ui/vant/compare/v4.0.0-rc.1...v4.0.0-rc.2)
`2022-09-11`
**Breaking Changes**
- 调整了所有 CSS 变量的挂载位置,由 `body` 节点调整回 `:root` 节点,调整后与 Vant v3 版本保持一致,以便于 v3 项目更平滑地升级到 v4 版本。 [#11026](https://github.com/vant-ui/vant/issues/11026)
**Bug Fixes**
- Dialog: 修复过渡动画异常的问题 [#11028](https://github.com/vant-ui/vant/issues/11028)
- Empty: 修复深色模式下亮度过高的问题 [#11027](https://github.com/vant-ui/vant/issues/11027)
### [v4.0.0-rc.1](https://github.com/vant-ui/vant/compare/v4.0.0-rc.0...v4.0.0-rc.1)
`2022-09-10`
**Feature**
- 导出所有组件的 props方便进行二次封装 [#11024](https://github.com/vant-ui/vant/issues/11024)
- Dialog: message-align 属性支持设置为 justify [#11014](https://github.com/vant-ui/vant/issues/11014)
- Image: 新增 block 属性 [#11022](https://github.com/vant-ui/vant/issues/11022)
- Toast: 新增 message 插槽 [#11018](https://github.com/vant-ui/vant/issues/11018)
**Bug Fixes**
- Picker: 修复部分情况下未正确更新选中值的问题 [#11009](https://github.com/vant-ui/vant/issues/11009)
- Locale: 修复读取 i18n 文案时可能获取到 JS 原生方法的问题 [#11010](https://github.com/vant-ui/vant/issues/11010)
### [v4.0.0-rc.0](https://github.com/vant-ui/vant/compare/v3.6.2...v4.0.0-rc.0) ### [v4.0.0-rc.0](https://github.com/vant-ui/vant/compare/v3.6.2...v4.0.0-rc.0)
`2022-09-04` `2022-09-04`

View File

@ -22,7 +22,7 @@ Contains color specifications, font specifications, and component design specifi
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/tab_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)"> <img src="https://fastly.jsdelivr.net/npm/@vant/assets/tab_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
<a class="design-download" href="https://github.com/vant-ui/vant/blob/main/packages/vant/docs/assets/design.sketch?raw=true">Download</a> <a class="design-download" href="https://github.com/vant-ui/vant/blob/dev/packages/vant/docs/assets/design.sketch?raw=true">Download</a>
### Icons (Sketch) ### Icons (Sketch)
@ -30,7 +30,7 @@ Contains icon library resources.
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/design-icons-0321.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)"> <img src="https://fastly.jsdelivr.net/npm/@vant/assets/design-icons-0321.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
<a class="design-download" href="https://github.com/vant-ui/vant/blob/main/packages/vant-icons/assets/icons.sketch?raw=true">Download</a> <a class="design-download" href="https://github.com/vant-ui/vant/blob/dev/packages/vant-icons/assets/icons.sketch?raw=true">Download</a>
### Axure ### Axure

View File

@ -22,7 +22,7 @@
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/tab_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)"> <img src="https://fastly.jsdelivr.net/npm/@vant/assets/tab_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
<a class="design-download" href="https://github.com/vant-ui/vant/blob/main/packages/vant/docs/assets/design.sketch?raw=true">下载</a> <a class="design-download" href="https://github.com/vant-ui/vant/blob/dev/packages/vant/docs/assets/design.sketch?raw=true">下载</a>
### 图标设计稿Sketch ### 图标设计稿Sketch
@ -30,7 +30,7 @@
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/design-icons-0321.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)"> <img src="https://fastly.jsdelivr.net/npm/@vant/assets/design-icons-0321.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
<a class="design-download" href="https://github.com/vant-ui/vant/blob/main/packages/vant-icons/assets/icons.sketch?raw=true">下载</a> <a class="design-download" href="https://github.com/vant-ui/vant/blob/dev/packages/vant-icons/assets/icons.sketch?raw=true">下载</a>
#### 在线资源 #### 在线资源

View File

@ -68,12 +68,6 @@ Select 是桌面端常用的组件,但它的交互形式不适合移动端。
在移动端,我们推荐使用 [Picker 选择器组件](#/zh-CN/picker) 作为代替。 在移动端,我们推荐使用 [Picker 选择器组件](#/zh-CN/picker) 作为代替。
### 是否支持在 uni-app 中使用?
Vant 所有组件都是基于 Vue 框架实现的,没有针对 uni-app 进行适配,因此不保证各个组件在 uni-app 下的可用性。
如果你在 uni-app 中使用 Vant 遇到问题,建议向 uni-app 进行反馈。
### 部分组件无法在桌面端进行操作? ### 部分组件无法在桌面端进行操作?
参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。 参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。

View File

@ -41,15 +41,16 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
| --- | --- | | --- | --- |
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | WeChat MiniProgram UI | | [vant-weapp](https://github.com/vant-ui/vant-weapp) | WeChat MiniProgram UI |
| [vant-demo](https://github.com/vant-ui/vant-demo) | Collection of Vant demos | | [vant-demo](https://github.com/vant-ui/vant-demo) | Collection of Vant demos |
| [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | Scaffold for UI library | | [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
| [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant icons | | [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant icons |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | Using vant in desktop browsers | | [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
### Community Ecosystem ### Community Ecosystem
| Project | Description | | Project | Description |
| --- | --- | | --- | --- |
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components based on Vant | | [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components based on Vant |
| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | React Mobile UI Components Library |
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Alipay MiniProgram UI | | [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Alipay MiniProgram UI |
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro | | [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
| [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI | | [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |
@ -60,7 +61,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) - [Feedback](https://github.com/vant-ui/vant/issues)
- [Changelog](#/en-US/changelog) - [Changelog](#/en-US/changelog)
- [Discussions](https://github.com/vant-ui/vant/discussions) - [Gitter](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
## Contribution ## Contribution
@ -82,7 +83,7 @@ Thanks to the following friends for their contributions to Vant:
### Contribution Guide ### Contribution Guide
Please make sure to read the [Contributing Guide](https://github.com/vant-ui/vant/blob/main/.github/CONTRIBUTING.md) before making a pull request. Please make sure to read the [Contributing Guide](https://github.com/vant-ui/vant/blob/dev/.github/CONTRIBUTING.md) before making a pull request.
### LICENSE ### LICENSE

View File

@ -53,9 +53,9 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
| --- | --- | | --- | --- |
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | Vant 微信小程序版 | | [vant-weapp](https://github.com/vant-ui/vant-weapp) | Vant 微信小程序版 |
| [vant-demo](https://github.com/vant-ui/vant-demo) | Vant 官方示例合集 | | [vant-demo](https://github.com/vant-ui/vant-demo) | Vant 官方示例合集 |
| [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | 开箱即用的组件库搭建工具 | | [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
| [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant 图标库 | | [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 | | [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
### 社区生态 ### 社区生态
@ -64,6 +64,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
| 项目 | 描述 | | 项目 | 描述 |
| --- | --- | | --- | --- |
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | 参照 Vant 打造的 React 移动端组件库 | | [3lang3/react-vant](https://github.com/3lang3/react-vant) | 参照 Vant 打造的 React 移动端组件库 |
| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | 基于 Vant 的 React 版本移动端 UI 组件库 |
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Vant 支付宝小程序版 | | [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Vant 支付宝小程序版 |
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 | | [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 |
| [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 | | [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 |
@ -74,8 +75,8 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
- [意见反馈](https://github.com/vant-ui/vant/issues) - [意见反馈](https://github.com/vant-ui/vant/issues)
- [更新日志](#/zh-CN/changelog) - [更新日志](#/zh-CN/changelog)
- [码云镜像仓库](https://gitee.com/vant-contrib/vant) - [码云镜像](https://gitee.com/vant-contrib/vant)
- [Discussions 讨论区](https://github.com/vant-ui/vant/discussions) - [Gitter 讨论组](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
## 贡献 ## 贡献

View File

@ -41,14 +41,13 @@ import { showToast, showDialog } from 'vant';
而 CSS 代码的引入方式可以从以下两种方式中进行选择: 而 CSS 代码的引入方式可以从以下两种方式中进行选择:
- 通过 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件实现按需引入样式,详细用法参见 [快速上手](#/zh-CN/quickstart)。
- 在项目中全量引入 Vant 的样式文件: - 在项目中全量引入 Vant 的样式文件:
```js ```js
import 'vant/lib/index.css'; import 'vant/lib/index.css';
``` ```
- 通过 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件实现按需引入样式,详细用法参见 [快速上手](#/zh-CN/quickstart)。
## 组件重构 ## 组件重构
### 介绍 ### 介绍
@ -59,13 +58,12 @@ import 'vant/lib/index.css';
- `Picker` - `Picker`
- `DatetimePicker` - `DatetimePicker`
这三个组件之所以被重构,是因为在之前的版本中,`Picker` 组件的 API 设计存在一些不合理的设计,导致大家在使用时经常遇到问题,比如: 之所以重构这三个组件,是因为在之前的版本中,`Picker` 组件的 API 设计存在一些不合理的设计,导致大家在使用时经常遇到问题,比如:
- Picker columns 数据格式定义不合理,容易产生误解 - columns 数据格式定义不合理,容易产生误解
- Picker 数据流不清晰,暴露了过多的实例方法来对数据进行操作 - 数据流不清晰,暴露了过多的实例方法来对数据进行操作
- DatetimePicker 逻辑过于复杂,经常在边界场景下出现 bug
为了解决上述问题,我们在 v4 版本中对 `Picker` 组件进行了重构,同时也重构了基于 `Picker` 派生出的 `Area``DatetimePicker` 组件。如果你的项目中使用了这三个组件,请仔细阅读文档并进行升级。 为了解决上述问题,我们在 v4 版本中对 `Picker` 组件进行了重构,同时也重构了基于 `Picker` 派生出的 `Area``DatetimePicker` 组件。
### Picker 组件重构 ### Picker 组件重构
@ -83,11 +81,11 @@ import 'vant/lib/index.css';
### DatetimePicker 组件重构 ### DatetimePicker 组件重构
DatetimePicker 组件被拆分为三个子组件 DatetimePicker 组件被拆分为:
- [TimePicker](#/zh-CN/time-picker): 用于时间选择,包括时、分、秒 - [TimePicker](#/zh-CN/time-picker): 用于时间选择。
- [DatePicker](#/zh-CN/date-picker): 用于日期选择,包括年、月、日 - [DatePicker](#/zh-CN/date-picker): 用于日期选择。
- [PickerGroup](#/zh-CN/picker-group): 用于结合多个 Picker 选择器组件,在一次交互中完成多个值的选择 - [PickerGroup](#/zh-CN/picker-group): 用于用于结合多个 Picker 选择器组件。
同时TimePicker 和 DatePicker 组件也基于新版 Picker 组件进行重构,并优化了部分 API 设计。 同时TimePicker 和 DatePicker 组件也基于新版 Picker 组件进行重构,并优化了部分 API 设计。
@ -105,7 +103,7 @@ DatetimePicker 组件被拆分为三个子组件:
### Area 组件重构 ### Area 组件重构
Area 组件是基于 Picker 组件进行封装的,因此本次升级也对 Area 组件进行了内部逻辑的重构,并优化了部分 API。 Area 组件是基于 Picker 组件进行封装的,因此本次升级也对 Area 组件进行了内部逻辑的重构,并优化了部分 API 设计
#### 主要变更 #### 主要变更
@ -125,7 +123,7 @@ Area 组件是基于 Picker 组件进行封装的,因此本次升级也对 Are
在 Vant 3 中,`Dialog` 是一个函数,调用函数可以快速唤起全局的弹窗组件,而 `Dialog.Component` 才是 `Dialog` 组件对象,这与大部分组件的用法存在差异,容易导致使用错误。 在 Vant 3 中,`Dialog` 是一个函数,调用函数可以快速唤起全局的弹窗组件,而 `Dialog.Component` 才是 `Dialog` 组件对象,这与大部分组件的用法存在差异,容易导致使用错误。
为了更符合直觉,我们在 Vant 4 中调整了 `Dialog` 的调用方式,将 `Dialog()` 函数重命名为 `showDialog()`,并让 `Dialog` 直接指向组件对象 为了更符合直觉,我们在 Vant 4 中调整了 `Dialog` 的调用方式,将 `Dialog()` 函数重命名为 `showDialog()`
```js ```js
// Vant 3 // Vant 3
@ -137,7 +135,7 @@ showDialog(); // 函数调用
Dialog; // 组件对象 Dialog; // 组件对象
``` ```
由于 `Dialog` 变为了组件对象,`Dialog` 上挂载的其他方法也进行了重命名,新旧 API 的映射关系如下: `Dialog` 上挂载的其他方法也进行了重命名,新旧 API 的映射关系如下:
```js ```js
Dialog(); // -> showDialog() Dialog(); // -> showDialog()
@ -150,22 +148,7 @@ Dialog.resetDefaultOptions(); // -> resetDialogDefaultOptions()
#### 兼容方案 #### 兼容方案
为了便于旧版本代码迁移至 v4我们提供了兼容方案你可以使用 `@vant/compat` 中导出的 `Dialog` 对象来兼容原有代码。 为了便于代码迁移,我们提供了兼容方案,你可以使用 `@vant/compat` 中导出的 `Dialog` 对象来兼容原有代码。
第一步,安装 `@vant/compat` 包:
```bash
# 通过 npm 安装
npm add @vant/compat
# 通过 yarn 安装
yarn add @vant/compat
# 通过 pnpm 安装
pnpm add @vant/compat
```
第二步,从 `@vant/compat` 中引用 `Dialog` 方法:
```js ```js
import { Dialog } from '@vant/compat'; import { Dialog } from '@vant/compat';
@ -176,8 +159,6 @@ Dialog.close();
`@vant/compat` 中导出的 `Dialog` 与 Vant 3 中的 `Dialog` 拥有完全一致的 API 和行为,因此你只需要修改 `Dialog` 的引用路径,其他代码可以保持不变。 `@vant/compat` 中导出的 `Dialog` 与 Vant 3 中的 `Dialog` 拥有完全一致的 API 和行为,因此你只需要修改 `Dialog` 的引用路径,其他代码可以保持不变。
在项目完成升级到 Vant v4 后,建议在迭代中逐步替换为新的 `showDialog` 等方法,并移除 `@vant/compat` 包。
### Toast 调用方式调整 ### Toast 调用方式调整
Vant 4 中,`Toast` 组件的调用方式也进行了调整,与 `Dialog` 组件的改动一致: Vant 4 中,`Toast` 组件的调用方式也进行了调整,与 `Dialog` 组件的改动一致:
@ -294,14 +275,14 @@ emit('click-input');
emit('clickInput'); emit('clickInput');
``` ```
这项改动**不影响原有的模板代码**Vue 会自动在模板中对事件名进行格式转换,因此你无须做任何更改。 这项改动**不影响原有的模板代码**Vue 会自动在模板中对事件名进行格式转换
```html ```html
<!-- 以下代码可以照常运行,无须做任何更改 --> <!-- 以下代码可以照常运行,无须做任何更改 -->
<van-field @click-input="onClick" /> <van-field @click-input="onClick" />
``` ```
如果你在 JSX 中使用 Vant 组件,需要将监听的事件名调整为驼峰格式,原有的中划线格式将不再生效,新的监听方式更加符合 JSX 本身的规范: 如果你在 JSX 中使用 Vant 组件,需要将监听的事件名调整为驼峰格式,新的监听方式更加符合 JSX 本身的规范:
```jsx ```jsx
// Vant 3 // Vant 3
@ -324,7 +305,7 @@ emit('clickInput');
#### Popup #### Popup
Popup 的 CSS 样式进行了一定调整,如果你在 Popup 组件上添加了一些自定义的 CSS 样式,请确认本次升级是否对项目中的 UI 产生影响。 Popup 的 CSS 样式进行了一定调整,请确认是否对项目中的 UI 产生影响。
- 默认添加了 `box-sizing: border-box` 样式 - 默认添加了 `box-sizing: border-box` 样式
- 调整了 `position="center"` 时的水平居中方式,以解决弹窗宽度无法正确自适应的问题: - 调整了 `position="center"` 时的水平居中方式,以解决弹窗宽度无法正确自适应的问题:
@ -355,7 +336,7 @@ Popup 的 CSS 样式进行了一定调整,如果你在 Popup 组件上添加
### 移除 Less 变量 ### 移除 Less 变量
目前 Vant 已经支持了基于 CSS 变量的主题定制能力,相较于 Less 定制更加灵活。因此Vant 4 将不再提供基于 Less 的主题定制方式。 目前 Vant 已经支持了基于 CSS 变量的主题定制能力,因此后续将不再提供基于 Less 的主题定制方式。
这意味着 Vant 的 npm 包中将不再会包含 `.less` 样式源文件,只会提供编译后的 `.css` 样式文件。 这意味着 Vant 的 npm 包中将不再会包含 `.less` 样式源文件,只会提供编译后的 `.css` 样式文件。
@ -363,9 +344,7 @@ Popup 的 CSS 样式进行了一定调整,如果你在 Popup 组件上添加
### 简化 CSS 变量名 ### 简化 CSS 变量名
考虑到 **代码体积****使用便捷性**,我们对部分 CSS 变量的名称进行了简化,在变量名中使用了更简短的单词,以减小代码体积。 考虑到 **代码体积****使用便捷性**,我们对部分 CSS 变量的名称进行了简化,在变量名中使用更简短的单词,涉及以下变更:
本次升级涉及以下变量名变更:
```less ```less
animation-duration -> duration animation-duration -> duration
@ -384,13 +363,3 @@ transition-duration -> duration
``` ```
由于涉及的 CSS 变量较多,建议在代码仓库中进行全局匹配和替换。 由于涉及的 CSS 变量较多,建议在代码仓库中进行全局匹配和替换。
对于 `ConfigProvider` 组件,我们新增了 `ConfigProviderThemeVars` 类型定义,提供完整的类型提示。在 TypeScript 代码中,你可以通过类型提示来确保主题变量被正确替换。
```ts
import type { ConfigProviderThemeVars } from 'vant';
const themeVars: ConfigProviderThemeVars = {
sliderBarHeight: '4px',
};
```

View File

@ -213,11 +213,6 @@ import 'vant/es/image-preview/style';
> Tip: "Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides. > Tip: "Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides.
#### Tips
- "Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides.
- unplugin-vue-components is not officially maintained by Vant. If you encounter issues when using this plugin, please feedback to [antfu/unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) repository.
## With Frameworks ## With Frameworks
### Use Vant in Nuxt 3 ### Use Vant in Nuxt 3

View File

@ -218,10 +218,7 @@ import 'vant/es/image-preview/style';
你可以在项目的入口文件或公共模块中引入以上组件的样式,这样在业务代码中使用组件时,便不再需要重复引入样式了。 你可以在项目的入口文件或公共模块中引入以上组件的样式,这样在业务代码中使用组件时,便不再需要重复引入样式了。
#### 使用提示 > 提示:在单个项目中不应该同时使用「全量引入」和「按需引入」,否则会导致代码重复、样式错乱等问题。
- 请避免同时使用「全量引入」和「按需引入」这两种引入方式,否则会导致代码重复、样式错乱等问题。
- unplugin-vue-components 并不是 Vant 官方维护的插件,如果在使用过程中遇到问题,建议优先到 [antfu/unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 仓库下反馈。
## 在框架中使用 ## 在框架中使用

View File

@ -1,6 +1,6 @@
{ {
"name": "vant", "name": "vant",
"version": "4.0.0-rc.9", "version": "4.0.0-rc.0",
"description": "Mobile UI Components built on Vue", "description": "Mobile UI Components built on Vue",
"main": "lib/vant.cjs.js", "main": "lib/vant.cjs.js",
"module": "es/index.mjs", "module": "es/index.mjs",
@ -47,23 +47,23 @@
"components" "components"
], ],
"dependencies": { "dependencies": {
"@vant/popperjs": "^1.3.0", "@vant/icons": "^1.8.0",
"@vant/use": "^1.4.3" "@vant/popperjs": "^1.2.1",
"@vant/use": "^1.4.2"
}, },
"peerDependencies": { "peerDependencies": {
"vue": "^3.0.0" "vue": "^3.0.0"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^16.11.56", "@types/node": "^16.11.56",
"@types/jest": "^29.1.1", "@types/jest": "^27.0.0",
"@vant/area-data": "workspace:*", "@vant/area-data": "workspace:*",
"@vant/cli": "workspace:*", "@vant/cli": "workspace:*",
"@vant/eslint-config": "workspace:*", "@vant/eslint-config": "workspace:*",
"@vant/icons": "workspace:*",
"@vue/runtime-core": "^3.2.38", "@vue/runtime-core": "^3.2.38",
"@vue/test-utils": "^2.0.2", "@vue/test-utils": "^2.0.2",
"typescript": "^4.8.2", "typescript": "^4.8.2",
"vue": "^3.2.45", "vue": "^3.2.38",
"vue-router": "^4.1.5" "vue-router": "^4.1.5"
}, },
"sideEffects": [ "sideEffects": [

View File

@ -1,4 +1,4 @@
:root { body {
--van-action-bar-button-height: 40px; --van-action-bar-button-height: 40px;
--van-action-bar-button-warning-color: var(--van-gradient-orange); --van-action-bar-button-warning-color: var(--van-gradient-orange);
--van-action-bar-button-danger-color: var(--van-gradient-red); --van-action-bar-button-danger-color: var(--van-gradient-red);

View File

@ -5,7 +5,6 @@ export const ActionBarButton = withInstall(_ActionBarButton);
export default ActionBarButton; export default ActionBarButton;
export { actionBarButtonProps } from './ActionBarButton'; export { actionBarButtonProps } from './ActionBarButton';
export type { ActionBarButtonProps } from './ActionBarButton'; export type { ActionBarButtonProps } from './ActionBarButton';
export type { ActionBarButtonThemeVars } from './types';
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {

View File

@ -1,5 +0,0 @@
export type ActionBarButtonThemeVars = {
actionBarButtonHeight?: string;
actionBarButtonWarningColor?: string;
actionBarButtonDangerColor?: string;
};

View File

@ -1,4 +1,4 @@
:root { body {
--van-action-bar-icon-width: 48px; --van-action-bar-icon-width: 48px;
--van-action-bar-icon-height: 100%; --van-action-bar-icon-height: 100%;
--van-action-bar-icon-color: var(--van-text-color); --van-action-bar-icon-color: var(--van-text-color);

View File

@ -5,7 +5,6 @@ export const ActionBarIcon = withInstall(_ActionBarIcon);
export default ActionBarIcon; export default ActionBarIcon;
export { actionBarIconProps } from './ActionBarIcon'; export { actionBarIconProps } from './ActionBarIcon';
export type { ActionBarIconProps } from './ActionBarIcon'; export type { ActionBarIconProps } from './ActionBarIcon';
export type { ActionBarIconThemeVars } from './types';
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {

View File

@ -1,10 +0,0 @@
export type ActionBarIconThemeVars = {
actionBarIconWidth?: string;
actionBarIconHeight?: string;
actionBarIconColor?: string;
actionBarIconSize?: string;
actionBarIconFontSize?: string;
actionBarIconActiveColor?: string;
actionBarIconTextColor?: string;
actionBarIconBackground?: string;
};

View File

@ -1,4 +1,4 @@
:root { body {
--van-action-bar-background: var(--van-background-2); --van-action-bar-background: var(--van-background-2);
--van-action-bar-height: 50px; --van-action-bar-height: 50px;
} }

View File

@ -5,7 +5,6 @@ export const ActionBar = withInstall(_ActionBar);
export default ActionBar; export default ActionBar;
export { actionBarProps } from './ActionBar'; export { actionBarProps } from './ActionBar';
export type { ActionBarProps } from './ActionBar'; export type { ActionBarProps } from './ActionBar';
export type { ActionBarThemeVars } from './types';
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {

View File

@ -1,4 +0,0 @@
export type ActionBarThemeVars = {
actionBarBackground?: string;
actionBarHeight?: string;
};

View File

@ -179,7 +179,6 @@ export default {
| closeable | Whether to show close icon | _boolean_ | `true` | | closeable | Whether to show close icon | _boolean_ | `true` |
| close-icon | Close icon name | _string_ | `cross` | | close-icon | Close icon name | _string_ | `cross` |
| duration | Transition duration, unit second | _number \| string_ | `0.3` | | duration | Transition duration, unit second | _number \| string_ | `0.3` |
| z-index | Set the z-index to a fixed value | _number \| string_ | `2000+` |
| round | Whether to show round corner | _boolean_ | `true` | | round | Whether to show round corner | _boolean_ | `true` |
| overlay | Whether to show overlay | _boolean_ | `true` | | overlay | Whether to show overlay | _boolean_ | `true` |
| overlay-class | Custom overlay class | _string \| Array \| object_ | - | | overlay-class | Custom overlay class | _string \| Array \| object_ | - |

View File

@ -189,7 +189,6 @@ export default {
| closeable | 是否显示关闭图标 | _boolean_ | `true` | | closeable | 是否显示关闭图标 | _boolean_ | `true` |
| close-icon | 关闭图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `cross` | | close-icon | 关闭图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `cross` |
| duration | 动画时长,单位秒,设置为 0 可以禁用动画 | _number \| string_ | `0.3` | | duration | 动画时长,单位秒,设置为 0 可以禁用动画 | _number \| string_ | `0.3` |
| z-index | 将面板的 z-index 层级设置为一个固定值 | _number \| string_ | `2000+` |
| round | 是否显示圆角 | _boolean_ | `true` | | round | 是否显示圆角 | _boolean_ | `true` |
| overlay | 是否显示遮罩层 | _boolean_ | `true` | | overlay | 是否显示遮罩层 | _boolean_ | `true` |
| overlay-class | 自定义遮罩层类名 | _string \| Array \| object_ | - | | overlay-class | 自定义遮罩层类名 | _string \| Array \| object_ | - |

View File

@ -1,6 +1,6 @@
@import '../style/mixins/hairline'; @import '../style/mixins/hairline';
:root { body {
--van-action-sheet-max-height: 80%; --van-action-sheet-max-height: 80%;
--van-action-sheet-header-height: 48px; --van-action-sheet-header-height: 48px;
--van-action-sheet-header-font-size: var(--van-font-size-lg); --van-action-sheet-header-font-size: var(--van-font-size-lg);
@ -123,7 +123,6 @@
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
z-index: 1;
padding: var(--van-action-sheet-close-icon-padding); padding: var(--van-action-sheet-close-icon-padding);
color: var(--van-action-sheet-close-icon-color); color: var(--van-action-sheet-close-icon-color);
font-size: var(--van-action-sheet-close-icon-size); font-size: var(--van-action-sheet-close-icon-size);

View File

@ -5,7 +5,6 @@ export const ActionSheet = withInstall(_ActionSheet);
export default ActionSheet; export default ActionSheet;
export { actionSheetProps } from './ActionSheet'; export { actionSheetProps } from './ActionSheet';
export type { ActionSheetProps, ActionSheetAction } from './ActionSheet'; export type { ActionSheetProps, ActionSheetAction } from './ActionSheet';
export type { ActionSheetThemeVars } from './types';
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {

View File

@ -67,74 +67,34 @@ exports[`should render demo and match snapshot 1`] = `
</i> </i>
</div> </div>
</div> </div>
<transition-stub name="van-fade" <transition-stub role="button"
appear="true"
persisted="false"
css="true"
role="button"
tabindex="0" tabindex="0"
> >
</transition-stub> </transition-stub>
<transition-stub name="van-popup-slide-bottom" <transition-stub>
appear="false"
persisted="false"
css="true"
>
</transition-stub> </transition-stub>
<transition-stub name="van-fade" <transition-stub role="button"
appear="true"
persisted="false"
css="true"
role="button"
tabindex="0" tabindex="0"
> >
</transition-stub> </transition-stub>
<transition-stub name="van-popup-slide-bottom" <transition-stub>
appear="false"
persisted="false"
css="true"
>
</transition-stub> </transition-stub>
<transition-stub name="van-fade" <transition-stub role="button"
appear="true"
persisted="false"
css="true"
role="button"
tabindex="0" tabindex="0"
> >
</transition-stub> </transition-stub>
<transition-stub name="van-popup-slide-bottom" <transition-stub>
appear="false"
persisted="false"
css="true"
>
</transition-stub> </transition-stub>
<transition-stub name="van-fade" <transition-stub role="button"
appear="true"
persisted="false"
css="true"
role="button"
tabindex="0" tabindex="0"
> >
</transition-stub> </transition-stub>
<transition-stub name="van-popup-slide-bottom" <transition-stub>
appear="false"
persisted="false"
css="true"
>
</transition-stub> </transition-stub>
<transition-stub name="van-fade" <transition-stub role="button"
appear="true"
persisted="false"
css="true"
role="button"
tabindex="0" tabindex="0"
> >
</transition-stub> </transition-stub>
<transition-stub name="van-popup-slide-bottom" <transition-stub>
appear="false"
persisted="false"
css="true"
>
</transition-stub> </transition-stub>
`; `;

View File

@ -22,21 +22,13 @@ exports[`should render cancel slot correctly 1`] = `
`; `;
exports[`should render default slot correctly 1`] = ` exports[`should render default slot correctly 1`] = `
<transition-stub name="van-fade" <transition-stub role="button"
appear="true"
persisted="false"
css="true"
role="button"
tabindex="0" tabindex="0"
> >
<div class="van-overlay"> <div class="van-overlay">
</div> </div>
</transition-stub> </transition-stub>
<transition-stub name="van-popup-slide-bottom" <transition-stub>
appear="false"
persisted="false"
css="true"
>
<div role="dialog" <div role="dialog"
tabindex="0" tabindex="0"
class="van-popup van-popup--round van-popup--bottom van-safe-area-bottom van-action-sheet" class="van-popup van-popup--round van-popup--bottom van-safe-area-bottom van-action-sheet"

View File

@ -1,23 +0,0 @@
export type ActionSheetThemeVars = {
actionSheetMaxHeight?: string;
actionSheetHeaderHeight?: string;
actionSheetHeaderFontSize?: string;
actionSheetDescriptionColor?: string;
actionSheetDescriptionFontSize?: string;
actionSheetDescriptionLineHeight?: number | string;
actionSheetItemBackground?: string;
actionSheetItemFontSize?: string;
actionSheetItemLineHeight?: number | string;
actionSheetItemTextColor?: string;
actionSheetItemDisabledTextColor?: string;
actionSheetSubnameColor?: string;
actionSheetSubnameFontSize?: string;
actionSheetSubnameLineHeight?: number | string;
actionSheetCloseIconSize?: string;
actionSheetCloseIconColor?: string;
actionSheetCloseIconPadding?: string;
actionSheetCancelTextColor?: string;
actionSheetCancelPaddingTop?: string;
actionSheetCancelPaddingColor?: string;
actionSheetLoadingIconSize?: string;
};

View File

@ -1,4 +1,4 @@
:root { body {
--van-address-edit-padding: var(--van-padding-sm); --van-address-edit-padding: var(--van-padding-sm);
--van-address-edit-buttons-padding: var(--van-padding-xl) --van-address-edit-buttons-padding: var(--van-padding-xl)
var(--van-padding-base); var(--van-padding-base);

View File

@ -8,7 +8,6 @@ export type { AddressEditProps };
export type { export type {
AddressEditInfo, AddressEditInfo,
AddressEditInstance, AddressEditInstance,
AddressEditThemeVars,
AddressEditSearchItem, AddressEditSearchItem,
} from './types'; } from './types';

View File

@ -27,10 +27,3 @@ export type AddressEditInstance = ComponentPublicInstance<
AddressEditProps, AddressEditProps,
AddressEditExpose AddressEditExpose
>; >;
export type AddressEditThemeVars = {
addressEditPadding?: string;
addressEditButtonsPadding?: string;
addressEditButtonMarginBottom?: string;
addressEditButtonFontSize?: string;
};

View File

@ -1,4 +1,4 @@
:root { body {
--van-address-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px; --van-address-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px;
--van-address-list-disabled-text-color: var(--van-text-color-2); --van-address-list-disabled-text-color: var(--van-text-color-2);
--van-address-list-disabled-text-padding: calc(var(--van-padding-base) * 5) 0; --van-address-list-disabled-text-padding: calc(var(--van-padding-base) * 5) 0;

View File

@ -6,7 +6,6 @@ export default AddressList;
export { addressListProps } from './AddressList'; export { addressListProps } from './AddressList';
export type { AddressListProps } from './AddressList'; export type { AddressListProps } from './AddressList';
export type { AddressListAddress } from './AddressListItem'; export type { AddressListAddress } from './AddressListItem';
export type { AddressListThemeVars } from './types';
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {

View File

@ -23,11 +23,7 @@ exports[`should render demo and match snapshot 1`] = `
<span class="van-radio__label"> <span class="van-radio__label">
<div class="van-address-item__name"> <div class="van-address-item__name">
John Snow 13000000000 John Snow 13000000000
<transition-stub appear="false" <transition-stub class="van-address-item__tag">
persisted="false"
css="true"
class="van-address-item__tag"
>
<span class="van-tag van-tag--round van-tag--primary"> <span class="van-tag van-tag--round van-tag--primary">
Default Default
</span> </span>

View File

@ -1,15 +0,0 @@
export type AddressListThemeVars = {
addressListPadding?: string;
addressListDisabledTextColor?: string;
addressListDisabledTextPadding?: string;
addressListDisabledTextFontSize?: string;
addressListDisabledTextLineHeight?: number | string;
addressListAddButtonZIndex?: number | string;
addressListItemPadding?: string;
addressListItemTextColor?: string;
addressListItemDisabledTextColor?: string;
addressListItemFontSize?: string;
addressListItemLineHeight?: number | string;
addressListRadioColor?: string;
addressListEditIconSize?: string;
};

View File

@ -52,7 +52,7 @@ export default {
### @vant/area-data ### @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/main/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/dev/packages/vant-area-data):
```bash ```bash
# with npm # with npm

View File

@ -54,7 +54,7 @@ const areaList = {
### @vant/area-data ### @vant/area-data
Vant 官方提供了一份默认的中国省市区数据,可以通过 [@vant/area-data](https://github.com/vant-ui/vant/tree/main/packages/vant-area-data) 引入: Vant 官方提供了一份默认的中国省市区数据,可以通过 [@vant/area-data](https://github.com/vant-ui/vant/tree/dev/packages/vant-area-data) 引入:
```bash ```bash
# 通过 npm # 通过 npm
@ -77,7 +77,7 @@ export default {
}; };
``` ```
> Tips: 中国的行政区划每年都会有变动,如果发现省市区数据未及时更新,欢迎提 Pull Request 帮助我们更新。你可以在 [民政部 - 行政区划代码](https://www.mca.gov.cn/article/sj/xzqh/1980/) 网站上查询到最新数据,请根据官方数据进行核实。 > Tips: 中国的行政区划每年都会有变动,如果发现省市区数据未及时更新,欢迎提 Pull Request 帮助我们更新。
### 控制选中项 ### 控制选中项

View File

@ -1,134 +0,0 @@
import {
ref,
computed,
Teleport,
nextTick,
onMounted,
defineComponent,
type PropType,
type TeleportProps,
type ExtractPropTypes,
} from 'vue';
// Utils
import {
addUnit,
isObject,
inBrowser,
getScrollTop,
createNamespace,
makeNumericProp,
} from '../utils';
import { throttle } from '../lazyload/vue-lazyload/util';
// Composables
import { useEventListener, getScrollParent } from '@vant/use';
// Components
import { Icon } from '../icon';
const [name, bem] = createNamespace('back-top');
export const backTopProps = {
right: makeNumericProp(30),
bottom: makeNumericProp(40),
target: [String, Object] as PropType<TeleportProps['to']>,
visibilityHeight: makeNumericProp(200),
teleport: {
type: [String, Object] as PropType<TeleportProps['to']>,
default: 'body',
},
};
export type BackTopProps = ExtractPropTypes<typeof backTopProps>;
export default defineComponent({
name,
inheritAttrs: false,
props: backTopProps,
emits: ['click'],
setup(props, { emit, slots, attrs }) {
const show = ref(false);
const scrollParent = ref<Window | HTMLElement>();
const root = ref<HTMLElement | null>(null);
let target: Window | HTMLElement;
const style = computed(() => ({
right: addUnit(props.right),
bottom: addUnit(props.bottom),
}));
const onClick = (event: MouseEvent) => {
emit('click', event);
target.scrollTo({
top: 0,
behavior: 'smooth',
});
};
const scroll = () => {
show.value = getScrollTop(target) >= props.visibilityHeight;
};
const getTarget = () => {
const { target } = props;
if (typeof target === 'string') {
const el = document.querySelector(props.target as string);
if (!el) {
throw Error('[Vant] BackTop: target element is not found.');
}
return el as HTMLElement;
}
if (isObject(target)) {
return target;
}
throw Error(
'[Vant] BackTop: type of prop "target" should be a selector or an element object'
);
};
useEventListener('scroll', throttle(scroll, 300), { target: scrollParent });
onMounted(() => {
nextTick(() => {
if (inBrowser) {
target = props.target
? (getTarget() as typeof target)
: (getScrollParent(root.value!) as typeof target);
scrollParent.value = target;
}
});
});
return () => {
const Content = (
<div
ref={root}
class={bem({ active: show.value })}
style={style.value}
onClick={onClick}
{...attrs}
>
{slots.default ? (
slots.default()
) : (
<Icon name="back-top" class={bem('icon')} />
)}
</div>
);
if (props.teleport) {
return <Teleport to={props.teleport}>{Content}</Teleport>;
}
return Content;
};
},
});

View File

@ -1,144 +0,0 @@
# BackTop
### Intro
A button to back to top.
### Install
Register component globally via `app.use`, refer to [Component Registration](#/en-US/advanced-usage#zu-jian-zhu-ce) for more registration ways.
```js
import { createApp } from 'vue';
import { BackTop } from 'vant';
const app = createApp();
app.use(BackTop);
```
## Usage
### Basic Usage
Please scroll the demo page to display the back top button.
```html
<van-cell v-for="item in list" :key="item" :title="item" /> <van-back-top />
```
```js
export default {
setup() {
const list = [...Array(50).keys()];
return { list };
},
};
```
### Custom Position
Using `right` and `bottom` props to set the position of BackTop component.
```html
<van-cell v-for="item in list" :key="item" :title="item" />
<van-back-top right="15vw" bottom="10vh" />
```
```js
export default {
setup() {
const list = [...Array(50).keys()];
return { list };
},
};
```
### Custom Content
Using the default slot to custom content.
```html
<van-cell v-for="item in list" :key="item" :title="item" />
<van-back-top class="custom">Back Top</van-back-top>
<style>
.custom {
width: 80px;
font-size: 14px;
text-align: center;
}
</style>
```
```js
export default {
setup() {
const list = [...Array(50).keys()];
return { list };
},
};
```
### Set Scroll Target
```html
<div class="container">
<van-cell v-for="item in list" :key="item" :title="item" />
<van-back-top target=".container" bottom="30vh" />
</div>
<style>
.container {
height: 60vh;
overflow: auto;
}
</style>
```
```js
export default {
setup() {
const list = [...Array(50).keys()];
return { list };
},
};
```
## API
### Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| target | Can be a `selector` or `HTMLElement` | _string \| HTMLElement_ | - |
| right | Right distance of the page, the default unit is px | _number \| string_ | `30` |
| bottom | Bottom distance of the page, the default unit is px | _number \| string_ | `40` |
| visibility-height | The button will not show until the scroll height reaches this value | _number_ | `200` |
| teleport | Specifies a target element where BackTop will be mounted | _string \| Element_ | `body` |
### Slots
| Name | Description |
| ------- | ------------------------- |
| default | customize default content |
### Types
The component exports the following type definitions:
```ts
import type { BackTopProps, BackTopThemeVars } from 'vant';
```
## Theming
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| Name | Default Value | Description |
| ------------------------- | ----------------- | ----------- |
| --van-back-top-size | _40px_ | - |
| --van-back-top-icon-size | _20px_ | - |
| --van-back-top-text-color | _#fff_ | - |
| --van-back-top-background | _var(--van-blue)_ | - |

View File

@ -1,146 +0,0 @@
# BackTop 回到顶部
### 介绍
返回页面顶部的操作按钮。
### 引入
通过以下方式来全局注册组件,更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。
```js
import { createApp } from 'vue';
import { BackTop } from 'vant';
const app = createApp();
app.use(BackTop);
```
## 代码演示
### 基础用法
请滚动示例页面来查看右下角的返回顶部按钮。
```html
<van-cell v-for="item in list" :key="item" :title="item" /> <van-back-top />
```
```js
export default {
setup() {
const list = [...Array(50).keys()];
return { list };
},
};
```
### 自定义位置
通过 `right``bottom` 属性来设置组件距离右侧和底部的位置。
```html
<van-cell v-for="item in list" :key="item" :title="item" />
<van-back-top right="15vw" bottom="10vh" />
```
```js
export default {
setup() {
const list = [...Array(50).keys()];
return { list };
},
};
```
### 自定义内容
使用默认插槽来自定义组件展示的内容。
```html
<van-cell v-for="item in list" :key="item" :title="item" />
<van-back-top class="custom">返回顶部</van-back-top>
<style>
.custom {
width: 80px;
font-size: 14px;
text-align: center;
}
</style>
```
```js
export default {
setup() {
const list = [...Array(50).keys()];
return { list };
},
};
```
### 设置滚动目标
可以通过 `target` 属性来设置触发滚动的目标对象,支持传入选择器或 `HTMLElement`
```html
<div class="container">
<van-cell v-for="item in list" :key="item" :title="item" />
<van-back-top target=".container" bottom="30vh" />
</div>
<style>
.container {
height: 60vh;
overflow: auto;
}
</style>
```
```js
export default {
setup() {
const list = [...Array(50).keys()];
return { list };
},
};
```
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| target | 触发滚动的目标对象,支持传入选择器或 `HTMLElement` | _string \| HTMLElement_ | - |
| right | 距离页面右侧的距离,默认单位为 `px` | _number \| string_ | `30` |
| bottom | 距离页面底部的距离,默认单位为 `px` | _number \| string_ | `40` |
| visibility-height | 滚动高度达到此参数值才显示 | _number_ | `200` |
| teleport | 指定挂载的节点,等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | `body` |
### Slots
| 名称 | 说明 |
| ------- | ------------------ |
| default | 自定义按钮显示内容 |
### 类型定义
组件导出以下类型定义:
```ts
import type { BackTopProps, BackTopThemeVars } from 'vant';
```
## 主题定制
### 样式变量
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------- | ----------------- | ---- |
| --van-back-top-size | _40px_ | - |
| --van-back-top-icon-size | _20px_ | - |
| --van-back-top-text-color | _#fff_ | - |
| --van-back-top-background | _var(--van-blue)_ | - |

View File

@ -1,68 +0,0 @@
<script setup lang="ts">
import { ref } from 'vue';
import VanBackTop from '..';
import VanTabs from '../../tabs';
import VanTab from '../../tab';
import VanCell from '../../cell';
import { useTranslate } from '../../../docs/site';
const t = useTranslate({
'zh-CN': {
backTop: '返回顶部',
customContent: '自定义内容',
customPosition: '自定义位置',
setScrollTarget: '设置滚动目标',
},
'en-US': {
backTop: 'Back Top',
customContent: 'Custom Content',
customPosition: 'Custom Position',
setScrollTarget: 'Set Scroll Target',
},
});
const activeTab = ref(0);
const list = [...Array(50).keys()];
const targetEl = ref<HTMLElement>();
</script>
<template>
<van-tabs v-model:active="activeTab">
<van-tab :title="t('basicUsage')">
<van-cell v-for="item in list" :key="item" :title="item" />
<van-back-top v-if="activeTab === 0" />
</van-tab>
<van-tab :title="t('customPosition')">
<van-cell v-for="item in list" :key="item" :title="item" />
<van-back-top v-if="activeTab === 1" right="15vw" bottom="10vh" />
</van-tab>
<van-tab :title="t('customContent')">
<van-cell v-for="item in list" :key="item" :title="item" />
<van-back-top v-if="activeTab === 2" class="custom-back-top">
{{ t('backTop') }}
</van-back-top>
</van-tab>
<van-tab :title="t('setScrollTarget')">
<div class="back-top-wrapper" ref="targetEl">
<van-cell v-for="item in list" :key="item" :title="item" />
<van-back-top v-if="activeTab === 3" :target="targetEl" bottom="30vh" />
</div>
</van-tab>
</van-tabs>
</template>
<style lang="less">
.back-top-wrapper {
height: 60vh;
overflow: auto;
}
.custom-back-top {
width: 80px;
font-size: 14px;
text-align: center;
}
</style>

View File

@ -1,35 +0,0 @@
:root {
--van-back-top-size: 40px;
--van-back-top-icon-size: 20px;
--van-back-top-text-color: #fff;
--van-back-top-background: var(--van-blue);
}
.van-back-top {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
width: var(--van-back-top-size);
height: var(--van-back-top-size);
cursor: pointer;
color: var(--van-back-top-text-color);
border-radius: var(--van-radius-max);
box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.12);
transform: scale(0);
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
background-color: var(--van-back-top-background);
&:active {
opacity: var(--van-active-opacity);
}
&--active {
transform: scale(1);
}
&__icon {
font-size: var(--van-back-top-icon-size);
font-weight: var(--van-font-bold);
}
}

View File

@ -1,15 +0,0 @@
import { withInstall } from '../utils';
import _BackTop from './BackTop';
export const BackTop = withInstall(_BackTop);
export default BackTop;
export { backTopProps } from './BackTop';
export type { BackTopProps } from './BackTop';
export type { BackTopThemeVars } from './types';
declare module 'vue' {
export interface GlobalComponents {
VanBackTop: typeof BackTop;
}
}

View File

@ -1,445 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should render demo and match snapshot 1`] = `
<div class="van-tabs van-tabs--line">
<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">
Basic Usage
</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">
Custom Position
</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">
Custom Content
</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">
Set Scroll Target
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
</div>
<div class="van-tabs__content">
<div id="van-tab"
role="tabpanel"
class="van-tab__panel"
tabindex="0"
aria-labelledby="van-tabs-0"
style
>
<div class="van-cell">
<div class="van-cell__title">
<span>
0
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
1
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
2
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
3
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
4
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
5
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
6
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
7
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
8
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
9
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
10
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
11
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
12
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
13
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
14
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
15
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
16
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
17
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
18
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
19
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
20
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
21
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
22
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
23
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
24
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
25
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
26
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
27
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
28
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
29
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
30
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
31
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
32
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
33
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
34
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
35
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
36
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
37
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
38
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
39
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
40
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
41
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
42
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
43
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
44
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
45
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
46
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
47
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
48
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
49
</span>
</div>
</div>
</div>
<div id="van-tab"
role="tabpanel"
class="van-tab__panel"
tabindex="-1"
aria-labelledby="van-tabs-1"
style="display: none;"
>
</div>
<div id="van-tab"
role="tabpanel"
class="van-tab__panel"
tabindex="-1"
aria-labelledby="van-tabs-2"
style="display: none;"
>
</div>
<div id="van-tab"
role="tabpanel"
class="van-tab__panel"
tabindex="-1"
aria-labelledby="van-tabs-3"
style="display: none;"
>
</div>
</div>
</div>
`;

View File

@ -1,4 +0,0 @@
import Demo from '../demo/index.vue';
import { snapshotDemo } from '../../../test/demo';
snapshotDemo(Demo);

View File

@ -1,49 +0,0 @@
import { nextTick } from 'vue';
import BackTop from '..';
import { mount, trigger } from '../../../test';
test('should allow to custom position by position prop', async () => {
const root = document.createElement('div');
mount(BackTop, {
props: {
right: 30,
bottom: 100,
teleport: root,
},
});
const backTopEl = root.querySelector<HTMLDivElement>('.van-back-top')!;
expect(backTopEl.style.right).toBe('30px');
expect(backTopEl.style.bottom).toBe('100px');
});
test('should allow position prop to contain unit', async () => {
const root = document.createElement('div');
mount(BackTop, {
props: {
right: '2rem',
bottom: '4rem',
teleport: root,
},
});
const backTopEl = root.querySelector<HTMLDivElement>('.van-back-top')!;
expect(backTopEl.style.right).toBe('2rem');
expect(backTopEl.style.bottom).toBe('4rem');
});
test('should emit click event after clicked', async () => {
const windowScroll = jest.fn();
window.scrollTo = windowScroll;
const root = document.createElement('div');
const wrapper = mount(BackTop, {
props: {
teleport: root,
},
});
const backTopEl = root.querySelector<HTMLDivElement>('.van-back-top')!;
await nextTick();
await trigger(backTopEl, 'click');
expect(wrapper.emitted('click')?.length).toEqual(1);
expect(windowScroll).toHaveBeenCalledTimes(1);
});

View File

@ -1,6 +0,0 @@
export type BackTopThemeVars = {
backTopSize?: string;
backTopIconSize?: string;
backTopTextColor?: string;
backTopBackground?: string;
};

View File

@ -1,4 +1,4 @@
:root { body {
--van-badge-size: 16px; --van-badge-size: 16px;
--van-badge-color: var(--van-white); --van-badge-color: var(--van-white);
--van-badge-padding: 0 3px; --van-badge-padding: 0 3px;

View File

@ -5,7 +5,6 @@ export const Badge = withInstall(_Badge);
export default Badge; export default Badge;
export { badgeProps } from './Badge'; export { badgeProps } from './Badge';
export type { BadgeProps, BadgePosition } from './Badge'; export type { BadgeProps, BadgePosition } from './Badge';
export type { BadgeThemeVars } from './types';
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {

View File

@ -1,12 +0,0 @@
export type BadgeThemeVars = {
badgeSize?: string;
badgeColor?: string;
badgePadding?: string;
badgeFontSize?: string;
badgeFontWeight?: string;
badgeBorderWidth?: string;
badgeBackground?: string;
badgeDotColor?: string;
badgeDotSize?: string;
badgeFont?: string;
};

View File

@ -1,4 +1,4 @@
:root { body {
--van-button-mini-height: 24px; --van-button-mini-height: 24px;
--van-button-mini-padding: 0 var(--van-padding-base); --van-button-mini-padding: 0 var(--van-padding-base);
--van-button-mini-font-size: var(--van-font-size-xs); --van-button-mini-font-size: var(--van-font-size-xs);

View File

@ -8,7 +8,6 @@ export type { ButtonProps } from './Button';
export type { export type {
ButtonType, ButtonType,
ButtonSize, ButtonSize,
ButtonThemeVars,
ButtonNativeType, ButtonNativeType,
ButtonIconPosition, ButtonIconPosition,
} from './types'; } from './types';

View File

@ -12,40 +12,3 @@ export type ButtonSize = 'large' | 'normal' | 'small' | 'mini';
export type ButtonNativeType = NonNullable<ButtonHTMLAttributes['type']>; export type ButtonNativeType = NonNullable<ButtonHTMLAttributes['type']>;
export type ButtonIconPosition = 'left' | 'right'; export type ButtonIconPosition = 'left' | 'right';
export type ButtonThemeVars = {
buttonMiniHeight?: string;
buttonMiniPadding?: string;
buttonMiniFontSize?: string;
buttonSmallHeight?: string;
buttonSmallPadding?: string;
buttonSmallFontSize?: string;
buttonNormalPadding?: string;
buttonNormalFontSize?: string;
buttonLargeHeight?: string;
buttonDefaultHeight?: string;
buttonDefaultLineHeight?: number | string;
buttonDefaultFontSize?: string;
buttonDefaultColor?: string;
buttonDefaultBackground?: string;
buttonDefaultBorderColor?: string;
buttonPrimaryColor?: string;
buttonPrimaryBackground?: string;
buttonPrimaryBorderColor?: string;
buttonSuccessColor?: string;
buttonSuccessBackground?: string;
buttonSuccessBorderColor?: string;
buttonDangerColor?: string;
buttonDangerBackground?: string;
buttonDangerBorderColor?: string;
buttonWarningColor?: string;
buttonWarningBackground?: string;
buttonWarningBorderColor?: string;
buttonBorderWidth?: string;
buttonRadius?: string;
buttonRoundRadius?: string;
buttonPlainBackground?: string;
buttonDisabledOpacity?: number | string;
buttonIconSize?: string;
buttonLoadingIconSize?: string;
};

View File

@ -175,10 +175,7 @@ export default defineComponent({
const bodyRef = ref<HTMLElement>(); const bodyRef = ref<HTMLElement>();
const subtitle = ref<{ text: string; date?: Date }>({ const subtitle = ref('');
text: '',
date: undefined,
});
const currentDate = ref(getInitialDate()); const currentDate = ref(getInitialDate());
const [monthRefs, setMonthRefs] = useRefs<CalendarMonthInstance>(); const [monthRefs, setMonthRefs] = useRefs<CalendarMonthInstance>();
@ -270,10 +267,7 @@ export default defineComponent({
/* istanbul ignore else */ /* istanbul ignore else */
if (currentMonth) { if (currentMonth) {
subtitle.value = { subtitle.value = currentMonth.getTitle();
text: currentMonth.getTitle(),
date: currentMonth.date,
};
} }
}; };
@ -531,9 +525,8 @@ export default defineComponent({
<div class={bem()}> <div class={bem()}>
<CalendarHeader <CalendarHeader
v-slots={pick(slots, ['title', 'subtitle'])} v-slots={pick(slots, ['title', 'subtitle'])}
date={subtitle.value.date}
title={props.title} title={props.title}
subtitle={subtitle.value.text} subtitle={subtitle.value}
showTitle={props.showTitle} showTitle={props.showTitle}
showSubtitle={props.showSubtitle} showSubtitle={props.showSubtitle}
firstDayOfWeek={dayOffset.value} firstDayOfWeek={dayOffset.value}

View File

@ -8,7 +8,6 @@ export default defineComponent({
name, name,
props: { props: {
date: Date,
title: String, title: String,
subtitle: String, subtitle: String,
showTitle: Boolean, showTitle: Boolean,
@ -31,12 +30,7 @@ export default defineComponent({
const renderSubtitle = () => { const renderSubtitle = () => {
if (props.showSubtitle) { if (props.showSubtitle) {
const title = slots.subtitle const title = slots.subtitle ? slots.subtitle() : props.subtitle;
? slots.subtitle({
date: props.date,
text: props.subtitle,
})
: props.subtitle;
return ( return (
<div class={bem('header-subtitle')} onClick={onClickSubtitle}> <div class={bem('header-subtitle')} onClick={onClickSubtitle}>
{title} {title}

View File

@ -332,9 +332,9 @@ Following props are supported when the type is multiple
### Slots ### Slots
| Name | Description | SlotProps | | Name | Description | SlotProps |
| --- | --- | --- | | --------------------- | ------------------------- | ----------------------- |
| title | Custom title | - | | title | Custom title | - |
| subtitle `v3.1.3` | Custom subtitle | _{ text: string, date?: Date }_ | | subtitle `v3.1.3` | Custom subtitle | - |
| footer | Custom footer | - | | footer | Custom footer | - |
| confirm-text `v3.2.6` | Custom confirm text | _{ disabled: boolean }_ | | confirm-text `v3.2.6` | Custom confirm text | _{ disabled: boolean }_ |
| top-info `v3.0.17` | Custom top info of day | _day: Day_ | | top-info `v3.0.17` | Custom top info of day | _day: Day_ |

View File

@ -338,9 +338,9 @@ export default {
### Slots ### Slots
| 名称 | 说明 | 参数 | | 名称 | 说明 | 参数 |
| --- | --- | --- | | --------------------- | ------------------------ | ----------------------- |
| title | 自定义标题 | - | | title | 自定义标题 | - |
| subtitle `v3.1.3` | 自定义日历副标题 | _{ text: string, date?: Date }_ | | subtitle `v3.1.3` | 自定义日历副标题 | - |
| footer | 自定义底部区域内容 | - | | footer | 自定义底部区域内容 | - |
| confirm-text `v3.2.6` | 自定义确认按钮的内容 | _{ disabled: boolean }_ | | confirm-text `v3.2.6` | 自定义确认按钮的内容 | _{ disabled: boolean }_ |
| top-info `v3.0.17` | 自定义日期上方的提示信息 | _day: Day_ | | top-info `v3.0.17` | 自定义日期上方的提示信息 | _day: Day_ |

Some files were not shown because too many files have changed in this diff Show More