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:
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.
3. If you've changed APIs, update the documentation.
4. Ensure the test suite passes (`npm test`).

View File

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

View File

@ -2,7 +2,7 @@ name: Deploy V4 Site
on:
push:
branches: [main]
branches: [dev]
paths:
- 'packages/vant/docs/**'
@ -15,7 +15,7 @@ jobs:
- name: Checkout 🛎️
uses: actions/checkout@v2
with:
ref: 'main'
ref: 'next'
- name: Install pnpm
run: npm i pnpm@7 -g
@ -31,18 +31,10 @@ jobs:
- name: Build Site
run: npm run build:site
- name: Deploy for Gitee 🚀
uses: JamesIves/github-pages-deploy-action@v4.4.0
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@4.1.1
with:
branch: gh-pages
folder: packages/vant/site-dist
target-folder: v4
- name: Deploy for GitHub 🚀
uses: JamesIves/github-pages-deploy-action@v4.4.0
with:
branch: main
folder: packages/vant/site-dist
token: ${{ secrets.VANT_UI_TOKEN }}
repository-name: vant-ui/vant-ui.github.io
target-folder: vant/v4
clean: false

View File

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

View File

@ -7,7 +7,7 @@ on:
pull_request:
branches:
- main
- dev
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-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-icons](https://github.com/vant-ui/vant/tree/main/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-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant icons |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
## Community Ecosystem
| Project | Description |
| --- | --- |
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components based on Vant |
| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | React mobile UI Components based on Vant |
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Alipay MiniProgram UI |
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
| [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |
@ -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)
- [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

View File

@ -98,9 +98,9 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
| --- | --- |
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | Vant 微信小程序版 |
| [vant-demo](https://github.com/vant-ui/vant-demo) | Vant 官方示例合集 |
| [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | 开箱即用的组件库搭建工具 |
| [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant 图标库 |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
## 社区生态
@ -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 框架移动端组件库 |
| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | 参照 Vant 打造的 React 框架移动端组件库 |
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Vant 支付宝小程序版 |
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 |
| [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 |
@ -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#/zh-CN/changelog)
- [码云镜像仓库](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

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

View File

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

View File

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

View File

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

View File

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

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/main/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/main/packages/vant-cli/changelog.md)
- [命令](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/commands.zh-CN.md)
- [配置指南](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/config.zh-CN.md)
- [目录结构](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.zh-CN.md)
- [更新日志](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/changelog.md)

View File

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

View File

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

View File

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

View File

@ -29,7 +29,7 @@ Start local dev server for browsering components and demo.
Build Vue component library.
Files will be output to `es` and `lib` directory. More details [directory structure](https://github.com/vant-ui/vant/tree/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.

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 包能被正确识别:

View File

@ -177,16 +177,17 @@ When set to `true`, `export * from 'xxx'` will be used to export all modules and
### build.configureVite
- Type: `(config: InlineConfig): InlineConfig | undefined`
- Type: `(config: InlineConfig): InlineConfig`
- Default: `undefined`
Custom [vite config](https://vitejs.dev/config/), requires `@vant/cli>= 4.0.0`.
Custom vite config(`@vant/cli>= 4.0.0`)
```js
module.exports = {
build: {
configureVite(config) {
config.server.port = 3000;
// add vite plugin
config.plugins.push(vitePluginXXX);
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
- Type: `'npm' | 'yarn' | 'pnpm'`

View File

@ -177,16 +177,17 @@ module.exports = {
### build.configureVite
- Type: `(config: InlineConfig): InlineConfig | undefined`
- Type: `(config: InlineConfig): InlineConfig`
- Default: `undefined`
vant-cli 使用 vite 来构建组件库和文档站点,通过 `configureVite` 选项可以自定义 [vite 配置](https://vitejs.dev/config/)(从 4.0.0 版本开始支持)。
vant-cli 使用 vite 来构建组件库和文档站点,通过 `configureVite` 选项可以自定义 vite 配置(从 4.0.0 版本开始支持)。
```js
module.exports = {
build: {
configureVite(config) {
config.server.port = 3000;
// 添加一个自定义插件
config.plugins.push(vitePluginXXX);
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
- Type: `'npm' | 'yarn' | 'pnpm'`

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -36,7 +36,7 @@ export async function parseAndWrite(options: Options) {
const webTypes = genWebTypes(vueTags, options);
fse.outputFileSync(
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;
default: string;
description: string;
options: string[];
value: {
kind: 'expression';
type: string;

View File

@ -20,3 +20,9 @@ export function formatType(type: string) {
export function normalizePath(path: string): string {
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: {
tags,
attributes: [],
'types-syntax': 'typescript',
},
},
'js-types-syntax': 'typescript',
};
}

View File

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

View File

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

View File

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

View File

@ -1,6 +1,6 @@
import { createPopper } from '@popperjs/core/lib/popper-lite';
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 type { Instance };
export type { Instance, Placement };

View File

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

View File

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

View File

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

View File

@ -132,7 +132,7 @@ module.exports = {
### Adapt to PC Browsers
Vant is a mobile-first component library, if you want to use Vant in PC browsers, you can use the [@vant/touch-emulator](https://github.com/vant-ui/vant/tree/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
# Install

View File

@ -197,7 +197,7 @@ module.exports = {
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
# 安装模块

View File

@ -19,132 +19,6 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
## 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)
`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)
`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)">
<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)
@ -30,7 +30,7 @@ Contains icon library resources.
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/design-icons-0321.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
<a class="design-download" href="https://github.com/vant-ui/vant/blob/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

View File

@ -22,7 +22,7 @@
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/tab_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
<a class="design-download" href="https://github.com/vant-ui/vant/blob/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
@ -30,7 +30,7 @@
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/design-icons-0321.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
<a class="design-download" href="https://github.com/vant-ui/vant/blob/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) 作为代替。
### 是否支持在 uni-app 中使用?
Vant 所有组件都是基于 Vue 框架实现的,没有针对 uni-app 进行适配,因此不保证各个组件在 uni-app 下的可用性。
如果你在 uni-app 中使用 Vant 遇到问题,建议向 uni-app 进行反馈。
### 部分组件无法在桌面端进行操作?
参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。

View File

@ -41,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-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-icons](https://github.com/vant-ui/vant/tree/main/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-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant icons |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
### Community Ecosystem
| Project | Description |
| --- | --- |
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components based on Vant |
| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | React Mobile UI Components Library |
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Alipay MiniProgram UI |
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
| [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |
@ -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)
- [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
@ -82,7 +83,7 @@ Thanks to the following friends for their contributions to Vant:
### Contribution Guide
Please make sure to read the [Contributing Guide](https://github.com/vant-ui/vant/blob/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

View File

@ -53,9 +53,9 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
| --- | --- |
| [vant-weapp](https://github.com/vant-ui/vant-weapp) | Vant 微信小程序版 |
| [vant-demo](https://github.com/vant-ui/vant-demo) | Vant 官方示例合集 |
| [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | 开箱即用的组件库搭建工具 |
| [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant 图标库 |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
### 社区生态
@ -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 移动端组件库 |
| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | 基于 Vant 的 React 版本移动端 UI 组件库 |
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Vant 支付宝小程序版 |
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 |
| [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 |
@ -74,8 +75,8 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
- [意见反馈](https://github.com/vant-ui/vant/issues)
- [更新日志](#/zh-CN/changelog)
- [码云镜像仓库](https://gitee.com/vant-contrib/vant)
- [Discussions 讨论区](https://github.com/vant-ui/vant/discussions)
- [码云镜像](https://gitee.com/vant-contrib/vant)
- [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 代码的引入方式可以从以下两种方式中进行选择:
- 通过 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件实现按需引入样式,详细用法参见 [快速上手](#/zh-CN/quickstart)。
- 在项目中全量引入 Vant 的样式文件:
```js
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`
- `DatetimePicker`
这三个组件之所以被重构,是因为在之前的版本中,`Picker` 组件的 API 设计存在一些不合理的设计,导致大家在使用时经常遇到问题,比如:
之所以重构这三个组件,是因为在之前的版本中,`Picker` 组件的 API 设计存在一些不合理的设计,导致大家在使用时经常遇到问题,比如:
- Picker columns 数据格式定义不合理,容易产生误解
- Picker 数据流不清晰,暴露了过多的实例方法来对数据进行操作
- DatetimePicker 逻辑过于复杂,经常在边界场景下出现 bug
- columns 数据格式定义不合理,容易产生误解
- 数据流不清晰,暴露了过多的实例方法来对数据进行操作
为了解决上述问题,我们在 v4 版本中对 `Picker` 组件进行了重构,同时也重构了基于 `Picker` 派生出的 `Area``DatetimePicker` 组件。如果你的项目中使用了这三个组件,请仔细阅读文档并进行升级。
为了解决上述问题,我们在 v4 版本中对 `Picker` 组件进行了重构,同时也重构了基于 `Picker` 派生出的 `Area``DatetimePicker` 组件。
### Picker 组件重构
@ -83,11 +81,11 @@ import 'vant/lib/index.css';
### DatetimePicker 组件重构
DatetimePicker 组件被拆分为三个子组件
DatetimePicker 组件被拆分为:
- [TimePicker](#/zh-CN/time-picker): 用于时间选择,包括时、分、秒
- [DatePicker](#/zh-CN/date-picker): 用于日期选择,包括年、月、日
- [PickerGroup](#/zh-CN/picker-group): 用于结合多个 Picker 选择器组件,在一次交互中完成多个值的选择
- [TimePicker](#/zh-CN/time-picker): 用于时间选择。
- [DatePicker](#/zh-CN/date-picker): 用于日期选择。
- [PickerGroup](#/zh-CN/picker-group): 用于用于结合多个 Picker 选择器组件。
同时TimePicker 和 DatePicker 组件也基于新版 Picker 组件进行重构,并优化了部分 API 设计。
@ -105,7 +103,7 @@ DatetimePicker 组件被拆分为三个子组件:
### Area 组件重构
Area 组件是基于 Picker 组件进行封装的,因此本次升级也对 Area 组件进行了内部逻辑的重构,并优化了部分 API。
Area 组件是基于 Picker 组件进行封装的,因此本次升级也对 Area 组件进行了内部逻辑的重构,并优化了部分 API 设计
#### 主要变更
@ -125,7 +123,7 @@ Area 组件是基于 Picker 组件进行封装的,因此本次升级也对 Are
在 Vant 3 中,`Dialog` 是一个函数,调用函数可以快速唤起全局的弹窗组件,而 `Dialog.Component` 才是 `Dialog` 组件对象,这与大部分组件的用法存在差异,容易导致使用错误。
为了更符合直觉,我们在 Vant 4 中调整了 `Dialog` 的调用方式,将 `Dialog()` 函数重命名为 `showDialog()`,并让 `Dialog` 直接指向组件对象
为了更符合直觉,我们在 Vant 4 中调整了 `Dialog` 的调用方式,将 `Dialog()` 函数重命名为 `showDialog()`
```js
// Vant 3
@ -137,7 +135,7 @@ showDialog(); // 函数调用
Dialog; // 组件对象
```
由于 `Dialog` 变为了组件对象,`Dialog` 上挂载的其他方法也进行了重命名,新旧 API 的映射关系如下:
`Dialog` 上挂载的其他方法也进行了重命名,新旧 API 的映射关系如下:
```js
Dialog(); // -> showDialog()
@ -150,22 +148,7 @@ Dialog.resetDefaultOptions(); // -> resetDialogDefaultOptions()
#### 兼容方案
为了便于旧版本代码迁移至 v4我们提供了兼容方案你可以使用 `@vant/compat` 中导出的 `Dialog` 对象来兼容原有代码。
第一步,安装 `@vant/compat` 包:
```bash
# 通过 npm 安装
npm add @vant/compat
# 通过 yarn 安装
yarn add @vant/compat
# 通过 pnpm 安装
pnpm add @vant/compat
```
第二步,从 `@vant/compat` 中引用 `Dialog` 方法:
为了便于代码迁移,我们提供了兼容方案,你可以使用 `@vant/compat` 中导出的 `Dialog` 对象来兼容原有代码。
```js
import { Dialog } from '@vant/compat';
@ -176,8 +159,6 @@ Dialog.close();
`@vant/compat` 中导出的 `Dialog` 与 Vant 3 中的 `Dialog` 拥有完全一致的 API 和行为,因此你只需要修改 `Dialog` 的引用路径,其他代码可以保持不变。
在项目完成升级到 Vant v4 后,建议在迭代中逐步替换为新的 `showDialog` 等方法,并移除 `@vant/compat` 包。
### Toast 调用方式调整
Vant 4 中,`Toast` 组件的调用方式也进行了调整,与 `Dialog` 组件的改动一致:
@ -294,14 +275,14 @@ emit('click-input');
emit('clickInput');
```
这项改动**不影响原有的模板代码**Vue 会自动在模板中对事件名进行格式转换,因此你无须做任何更改。
这项改动**不影响原有的模板代码**Vue 会自动在模板中对事件名进行格式转换
```html
<!-- 以下代码可以照常运行,无须做任何更改 -->
<van-field @click-input="onClick" />
```
如果你在 JSX 中使用 Vant 组件,需要将监听的事件名调整为驼峰格式,原有的中划线格式将不再生效,新的监听方式更加符合 JSX 本身的规范:
如果你在 JSX 中使用 Vant 组件,需要将监听的事件名调整为驼峰格式,新的监听方式更加符合 JSX 本身的规范:
```jsx
// Vant 3
@ -324,7 +305,7 @@ emit('clickInput');
#### Popup
Popup 的 CSS 样式进行了一定调整,如果你在 Popup 组件上添加了一些自定义的 CSS 样式,请确认本次升级是否对项目中的 UI 产生影响。
Popup 的 CSS 样式进行了一定调整,请确认是否对项目中的 UI 产生影响。
- 默认添加了 `box-sizing: border-box` 样式
- 调整了 `position="center"` 时的水平居中方式,以解决弹窗宽度无法正确自适应的问题:
@ -355,7 +336,7 @@ Popup 的 CSS 样式进行了一定调整,如果你在 Popup 组件上添加
### 移除 Less 变量
目前 Vant 已经支持了基于 CSS 变量的主题定制能力,相较于 Less 定制更加灵活。因此Vant 4 将不再提供基于 Less 的主题定制方式。
目前 Vant 已经支持了基于 CSS 变量的主题定制能力,因此后续将不再提供基于 Less 的主题定制方式。
这意味着 Vant 的 npm 包中将不再会包含 `.less` 样式源文件,只会提供编译后的 `.css` 样式文件。
@ -363,9 +344,7 @@ Popup 的 CSS 样式进行了一定调整,如果你在 Popup 组件上添加
### 简化 CSS 变量名
考虑到 **代码体积****使用便捷性**,我们对部分 CSS 变量的名称进行了简化,在变量名中使用了更简短的单词,以减小代码体积。
本次升级涉及以下变量名变更:
考虑到 **代码体积****使用便捷性**,我们对部分 CSS 变量的名称进行了简化,在变量名中使用更简短的单词,涉及以下变更:
```less
animation-duration -> duration
@ -384,13 +363,3 @@ transition-duration -> duration
```
由于涉及的 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.
#### 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
### 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",
"version": "4.0.0-rc.9",
"version": "4.0.0-rc.0",
"description": "Mobile UI Components built on Vue",
"main": "lib/vant.cjs.js",
"module": "es/index.mjs",
@ -47,23 +47,23 @@
"components"
],
"dependencies": {
"@vant/popperjs": "^1.3.0",
"@vant/use": "^1.4.3"
"@vant/icons": "^1.8.0",
"@vant/popperjs": "^1.2.1",
"@vant/use": "^1.4.2"
},
"peerDependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"@types/node": "^16.11.56",
"@types/jest": "^29.1.1",
"@types/jest": "^27.0.0",
"@vant/area-data": "workspace:*",
"@vant/cli": "workspace:*",
"@vant/eslint-config": "workspace:*",
"@vant/icons": "workspace:*",
"@vue/runtime-core": "^3.2.38",
"@vue/test-utils": "^2.0.2",
"typescript": "^4.8.2",
"vue": "^3.2.45",
"vue": "^3.2.38",
"vue-router": "^4.1.5"
},
"sideEffects": [

View File

@ -1,4 +1,4 @@
:root {
body {
--van-action-bar-button-height: 40px;
--van-action-bar-button-warning-color: var(--van-gradient-orange);
--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 { actionBarButtonProps } from './ActionBarButton';
export type { ActionBarButtonProps } from './ActionBarButton';
export type { ActionBarButtonThemeVars } from './types';
declare module 'vue' {
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-height: 100%;
--van-action-bar-icon-color: var(--van-text-color);

View File

@ -5,7 +5,6 @@ export const ActionBarIcon = withInstall(_ActionBarIcon);
export default ActionBarIcon;
export { actionBarIconProps } from './ActionBarIcon';
export type { ActionBarIconProps } from './ActionBarIcon';
export type { ActionBarIconThemeVars } from './types';
declare module 'vue' {
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-height: 50px;
}

View File

@ -5,7 +5,6 @@ export const ActionBar = withInstall(_ActionBar);
export default ActionBar;
export { actionBarProps } from './ActionBar';
export type { ActionBarProps } from './ActionBar';
export type { ActionBarThemeVars } from './types';
declare module 'vue' {
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` |
| close-icon | Close icon name | _string_ | `cross` |
| 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` |
| overlay | Whether to show overlay | _boolean_ | `true` |
| overlay-class | Custom overlay class | _string \| Array \| object_ | - |

View File

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

View File

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

View File

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

View File

@ -67,74 +67,34 @@ exports[`should render demo and match snapshot 1`] = `
</i>
</div>
</div>
<transition-stub name="van-fade"
appear="true"
persisted="false"
css="true"
role="button"
<transition-stub role="button"
tabindex="0"
>
</transition-stub>
<transition-stub name="van-popup-slide-bottom"
appear="false"
persisted="false"
css="true"
>
<transition-stub>
</transition-stub>
<transition-stub name="van-fade"
appear="true"
persisted="false"
css="true"
role="button"
<transition-stub role="button"
tabindex="0"
>
</transition-stub>
<transition-stub name="van-popup-slide-bottom"
appear="false"
persisted="false"
css="true"
>
<transition-stub>
</transition-stub>
<transition-stub name="van-fade"
appear="true"
persisted="false"
css="true"
role="button"
<transition-stub role="button"
tabindex="0"
>
</transition-stub>
<transition-stub name="van-popup-slide-bottom"
appear="false"
persisted="false"
css="true"
>
<transition-stub>
</transition-stub>
<transition-stub name="van-fade"
appear="true"
persisted="false"
css="true"
role="button"
<transition-stub role="button"
tabindex="0"
>
</transition-stub>
<transition-stub name="van-popup-slide-bottom"
appear="false"
persisted="false"
css="true"
>
<transition-stub>
</transition-stub>
<transition-stub name="van-fade"
appear="true"
persisted="false"
css="true"
role="button"
<transition-stub role="button"
tabindex="0"
>
</transition-stub>
<transition-stub name="van-popup-slide-bottom"
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`] = `
<transition-stub name="van-fade"
appear="true"
persisted="false"
css="true"
role="button"
<transition-stub role="button"
tabindex="0"
>
<div class="van-overlay">
</div>
</transition-stub>
<transition-stub name="van-popup-slide-bottom"
appear="false"
persisted="false"
css="true"
>
<transition-stub>
<div role="dialog"
tabindex="0"
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-buttons-padding: var(--van-padding-xl)
var(--van-padding-base);

View File

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

View File

@ -27,10 +27,3 @@ export type AddressEditInstance = ComponentPublicInstance<
AddressEditProps,
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-disabled-text-color: var(--van-text-color-2);
--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 type { AddressListProps } from './AddressList';
export type { AddressListAddress } from './AddressListItem';
export type { AddressListThemeVars } from './types';
declare module 'vue' {
export interface GlobalComponents {

View File

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

View File

@ -54,7 +54,7 @@ const areaList = {
### @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
# 通过 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-color: var(--van-white);
--van-badge-padding: 0 3px;

View File

@ -5,7 +5,6 @@ export const Badge = withInstall(_Badge);
export default Badge;
export { badgeProps } from './Badge';
export type { BadgeProps, BadgePosition } from './Badge';
export type { BadgeThemeVars } from './types';
declare module 'vue' {
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-padding: 0 var(--van-padding-base);
--van-button-mini-font-size: var(--van-font-size-xs);

View File

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

View File

@ -12,40 +12,3 @@ export type ButtonSize = 'large' | 'normal' | 'small' | 'mini';
export type ButtonNativeType = NonNullable<ButtonHTMLAttributes['type']>;
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 subtitle = ref<{ text: string; date?: Date }>({
text: '',
date: undefined,
});
const subtitle = ref('');
const currentDate = ref(getInitialDate());
const [monthRefs, setMonthRefs] = useRefs<CalendarMonthInstance>();
@ -270,10 +267,7 @@ export default defineComponent({
/* istanbul ignore else */
if (currentMonth) {
subtitle.value = {
text: currentMonth.getTitle(),
date: currentMonth.date,
};
subtitle.value = currentMonth.getTitle();
}
};
@ -531,9 +525,8 @@ export default defineComponent({
<div class={bem()}>
<CalendarHeader
v-slots={pick(slots, ['title', 'subtitle'])}
date={subtitle.value.date}
title={props.title}
subtitle={subtitle.value.text}
subtitle={subtitle.value}
showTitle={props.showTitle}
showSubtitle={props.showSubtitle}
firstDayOfWeek={dayOffset.value}

View File

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

View File

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

View File

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

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