Merge branch 'dev' into next

.gitignore

@@ -15,6 +15,5 @@ package-lock.json
 es
 lib
 dist
-vetur
 **/site-dist
 changelog.generated.md

README.md

@@ -4,14 +4,13 @@
 
 <h1 align="center">Vant</h1>
 
-<p align="center">Mobile UI Components built on Vue</p>
+<p align="center">Lightweight Mobile UI Components built on Vue</p>
 
 <p align="center">
     <img src="https://img.shields.io/npm/v/vant?style=flat-square" alt="npm version" />
     <img src="https://img.shields.io/github/workflow/status/vant-ui/vant/CI/dev?style=flat-square" alt="CI Status" />
     <img src="https://img.shields.io/codecov/c/github/vant-ui/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
     <img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square&color=#4fc08d" alt="downloads" />
-    <img src="https://img.shields.io/jsdelivr/npm/hm/vant?style=flat-square" alt="Jsdelivr Hits">
     <img src="https://img.badgesize.io/https://unpkg.com/vant@3/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
 </p>
 
@@ -29,6 +28,7 @@
 
 - 🚀 1KB Component average size (min+gzip)
 - 🚀 70+ High quality components
+- 🚀 Zero third-party dependencies
 - 💪 90%+ Unit test coverage
 - 💪 Written in TypeScript
 - 📖 Extensive documentation and demos

README.zh-CN.md

@@ -11,7 +11,6 @@
     <img src="https://img.shields.io/github/workflow/status/vant-ui/vant/CI/dev?style=flat-square" alt="CI Status" />
     <img src="https://img.shields.io/codecov/c/github/vant-ui/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
     <img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square&color=#4fc08d" alt="downloads" />
-    <img src="https://img.shields.io/jsdelivr/npm/hm/vant?style=flat-square" alt="Jsdelivr Hits">
     <img src="https://img.badgesize.io/https://unpkg.com/vant@3/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
 </p>
 
@@ -33,6 +32,7 @@ Vant 是一个**轻量、可靠的移动端组件库**，于 2017 年开源。
 
 - 🚀 性能极佳，组件平均体积小于 1KB（min+gzip）
 - 🚀 70+ 个高质量组件，覆盖移动端主流场景
+- 🚀 零外部依赖，不依赖三方 npm 包
 - 💪 使用 TypeScript 编写，提供完整的类型定义
 - 💪 单元测试覆盖率超过 90%，提供稳定性保障
 - 📖 提供丰富的中英文文档和组件示例

packages/create-vant-cli-app/generators/vue3/.gitignore.tpl

@@ -15,6 +15,5 @@ test/coverage
 es
 lib
 dist
-vetur
 site
 changelog.generated.md

packages/vant-cli/README.zh-CN.md

@@ -1,9 +1,10 @@
 # Vant CLI
 
-Vant CLI 是一个 Vue 组件库构建工具，通过 Vant CLI 可以快速搭建一套功能完备的 Vue 组件库。
+Vant CLI 是一个基于 Vite 实现的 Vue 组件库构建工具，通过 Vant CLI 可以快速搭建一套功能完备的 Vue 组件库。
 
 ### 特性
 
+- 基于 Vite 实现，享受愉悦的开发体验
 - 提供丰富的命令，涵盖从开发测试到构建发布的完整流程
 - 基于约定的目录结构，自动生成优雅的文档站点和组件示例
 - 内置 ESLint 校验规则，提交代码时自动执行校验

packages/vant-cli/changelog.md

@@ -25,6 +25,12 @@
 yarn add stylelint@13 @vant/stylelint-config
 ```
 
+### 移除 vetur 相关配置
+
+由于 Vue 3 推荐使用 volar 而不是 vetur，因此移除了 vetur 相关的配置文件。
+
+现在会默认生成 WebStorm 所需的 web-types.json 文件到 `lib/web-types.json` 目录下。
+
 ## v4.0.3
 
 `2022-07-02`

packages/vant-cli/package.json

@@ -54,7 +54,6 @@
     "@docsearch/js": "^3.0.0",
     "@types/jest": "^27.0.3",
     "@vant/eslint-config": "^3.3.2",
-    "@vant/markdown-vetur": "^2.3.0",
     "@vant/touch-emulator": "^1.3.2",
     "@vitejs/plugin-vue": "^3.0.1",
     "@vitejs/plugin-vue-jsx": "^2.0.0",

packages/vant-cli/src/commands/build.ts

@@ -14,7 +14,7 @@ import { genStyleDepsMap } from '../compiler/gen-style-deps-map.js';
 import { genComponentStyle } from '../compiler/gen-component-style.js';
 import { SRC_DIR, LIB_DIR, ES_DIR } from '../common/constant.js';
 import { genPackageStyle } from '../compiler/gen-package-style.js';
-import { genVeturConfig } from '../compiler/gen-vetur-config.js';
+import { genWebStormTypes } from '../compiler/web-types/index.js';
 import {
   isDir,
   isSfc,
@@ -137,7 +137,7 @@ async function buildPackageStyleEntry() {
 async function buildBundledOutputs() {
   setModuleEnv('esmodule');
   await compileBundles();
-  genVeturConfig();
+  genWebStormTypes();
 }
 
 const tasks = [

packages/vant-cli/src/commands/clean.ts

@@ -3,7 +3,6 @@ import {
   ES_DIR,
   LIB_DIR,
   DIST_DIR,
-  VETUR_DIR,
   SITE_DIST_DIR,
 } from '../common/constant.js';
 
@@ -14,7 +13,6 @@ export async function clean() {
     remove(ES_DIR),
     remove(LIB_DIR),
     remove(DIST_DIR),
-    remove(VETUR_DIR),
     remove(SITE_DIST_DIR),
   ]);
 }

packages/vant-cli/src/common/constant.ts

@@ -21,7 +21,6 @@ export const ROOT = findRootDir(CWD);
 export const ES_DIR = join(ROOT, 'es');
 export const LIB_DIR = join(ROOT, 'lib');
 export const DOCS_DIR = join(ROOT, 'docs');
-export const VETUR_DIR = join(ROOT, 'vetur');
 export const SITE_DIST_DIR = join(ROOT, 'site-dist');
 export const VANT_CONFIG_FILE = join(ROOT, 'vant.config.mjs');
 export const PACKAGE_JSON_FILE = join(ROOT, 'package.json');

packages/vant-cli/src/compiler/gen-vetur-config.ts

@@ -1,25 +0,0 @@
-import markdownVetur from '@vant/markdown-vetur';
-import {
-  SRC_DIR,
-  VETUR_DIR,
-  getVantConfig,
-  getPackageJson,
-} from '../common/constant.js';
-
-// generate vetur tags & attributes
-export function genVeturConfig() {
-  const pkgJson = getPackageJson();
-  const vantConfig = getVantConfig();
-  const options = vantConfig.build?.vetur;
-
-  if (options) {
-    markdownVetur.parseAndWrite({
-      name: vantConfig.name,
-      path: SRC_DIR,
-      test: /README\.md/,
-      version: pkgJson.version,
-      outputDir: VETUR_DIR,
-      ...options,
-    });
-  }
-}

packages/vant-cli/src/compiler/web-types/formatter.ts

@@ -1,14 +1,19 @@
 /* eslint-disable no-continue */
-import { Articals } from './parser';
+import { Articles } from './parser.js';
-import { formatOptions, formatType, removeVersion, toKebabCase } from './utils';
+import {
-import { VueEventArgument, VueTag } from './type';
+  formatOptions,
+  formatType,
+  removeVersion,
+  toKebabCase,
+} from './utils.js';
+import { VueEventArgument, VueTag } from './type.js';
 
 function formatComponentName(name: string, tagPrefix: string) {
   return tagPrefix + toKebabCase(name);
 }
 
 /**
- * format arugments of events
+ * format arguments of events
  * input  = value: { foo: foo or 1, bar: bar or 2 }, value2: { one: 1 and 1, two: 2 and 2 }, foo: bar
  * output = [{ name: 'value', type: '{ foo: foo or 1, bar: bar or 2 }' }, { name: 'value2', type: '{ one: 1 and 1, two: 2 and 2 }'}, { name: 'foo', type: 'bar' }]
  */
@@ -73,29 +78,29 @@ function findTag(vueTags: VueTag[], name: string) {
 
 export function formatter(
   vueTags: VueTag[],
-  articals: Articals,
+  articles: Articles,
   tagPrefix = ''
 ) {
-  if (!articals.length) {
+  if (!articles.length) {
     return;
   }
 
-  const mainTitle = articals[0].content;
+  const mainTitle = articles[0].content;
   const defaultName = mainTitle
     ? formatComponentName(mainTitle.split(' ')[0], tagPrefix)
     : '';
-  const tables = articals.filter((artical) => artical.type === 'table');
+  const tables = articles.filter((article) => article.type === 'table');
 
   tables.forEach((item) => {
     const { table } = item;
-    const prevIndex = articals.indexOf(item) - 1;
+    const prevIndex = articles.indexOf(item) - 1;
-    const prevArtical = articals[prevIndex];
+    const prevArticle = articles[prevIndex];
 
-    if (!prevArtical || !prevArtical.content || !table || !table.body) {
+    if (!prevArticle || !prevArticle.content || !table || !table.body) {
       return;
     }
 
-    const tableTitle = prevArtical.content;
+    const tableTitle = prevArticle.content;
 
     if (tableTitle.includes('Props')) {
       const name = getNameFromTableTitle(tableTitle, tagPrefix) || defaultName;

packages/vant-cli/src/compiler/web-types/index.ts

@@ -0,0 +1,54 @@
+import glob from 'fast-glob';
+import { join } from 'path';
+import fse from 'fs-extra';
+import { mdParser } from './parser.js';
+import { formatter } from './formatter.js';
+import { genWebTypes } from './web-types.js';
+import { Options, VueTag } from './type.js';
+import { normalizePath } from './utils.js';
+import {
+  SRC_DIR,
+  LIB_DIR,
+  getVantConfig,
+  getPackageJson,
+} from '../../common/constant.js';
+
+async function readMarkdown(options: Options) {
+  const mds = await glob(normalizePath(`${options.path}/**/*.md`));
+  return mds
+    .filter((md) => options.test.test(md))
+    .map((path) => fse.readFileSync(path, 'utf-8'));
+}
+
+export async function parseAndWrite(options: Options) {
+  if (!options.outputDir) {
+    throw new Error('outputDir can not be empty.');
+  }
+
+  const mds = await readMarkdown(options);
+  const vueTags: VueTag[] = [];
+
+  mds.forEach((md) => {
+    const parsedMd = mdParser(md);
+    formatter(vueTags, parsedMd, options.tagPrefix);
+  });
+
+  const webTypes = genWebTypes(vueTags, options);
+  fse.outputFileSync(
+    join(options.outputDir, 'web-types.json'),
+    JSON.stringify(webTypes, null, 2)
+  );
+}
+
+export function genWebStormTypes() {
+  const pkgJson = getPackageJson();
+  const vantConfig = getVantConfig();
+
+  parseAndWrite({
+    name: vantConfig.name,
+    path: SRC_DIR,
+    test: /README\.md/,
+    version: pkgJson.version,
+    outputDir: LIB_DIR,
+  });
+}

packages/vant-cli/src/compiler/web-types/parser.ts

@@ -9,14 +9,14 @@ type TableContent = {
   body: string[][];
 };
 
-export type Artical = {
+export type Article = {
   type: string;
   content?: string;
   table?: TableContent;
   level?: number;
 };
 
-export type Articals = Artical[];
+export type Articles = Article[];
 
 function readLine(input: string) {
   const end = input.indexOf('\n');
@@ -75,8 +75,8 @@ function tableParse(input: string) {
   };
 }
 
-export function mdParser(input: string): Articals {
+export function mdParser(input: string): Articles {
-  const artical = [];
+  const article = [];
   let start = 0;
   const end = input.length;
 
@@ -85,7 +85,7 @@ export function mdParser(input: string): Articals {
 
     let match;
     if ((match = TITLE_REG.exec(target))) {
-      artical.push({
+      article.push({
         type: 'title',
         content: match[2],
         level: match[1].length,
@@ -94,7 +94,7 @@ export function mdParser(input: string): Articals {
       start += match.index + match[0].length;
     } else if ((match = TABLE_REG.exec(target))) {
       const { table, usedLength } = tableParse(target.substr(match.index));
-      artical.push({
+      article.push({
         type: 'table',
         table,
       });
@@ -105,5 +105,5 @@ export function mdParser(input: string): Articals {
     }
   }
 
-  return artical;
+  return article;
 }

packages/vant-cli/src/compiler/web-types/type.ts

@@ -35,26 +35,6 @@ export type VueTag = {
   description?: string;
 };
 
-export type VeturTag = {
-  description?: string;
-  attributes: string[];
-};
-
-export type VeturTags = Record<string, VeturTag>;
-
-export type VeturAttribute = {
-  type: string;
-  description: string;
-  options?: string[];
-};
-
-export type VeturAttributes = Record<string, VeturAttribute>;
-
-export type VeturResult = {
-  tags: VeturTags;
-  attributes: VeturAttributes;
-};
-
 export type Options = {
   name: string;
   path: PathLike;

packages/vant-cli/src/compiler/web-types/web-types.ts

@@ -1,4 +1,4 @@
-import { VueTag, Options } from './type';
+import type { VueTag, Options } from './type.js';
 
 // create web-types.json to provide autocomplete in JetBrains IDEs
 export function genWebTypes(tags: VueTag[], options: Options) {

packages/vant-cli/src/config/vite.package.ts

@@ -14,12 +14,19 @@ export function getViteConfigForPackage({
   const { name, build } = getVantConfig();
   const entryExtension = build?.extensions?.esm || '.js';
   const entry = join(ES_DIR, `index${entryExtension}`);
+  const shouldReplaceEnv = minify || formats?.includes('umd');
 
   return {
     root: CWD,
 
     logLevel: 'silent',
 
+    define: shouldReplaceEnv
+      ? {
+          'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+        }
+      : undefined,
+
     build: {
       lib: {
         name,
@@ -30,6 +37,7 @@ export function getViteConfigForPackage({
           return minify ? `${name}${suffix}.min.js` : `${name}${suffix}.js`;
         },
       },
+
       // terser has better compression than esbuild
       minify: minify ? 'terser' : false,
       rollupOptions: {

packages/vant-cli/src/module.d.ts

@@ -4,4 +4,3 @@ declare module 'hash-sum';
 declare module '@babel/core';
 declare module 'release-it';
 declare module 'conventional-changelog';
-declare module '@vant/markdown-vetur';

packages/vant-markdown-vetur/LICENSE

@@ -1,10 +0,0 @@
-MIT License
-
-Copyright (c) Youzan
-Copyright (c) Chen Jiahan and other contributors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/vant-markdown-vetur/README.md

@@ -1,37 +0,0 @@
-# Vant Markdown Vetur
-
-将 .md 文件转换成能描述 vue 组件的 .json 文件，供 WebStorm 和 vscode 的 `vetur` 插件读取，从而可以在 vue 模版语法中拥有自动补全的功能。
-
-## Install
-
-```shell
-# with npm
-npm i @vant/markdown-vetur -D
-
-# with yarn
-yarn add @vant/markdown-vetur -D
-
-# with pnpm
-pnpm add @vant/markdown-vetur -D
-```
-
-## API
-
-#### parseAndWrite
-
-解析目录下所有匹配的文件，并输出为 tags.json 和 attributes.json
-
-```ts
-interface Options {
-  // 需要解析的文件夹路径
-  path: PathLike;
-  // 文件匹配正则
-  test: RegExp;
-  // 输出目录
-  outputDir: string;
-  // 递归的目录最大深度
-  maxDeep?: number;
-  // 解析出来的组件名前缀
-  tagPrefix?: string;
-}
-```

packages/vant-markdown-vetur/package.json

@@ -1,35 +0,0 @@
-{
-  "name": "@vant/markdown-vetur",
-  "version": "2.3.0",
-  "description": "simple parse markdown to vue component description for vetur auto-completion",
-  "main": "lib/index.js",
-  "files": [
-    "lib"
-  ],
-  "scripts": {
-    "dev": "tsc --watch",
-    "build": "rimraf ./lib && tsc",
-    "release": "pnpm build && npm publish",
-    "prepare": "pnpm build"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/vant-ui/vant.git",
-    "directory": "packages/vant-markdown-vetur"
-  },
-  "bugs": "https://github.com/vant-ui/vant/issues",
-  "author": "zhangshuai",
-  "license": "MIT",
-  "dependencies": {
-    "fast-glob": "^3.2.2",
-    "fs-extra": "^10.0.0"
-  },
-  "devDependencies": {
-    "@types/fs-extra": "^9.0.13",
-    "typescript": "^4.7.4"
-  }
-}

packages/vant-markdown-vetur/src/index.ts

@@ -1,49 +0,0 @@
-import glob from 'fast-glob';
-import { join } from 'path';
-import { mdParser } from './parser';
-import { formatter } from './formatter';
-import { genWebTypes } from './web-types';
-import { readFileSync, outputFileSync } from 'fs-extra';
-import { Options, VueTag } from './type';
-import { normalizePath } from './utils';
-import { genVeturTags, genVeturAttributes } from './vetur';
-
-async function readMarkdown(options: Options) {
-  const mds = await glob(normalizePath(`${options.path}/**/*.md`));
-  return mds
-    .filter((md) => options.test.test(md))
-    .map((path) => readFileSync(path, 'utf-8'));
-}
-
-export async function parseAndWrite(options: Options) {
-  if (!options.outputDir) {
-    throw new Error('outputDir can not be empty.');
-  }
-
-  const mds = await readMarkdown(options);
-  const vueTags: VueTag[] = [];
-
-  mds.forEach((md) => {
-    const parsedMd = mdParser(md);
-    formatter(vueTags, parsedMd, options.tagPrefix);
-  });
-
-  const webTypes = genWebTypes(vueTags, options);
-  const veturTags = genVeturTags(vueTags);
-  const veturAttributes = genVeturAttributes(vueTags);
-
-  outputFileSync(
-    join(options.outputDir, 'tags.json'),
-    JSON.stringify(veturTags, null, 2)
-  );
-  outputFileSync(
-    join(options.outputDir, 'attributes.json'),
-    JSON.stringify(veturAttributes, null, 2)
-  );
-  outputFileSync(
-    join(options.outputDir, 'web-types.json'),
-    JSON.stringify(webTypes, null, 2)
-  );
-}
-
-export default { parseAndWrite };

packages/vant-markdown-vetur/src/vetur.ts

@@ -1,36 +0,0 @@
-import { VueTag, VeturTags, VeturAttributes, VeturAttribute } from './type';
-
-export function genVeturTags(tags: VueTag[]) {
-  const veturTags: VeturTags = {};
-
-  tags.forEach((tag) => {
-    veturTags[tag.name] = {
-      attributes: tag.attributes ? tag.attributes.map((item) => item.name) : [],
-    };
-  });
-
-  return veturTags;
-}
-
-export function genVeturAttributes(tags: VueTag[]) {
-  const veturAttributes: VeturAttributes = {};
-
-  tags.forEach((tag) => {
-    if (tag.attributes) {
-      tag.attributes.forEach((attr) => {
-        const attribute: VeturAttribute = {
-          type: attr.value.type,
-          description: `${attr.description}, Default: ${attr.default}`,
-        };
-
-        if (attr.options.length > 0) {
-          attribute.options = attr.options;
-        }
-
-        veturAttributes[`${tag.name}/${attr.name}`] = attribute;
-      });
-    }
-  });
-
-  return veturAttributes;
-}

packages/vant-markdown-vetur/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "extends": "../../tsconfig",
-  "compilerOptions": {
-    "target": "ES2019",
-    "outDir": "./lib",
-    "module": "commonjs",
-    "declaration": true
-  },
-  "include": ["src/**/*"]
-}

packages/vant-touch-emulator/build.js

@@ -0,0 +1,11 @@
+const fs = require('fs');
+const path = require('path');
+
+const srcFile = path.join(__dirname, 'src', 'index.js');
+const distDir = path.join(__dirname, 'dist');
+
+if (!fs.existsSync(distDir)) {
+  fs.mkdirSync(distDir);
+}
+fs.copyFileSync(srcFile, path.join(distDir, 'index.js'));
+fs.copyFileSync(srcFile, path.join(distDir, 'index.mjs'));

packages/vant-touch-emulator/changelog.md

@@ -1,5 +1,11 @@
 # Changelog
 
+### [v1.4.0]
+
+`2022-08-06`
+
+- support `.mjs` extension
+
 ### [v1.3.1]
 
 `2021-07-06`

packages/vant-touch-emulator/package.json

@@ -1,10 +1,16 @@
 {
   "name": "@vant/touch-emulator",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "Vant touch emulator",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "scripts": {
+    "build": "node ./build.js",
+    "prepare": "pnpm build"
+  },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
   "repository": {
     "type": "git",

packages/vant/docs/markdown/home.en-US.md

@@ -2,7 +2,7 @@
   <div class="van-doc-intro">
     <img class="van-doc-intro__logo" style="width: 120px; height: 120px;" src="https://fastly.jsdelivr.net/npm/@vant/assets/logo.png">
     <h2 style="margin: 0; font-size: 36px; line-height: 60px;">Vant</h2>
-    <p>Mobile UI Components built on Vue</p>
+    <p>Lightweight Mobile UI Components built on Vue</p>
   </div>
 </div>
 
@@ -10,6 +10,7 @@
 
 - 🚀 1KB Component average size (min+gzip)
 - 🚀 70+ High quality components
+- 🚀 Zero third-party dependencies
 - 💪 90%+ Unit test coverage
 - 💪 Written in TypeScript
 - 📖 Extensive documentation and demos

packages/vant/docs/markdown/home.zh-CN.md

@@ -16,6 +16,7 @@ Vant 是一个**轻量、可靠的移动端组件库**，于 2017 年开源。
 
 - 🚀 性能极佳，组件平均体积小于 1KB（min+gzip）
 - 🚀 70+ 个高质量组件，覆盖移动端主流场景
+- 🚀 零外部依赖，不依赖三方 npm 包
 - 💪 使用 TypeScript 编写，提供完整的类型定义
 - 💪 单元测试覆盖率超过 90%，提供稳定性保障
 - 📖 提供丰富的中英文文档和组件示例

packages/vant/package.json

@@ -13,8 +13,7 @@
   },
   "files": [
     "es",
-    "lib",
+    "lib"
-    "vetur"
   ],
   "scripts": {
     "dev": "vant-cli dev",
@@ -72,9 +71,5 @@
     "*.css",
     "*.less"
   ],
-  "web-types": "vetur/web-types.json",
+  "web-types": "lib/web-types.json"
-  "vetur": {
-    "tags": "vetur/tags.json",
-    "attributes": "vetur/attributes.json"
-  }
 }

packages/vant/src/action-sheet/test/__snapshots__/demo.spec.ts.snap

@@ -67,23 +67,33 @@ exports[`should render demo and match snapshot 1`] = `
     </i>
   </div>
 </div>
-<transition-stub>
+<transition-stub role="button"
+                 tabindex="0"
+>
 </transition-stub>
 <transition-stub>
 </transition-stub>
-<transition-stub>
+<transition-stub role="button"
+                 tabindex="0"
+>
 </transition-stub>
 <transition-stub>
 </transition-stub>
-<transition-stub>
+<transition-stub role="button"
+                 tabindex="0"
+>
 </transition-stub>
 <transition-stub>
 </transition-stub>
-<transition-stub>
+<transition-stub role="button"
+                 tabindex="0"
+>
 </transition-stub>
 <transition-stub>
 </transition-stub>
-<transition-stub>
+<transition-stub role="button"
+                 tabindex="0"
+>
 </transition-stub>
 <transition-stub>
 </transition-stub>

packages/vant/src/action-sheet/test/__snapshots__/index.spec.ts.snap

@@ -22,12 +22,17 @@ exports[`should render cancel slot correctly 1`] = `
 `;
 
 exports[`should render default slot correctly 1`] = `
-<transition-stub>
+<transition-stub role="button"
+                 tabindex="0"
+>
   <div class="van-overlay">
   </div>
 </transition-stub>
 <transition-stub>
-  <div class="van-popup van-popup--round van-popup--bottom van-safe-area-bottom van-action-sheet">
+  <div role="dialog"
+       tabindex="0"
+       class="van-popup van-popup--round van-popup--bottom van-safe-area-bottom van-action-sheet"
+  >
     <div class="van-action-sheet__header">
       Title
       <i class="van-badge__wrapper van-icon van-icon-cross van-action-sheet__close van-haptics-feedback">

packages/vant/src/button/README.md

@@ -31,22 +31,22 @@ app.use(Button);
 ### Plain
 
 ```html
-<van-button plain type="primary">Primary</van-button>
+<van-button plain type="primary">Plain</van-button>
-<van-button plain type="primary">Danger</van-button>
+<van-button plain type="success">Plain</van-button>
 ```
 
 ### Hairline
 
 ```html
 <van-button plain hairline type="primary">Hairline</van-button>
-<van-button plain hairline type="primary">Hairline</van-button>
+<van-button plain hairline type="success">Hairline</van-button>
 ```
 
 ### Disabled
 
 ```html
 <van-button disabled type="primary">Disabled</van-button>
-<van-button disabled type="primary">Disabled</van-button>
+<van-button disabled type="success">Disabled</van-button>
 ```
 
 ### Loading
@@ -54,14 +54,14 @@ app.use(Button);
 ```html
 <van-button loading type="primary" />
 <van-button loading type="primary" loading-type="spinner" />
-<van-button loading type="primary" loading-text="Loading..." />
+<van-button loading type="success" loading-text="Loading..." />
 ```
 
 ### Shape
 
 ```html
 <van-button square type="primary">Square</van-button>
-<van-button round type="primary">Round</van-button>
+<van-button round type="success">Round</van-button>
 ```
 
 ### Icon

packages/vant/src/button/README.zh-CN.md

@@ -36,7 +36,7 @@ app.use(Button);
 
 ```html
 <van-button plain type="primary">朴素按钮</van-button>
-<van-button plain type="primary">朴素按钮</van-button>
+<van-button plain type="success">朴素按钮</van-button>
 ```
 
 ### 细边框
@@ -45,7 +45,7 @@ app.use(Button);
 
 ```html
 <van-button plain hairline type="primary">细边框按钮</van-button>
-<van-button plain hairline type="primary">细边框按钮</van-button>
+<van-button plain hairline type="success">细边框按钮</van-button>
 ```
 
 ### 禁用状态
@@ -54,7 +54,7 @@ app.use(Button);
 
 ```html
 <van-button disabled type="primary">禁用状态</van-button>
-<van-button disabled type="primary">禁用状态</van-button>
+<van-button disabled type="success">禁用状态</van-button>
 ```
 
 ### 加载状态
@@ -64,7 +64,7 @@ app.use(Button);
 ```html
 <van-button loading type="primary" />
 <van-button loading type="primary" loading-type="spinner" />
-<van-button loading type="primary" loading-text="加载中..." />
+<van-button loading type="success" loading-text="加载中..." />
 ```
 
 ### 按钮形状
@@ -73,7 +73,7 @@ app.use(Button);
 
 ```html
 <van-button square type="primary">方形按钮</van-button>
-<van-button round type="primary">圆形按钮</van-button>
+<van-button round type="success">圆形按钮</van-button>
 ```
 
 ### 图标按钮

packages/vant/src/calendar/test/__snapshots__/demo.spec.ts.snap

@@ -275,7 +275,9 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
 </div>
-<transition-stub>
+<transition-stub role="button"
+                 tabindex="0"
+>
 </transition-stub>
 <transition-stub>
 </transition-stub>

packages/vant/src/calendar/test/__snapshots__/index.spec.ts.snap

@@ -557,14 +557,18 @@ exports[`formatter prop 1`] = `
 `;
 
 exports[`popup wrapper 1`] = `
-<transition-stub>
+<transition-stub role="button"
+                 tabindex="0"
+>
 </transition-stub>
 <transition-stub>
 </transition-stub>
 `;
 
 exports[`popup wrapper 2`] = `
-<transition-stub>
+<transition-stub role="button"
+                 tabindex="0"
+>
   <div style="z-index: 2001;"
        class="van-overlay"
   >
@@ -572,6 +576,8 @@ exports[`popup wrapper 2`] = `
 </transition-stub>
 <transition-stub>
   <div style="z-index: 2001;"
+       role="dialog"
+       tabindex="0"
        class="van-popup van-popup--round van-popup--bottom van-calendar__popup"
   >
     <div class="van-calendar">

packages/vant/src/checkbox/README.md

@@ -301,21 +301,24 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Checkb
 ### toggleAll Usage
 
 ```js
-const { checkboxGroup } = this.$refs;
+import { ref } from 'vue';
+import type { CheckboxGroupInstance } from 'vant';
+
+const checkboxGroupRef = ref<CheckboxGroupInstance>();
 
 // Toggle all
-checkboxGroup.toggleAll();
+checkboxGroup.value?.toggleAll();
 // Select all
-checkboxGroup.toggleAll(true);
+checkboxGroup.value?.toggleAll(true);
 // Unselect all
-checkboxGroup.toggleAll(false);
+checkboxGroup.value?.toggleAll(false);
 
 // Toggle all, skip disabled
-checkboxGroup.toggleAll({
+checkboxGroup.value?.toggleAll({
   skipDisabled: true,
 });
 // Select all, skip disabled
-checkboxGroup.toggleAll({
+checkboxGroup.value?.toggleAll({
   checked: true,
   skipDisabled: true,
 });

packages/vant/src/checkbox/README.zh-CN.md

@@ -192,7 +192,6 @@ export default {
   setup() {
     const checked = ref([]);
     const checkboxGroup = ref(null);
-
     const checkAll = () => {
       checkboxGroup.value.toggleAll(true);
     }
@@ -319,21 +318,24 @@ export default {
 ### toggleAll 方法示例
 
 ```js
-const { checkboxGroup } = this.$refs;
+import { ref } from 'vue';
+import type { CheckboxGroupInstance } from 'vant';
+
+const checkboxGroupRef = ref<CheckboxGroupInstance>();
 
 // 全部反选
-checkboxGroup.toggleAll();
+checkboxGroupRef?.value.toggleAll();
 // 全部选中
-checkboxGroup.toggleAll(true);
+checkboxGroupRef?.value.toggleAll(true);
 // 全部取消
-checkboxGroup.toggleAll(false);
+checkboxGroupRef?.value.toggleAll(false);
 
 // 全部反选，并跳过禁用的复选框
-checkboxGroup.toggleAll({
+checkboxGroupRef?.value.toggleAll({
   skipDisabled: true,
 });
 // 全部选中，并跳过禁用的复选框
-checkboxGroup.toggleAll({
+checkboxGroupRef?.value.toggleAll({
   checked: true,
   skipDisabled: true,
 });

packages/vant/src/collapse-item/CollapseItem.tsx

@@ -161,7 +161,7 @@ export default defineComponent({
       </div>
     ));
 
-    useExpose({ toggle });
+    useExpose({ toggle, expanded, itemName: name });
 
     return () => (
       <div class={[bem({ border: index.value && props.border })]}>

packages/vant/src/collapse/Collapse.tsx

@@ -3,6 +3,7 @@ import {
   type PropType,
   type InjectionKey,
   type ExtractPropTypes,
+  type ComponentPublicInstance,
 } from 'vue';
 import {
   truthProp,
@@ -11,6 +12,7 @@ import {
   type Numeric,
 } from '../utils';
 import { useChildren } from '@vant/use';
+import { useExpose } from '../composables/use-expose';
 
 const [name, bem] = createNamespace('collapse');
 
@@ -19,6 +21,13 @@ export type CollapseProvide = {
   isExpanded: (name: Numeric) => boolean;
 };
 
+export type CollapseToggleAllOptions =
+  | boolean
+  | {
+      expanded?: boolean;
+      skipDisabled?: boolean;
+    };
+
 export const COLLAPSE_KEY: InjectionKey<CollapseProvide> = Symbol(name);
 
 const collapseProps = {
@@ -32,6 +41,10 @@ const collapseProps = {
 
 export type CollapseProps = ExtractPropTypes<typeof collapseProps>;
 
+export type CollapseInstance = ComponentPublicInstance<{
+  toggleAll: (options?: boolean | CollapseToggleAllOptions) => void;
+}>;
+
 function validateModelValue(
   modelValue: Numeric | Numeric[],
   accordion: boolean
@@ -59,7 +72,7 @@ export default defineComponent({
   emits: ['change', 'update:modelValue'],
 
   setup(props, { emit, slots }) {
-    const { linkChildren } = useChildren(COLLAPSE_KEY);
+    const { linkChildren, children } = useChildren(COLLAPSE_KEY);
 
     const updateName = (name: Numeric | Numeric[]) => {
       emit('change', name);
@@ -68,7 +81,6 @@ export default defineComponent({
 
     const toggle = (name: Numeric, expanded: boolean) => {
       const { accordion, modelValue } = props;
-
       if (accordion) {
         updateName(name === modelValue ? '' : name);
       } else if (expanded) {
@@ -80,6 +92,27 @@ export default defineComponent({
       }
     };
 
+    const toggleAll = (options: boolean | CollapseToggleAllOptions = {}) => {
+      if (props.accordion) {
+        return;
+      }
+
+      if (typeof options === 'boolean') {
+        options = { expanded: options };
+      }
+
+      const { expanded, skipDisabled } = options!;
+      const expandedChildren = children.filter((item: any) => {
+        if (item.disabled && skipDisabled) {
+          return item.expanded.value;
+        }
+        return expanded ?? !item.expanded.value;
+      });
+
+      const names = expandedChildren.map((item) => item.itemName.value);
+      updateName(names);
+    };
+
     const isExpanded = (name: Numeric) => {
       const { accordion, modelValue } = props;
 
@@ -94,7 +127,7 @@ export default defineComponent({
         ? modelValue === name
         : (modelValue as Numeric[]).includes(name);
     };
-
+    useExpose({ toggleAll });
     linkChildren({ toggle, isExpanded });
 
     return () => (

packages/vant/src/collapse/README.md

@@ -108,6 +108,48 @@ export default {
 };
 ```
 
+### Toggle All
+
+Using `toggleAll` method to toggle all items.
+
+```html
+<van-collapse v-model="activeNames">
+  <van-collapse-item title="Title1" name="1">Content 1</van-collapse-item>
+  <van-collapse-item title="Title2" name="2">Content 2</van-collapse-item>
+  <van-collapse-item title="Title3" name="3">Content 3</van-collapse-item>
+</van-collapse>
+
+<van-button type="primary" @click="openAll">Open All</van-button>
+<van-button type="primary" @click="toggleAll">Toggle All</van-button>
+```
+
+```js
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const activeNames = ref(['1']);
+    const collapse = ref(null);
+
+    const openAll = () => {
+      collapse.value.toggleAll(true);
+    }
+    const toggleAll = () => {
+      collapse.value.toggleAll();
+    },
+
+    return {
+      activeNames,
+      openAll,
+      toggleAll,
+      collapse,
+    };
+  },
+};
+```
+
+> Tips: The toggleAll method cannot be used in accordion mode.
+
 ## API
 
 ### Collapse Props
@@ -143,6 +185,40 @@ export default {
 | value-class | Value className | _string_ | - |
 | label-class | Label className | _string_ | - |
 
+### Collapse Methods
+
+Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Collapse instance and call instance methods.
+
+| Name | Description | Attribute | Return value |
+| --- | --- | --- | --- |
+| toggleAll `v3.5.3` | Toggle the expanded status of all collapses | _options?: boolean \| object_ | - |
+
+### toggleAll Usage
+
+```js
+import { ref } from 'vue';
+import type { CollapseInstance } from 'vant';
+
+const collapseRef = ref<CollapseInstance>();
+
+// Toggle all
+collapseRef.value?.toggleAll();
+// Expand all
+collapseRef.value?.toggleAll(true);
+// UnExpand all
+collapseRef.value?.toggleAll(false);
+
+// Toggle all, skip disabled
+collapseRef.value?.toggleAll({
+  skipDisabled: true,
+});
+// Expand all, skip disabled
+collapseRef.value?.toggleAll({
+  expanded: true,
+  skipDisabled: true,
+});
+```
+
 ### CollapseItem Methods
 
 Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get CollapseItem instance and call instance methods.
@@ -160,6 +236,7 @@ import type {
   CollapseProps,
   CollapseItemProps,
   CollapseItemInstance,
+  CollapseToggleAllOptions,
 } from 'vant';
 ```
 

packages/vant/src/collapse/README.zh-CN.md

@@ -124,6 +124,54 @@ export default {
 };
 ```
 
+### 全部展开与全部切换
+
+通过 `Collapse` 实例上的 `toggleAll` 方法可以实现全部展开与全部切换。
+
+```html
+<van-collapse v-model="activeNames">
+  <van-collapse-item title="标题1" name="1">
+    代码是写出来给人看的，附带能在机器上运行。
+  </van-collapse-item>
+  <van-collapse-item title="标题2" name="2">
+    技术无非就是那些开发它的人的共同灵魂。
+  </van-collapse-item>
+  <van-collapse-item title="标题3" name="3">
+    在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
+  </van-collapse-item>
+</van-collapse>
+
+<van-button type="primary" @click="openAll">全部展开</van-button>
+<van-button type="primary" @click="toggleAll">全部切换</van-button>
+```
+
+```js
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const activeNames = ref(['1']);
+    const collapse = ref(null);
+
+    const openAll = () => {
+      collapse.value.toggleAll(true);
+    }
+    const toggleAll = () => {
+      collapse.value.toggleAll();
+    },
+
+    return {
+      activeNames,
+      openAll,
+      toggleAll,
+      collapse,
+    };
+  },
+};
+```
+
+> Tips: 手风琴模式下无法使用 toggleAll 方法。
+
 ## API
 
 ### Collapse Props
@@ -159,6 +207,40 @@ export default {
 | value-class | 右侧内容额外类名 | _string_ | - |
 | label-class | 描述信息额外类名 | _string_ | - |
 
+### Collapse 方法
+
+通过 ref 可以获取到 CollapseItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| toggleAll `v3.5.3` | 切换所有面板展开状态，传 `true` 为全部展开，`false` 为全部收起，不传参为全部切换 | _options?: boolean \| object_ | - |
+
+### toggleAll 方法示例
+
+```js
+import { ref } from 'vue';
+import type { CollapseInstance } from 'vant';
+
+const collapseRef = ref<CollapseInstance>();
+
+// 全部切换
+collapseRef.value?.toggleAll();
+// 全部展开
+collapseRef.value?.toggleAll(true);
+// 全部收起
+collapseRef.value?.toggleAll(false);
+
+// 全部全部切换，并跳过禁用的复选框
+collapseRef.value?.toggleAll({
+  skipDisabled: true,
+});
+// 全部选中，并跳过禁用的复选框
+collapseRef.value?.toggleAll({
+  expanded: true,
+  skipDisabled: true,
+});
+```
+
 ### CollapseItem 方法
 
 通过 ref 可以获取到 CollapseItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
@@ -176,6 +258,7 @@ import type {
   CollapseProps,
   CollapseItemProps,
   CollapseItemInstance,
+  CollapseToggleAllOptions,
 } from 'vant';
 ```
 

packages/vant/src/collapse/demo/index.vue

@@ -2,8 +2,10 @@
 import VanCollapse from '..';
 import VanCollapseItem from '../../collapse-item';
 import VanIcon from '../../icon';
+import VanButton from '../../button';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site';
+import type { CollapseInstance } from '../Collapse';
 
 const t = useTranslate({
   'zh-CN': {
@@ -12,6 +14,9 @@ const t = useTranslate({
     text3: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
     accordion: '手风琴',
     titleSlot: '自定义标题内容',
+    toggleAll: '全部展开与全部切换',
+    openAll: '全部展开',
+    inverse: '全部切换',
   },
   'en-US': {
     text1: 'Content 1',
@@ -19,6 +24,9 @@ const t = useTranslate({
     text3: 'Content 3',
     accordion: 'Accordion',
     titleSlot: 'Custom title',
+    toggleAll: 'Toggle All',
+    openAll: 'Open All',
+    inverse: 'Toggle All',
   },
 });
 
@@ -26,6 +34,16 @@ const active1 = ref([0]);
 const active2 = ref(0);
 const active3 = ref([]);
 const active4 = ref([]);
+const active5 = ref(['1']);
+
+const collapse = ref<CollapseInstance>();
+
+const openAll = () => {
+  collapse.value?.toggleAll?.(true);
+};
+const toggleAll = () => {
+  collapse.value?.toggleAll?.();
+};
 </script>
 
 <template>
@@ -88,6 +106,29 @@ const active4 = ref([]);
       </van-collapse-item>
     </van-collapse>
   </demo-block>
+
+  <demo-block :title="t('toggleAll')">
+    <van-collapse v-model="active5" ref="collapse">
+      <van-collapse-item :title="t('title') + 1" name="1">
+        {{ t('text1') }}
+      </van-collapse-item>
+      <van-collapse-item :title="t('title') + 2" name="2">
+        {{ t('text2') }}
+      </van-collapse-item>
+      <van-collapse-item :title="t('title') + 3" name="3">
+        {{ t('text3') }}
+      </van-collapse-item>
+    </van-collapse>
+
+    <div class="demo-collapse-buttons">
+      <van-button type="primary" @click="openAll">
+        {{ t('openAll') }}
+      </van-button>
+      <van-button type="primary" @click="toggleAll">
+        {{ t('inverse') }}
+      </van-button>
+    </div>
+  </demo-block>
 </template>
 
 <style lang="less">
@@ -98,5 +139,13 @@ const active4 = ref([]);
     font-size: 15px;
     vertical-align: -3px;
   }
+
+  &-buttons {
+    margin-top: var(--van-padding-md);
+
+    .van-button {
+      margin-left: var(--van-padding-md);
+    }
+  }
 }
 </style>

packages/vant/src/collapse/index.ts

@@ -3,7 +3,11 @@ import _Collapse from './Collapse';
 
 export const Collapse = withInstall(_Collapse);
 export default Collapse;
-export type { CollapseProps } from './Collapse';
+export type {
+  CollapseProps,
+  CollapseInstance,
+  CollapseToggleAllOptions,
+} from './Collapse';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/collapse/test/__snapshots__/demo.spec.ts.snap

@@ -197,4 +197,78 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
 </div>
+<div>
+  <div class="van-collapse van-hairline--top-bottom">
+    <div class="van-collapse-item">
+      <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded"
+           role="button"
+           tabindex="0"
+           aria-expanded="true"
+      >
+        <div class="van-cell__title">
+          <span>
+            Title1
+          </span>
+        </div>
+        <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+        </i>
+      </div>
+      <div class="van-collapse-item__wrapper">
+        <div class="van-collapse-item__content">
+          Content 1
+        </div>
+      </div>
+    </div>
+    <div class="van-collapse-item van-collapse-item--border">
+      <div class="van-cell van-cell--clickable van-collapse-item__title"
+           role="button"
+           tabindex="0"
+           aria-expanded="false"
+      >
+        <div class="van-cell__title">
+          <span>
+            Title2
+          </span>
+        </div>
+        <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+        </i>
+      </div>
+    </div>
+    <div class="van-collapse-item van-collapse-item--border">
+      <div class="van-cell van-cell--clickable van-collapse-item__title"
+           role="button"
+           tabindex="0"
+           aria-expanded="false"
+      >
+        <div class="van-cell__title">
+          <span>
+            Title3
+          </span>
+        </div>
+        <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+        </i>
+      </div>
+    </div>
+  </div>
+  <div class="demo-collapse-buttons">
+    <button type="button"
+            class="van-button van-button--primary van-button--normal"
+    >
+      <div class="van-button__content">
+        <span class="van-button__text">
+          Open All
+        </span>
+      </div>
+    </button>
+    <button type="button"
+            class="van-button van-button--primary van-button--normal"
+    >
+      <div class="van-button__content">
+        <span class="van-button__text">
+          Toggle All
+        </span>
+      </div>
+    </button>
+  </div>
+</div>
 `;

packages/vant/src/coupon-list/test/__snapshots__/demo.spec.ts.snap

@@ -19,7 +19,9 @@ exports[`should render demo and match snapshot 1`] = `
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
   </div>
-  <transition-stub>
+  <transition-stub role="button"
+                   tabindex="0"
+  >
   </transition-stub>
   <transition-stub>
   </transition-stub>

packages/vant/src/dialog/test/__snapshots__/demo.spec.ts.snap

@@ -95,9 +95,9 @@ exports[`should render demo and match snapshot 1`] = `
   <transition-stub>
   </transition-stub>
   <transition-stub>
-    <div class="van-popup van-popup--center van-dialog"
+    <div role="dialog"
-         role="dialog"
          tabindex="0"
+         class="van-popup van-popup--center van-dialog"
          aria-labelledby="Title"
          style="display: none;"
     >

packages/vant/src/dialog/test/__snapshots__/index.spec.js.snap

@@ -30,9 +30,9 @@ exports[`should render default slot correctly 1`] = `
 `;
 
 exports[`should render footer slot correctly 1`] = `
-<div class="van-popup van-popup--center van-dialog"
+<div role="dialog"
-     role="dialog"
      tabindex="0"
+     class="van-popup van-popup--center van-dialog"
      aria-labelledby="message"
 >
   <div class="van-dialog__content van-dialog__content--isolated">

packages/vant/src/dropdown-menu/test/__snapshots__/demo.spec.ts.snap

@@ -30,7 +30,9 @@ exports[`should render demo and match snapshot 1`] = `
     <div style="top: 0px; display: none;"
          class="van-dropdown-item van-dropdown-item--down"
     >
-      <transition-stub>
+      <transition-stub role="button"
+                       tabindex="0"
+      >
       </transition-stub>
       <transition-stub>
       </transition-stub>
@@ -38,7 +40,9 @@ exports[`should render demo and match snapshot 1`] = `
     <div style="top: 0px; display: none;"
          class="van-dropdown-item van-dropdown-item--down"
     >
-      <transition-stub>
+      <transition-stub role="button"
+                       tabindex="0"
+      >
       </transition-stub>
       <transition-stub>
       </transition-stub>
@@ -74,7 +78,9 @@ exports[`should render demo and match snapshot 1`] = `
     <div style="top: 0px; display: none;"
          class="van-dropdown-item van-dropdown-item--down"
     >
-      <transition-stub>
+      <transition-stub role="button"
+                       tabindex="0"
+      >
       </transition-stub>
       <transition-stub>
       </transition-stub>
@@ -82,7 +88,9 @@ exports[`should render demo and match snapshot 1`] = `
     <div style="top: 0px; display: none;"
          class="van-dropdown-item van-dropdown-item--down"
     >
-      <transition-stub>
+      <transition-stub role="button"
+                       tabindex="0"
+      >
       </transition-stub>
       <transition-stub>
       </transition-stub>
@@ -118,7 +126,9 @@ exports[`should render demo and match snapshot 1`] = `
     <div style="top: 0px; display: none;"
          class="van-dropdown-item van-dropdown-item--down"
     >
-      <transition-stub>
+      <transition-stub role="button"
+                       tabindex="0"
+      >
       </transition-stub>
       <transition-stub>
       </transition-stub>
@@ -126,7 +136,9 @@ exports[`should render demo and match snapshot 1`] = `
     <div style="top: 0px; display: none;"
          class="van-dropdown-item van-dropdown-item--down"
     >
-      <transition-stub>
+      <transition-stub role="button"
+                       tabindex="0"
+      >
       </transition-stub>
       <transition-stub>
       </transition-stub>
@@ -162,7 +174,9 @@ exports[`should render demo and match snapshot 1`] = `
     <div style="bottom: 0px; display: none;"
          class="van-dropdown-item van-dropdown-item--up"
     >
-      <transition-stub>
+      <transition-stub role="button"
+                       tabindex="0"
+      >
       </transition-stub>
       <transition-stub>
       </transition-stub>
@@ -170,7 +184,9 @@ exports[`should render demo and match snapshot 1`] = `
     <div style="bottom: 0px; display: none;"
          class="van-dropdown-item van-dropdown-item--up"
     >
-      <transition-stub>
+      <transition-stub role="button"
+                       tabindex="0"
+      >
       </transition-stub>
       <transition-stub>
       </transition-stub>
@@ -204,7 +220,9 @@ exports[`should render demo and match snapshot 1`] = `
     <div style="top: 0px; display: none;"
          class="van-dropdown-item van-dropdown-item--down"
     >
-      <transition-stub>
+      <transition-stub role="button"
+                       tabindex="0"
+      >
       </transition-stub>
       <transition-stub>
       </transition-stub>
@@ -212,7 +230,9 @@ exports[`should render demo and match snapshot 1`] = `
     <div style="top: 0px; display: none;"
          class="van-dropdown-item van-dropdown-item--down"
     >
-      <transition-stub>
+      <transition-stub role="button"
+                       tabindex="0"
+      >
       </transition-stub>
       <transition-stub>
       </transition-stub>

packages/vant/src/dropdown-menu/test/__snapshots__/index.spec.tsx.snap

@@ -29,7 +29,9 @@ exports[`click option 1`] = `
   <div style="top: 100px;"
        class="van-dropdown-item van-dropdown-item--down"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
       <div style="z-index: 2007; position: absolute; animation-duration: 0.2s; display: none;"
            class="van-overlay"
       >
@@ -37,8 +39,9 @@ exports[`click option 1`] = `
     </transition-stub>
     <transition-stub>
       <div style="z-index: 2007; transition-duration: 0.2s; display: none;"
-           class="van-popup van-popup--top van-dropdown-item__content"
            role="menu"
+           tabindex="0"
+           class="van-popup van-popup--top van-dropdown-item__content"
            aria-labelledby="van-dropdown-menu-0"
       >
         <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
@@ -73,7 +76,9 @@ exports[`click option 1`] = `
   <div style="top: 100px; display: none;"
        class="van-dropdown-item van-dropdown-item--down"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
     </transition-stub>
     <transition-stub>
     </transition-stub>
@@ -110,7 +115,9 @@ exports[`close-on-click-outside 1`] = `
   <div style="top: 100px;"
        class="van-dropdown-item van-dropdown-item--down"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
       <div style="z-index: 2004; position: absolute; animation-duration: 0.2s; display: none;"
            class="van-overlay"
       >
@@ -118,8 +125,9 @@ exports[`close-on-click-outside 1`] = `
     </transition-stub>
     <transition-stub>
       <div style="z-index: 2004; transition-duration: 0.2s; display: none;"
-           class="van-popup van-popup--top van-dropdown-item__content"
            role="menu"
+           tabindex="0"
+           class="van-popup van-popup--top van-dropdown-item__content"
            aria-labelledby="van-dropdown-menu-0"
       >
         <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
@@ -154,7 +162,9 @@ exports[`close-on-click-outside 1`] = `
   <div style="top: 100px; display: none;"
        class="van-dropdown-item van-dropdown-item--down"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
     </transition-stub>
     <transition-stub>
     </transition-stub>
@@ -180,7 +190,9 @@ exports[`destroy one item 1`] = `
   <div style="top: 0px; display: none;"
        class="van-dropdown-item van-dropdown-item--down"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
     </transition-stub>
     <transition-stub>
     </transition-stub>
@@ -217,7 +229,9 @@ exports[`direction up 1`] = `
   <div style="bottom: 0px; display: none;"
        class="van-dropdown-item van-dropdown-item--up"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
     </transition-stub>
     <transition-stub>
     </transition-stub>
@@ -225,7 +239,9 @@ exports[`direction up 1`] = `
   <div style="bottom: 0px; display: none;"
        class="van-dropdown-item van-dropdown-item--up"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
     </transition-stub>
     <transition-stub>
     </transition-stub>
@@ -262,7 +278,9 @@ exports[`direction up 2`] = `
   <div style="bottom: 768px;"
        class="van-dropdown-item van-dropdown-item--up"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
       <div style="z-index: 2006; position: absolute; animation-duration: 0.2s;"
            class="van-overlay"
       >
@@ -270,8 +288,9 @@ exports[`direction up 2`] = `
     </transition-stub>
     <transition-stub>
       <div style="z-index: 2006; transition-duration: 0.2s;"
-           class="van-popup van-popup--bottom van-dropdown-item__content"
            role="menu"
+           tabindex="0"
+           class="van-popup van-popup--bottom van-dropdown-item__content"
            aria-labelledby="van-dropdown-menu-0"
       >
         <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
@@ -306,7 +325,9 @@ exports[`direction up 2`] = `
   <div style="bottom: 768px; display: none;"
        class="van-dropdown-item van-dropdown-item--up"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
     </transition-stub>
     <transition-stub>
     </transition-stub>
@@ -343,7 +364,9 @@ exports[`disable close-on-click-outside 1`] = `
   <div style="top: 100px;"
        class="van-dropdown-item van-dropdown-item--down"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
       <div style="z-index: 2005; position: absolute; animation-duration: 0.2s;"
            class="van-overlay"
       >
@@ -351,8 +374,9 @@ exports[`disable close-on-click-outside 1`] = `
     </transition-stub>
     <transition-stub>
       <div style="z-index: 2005; transition-duration: 0.2s;"
-           class="van-popup van-popup--top van-dropdown-item__content"
            role="menu"
+           tabindex="0"
+           class="van-popup van-popup--top van-dropdown-item__content"
            aria-labelledby="van-dropdown-menu-0"
       >
         <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
@@ -387,7 +411,9 @@ exports[`disable close-on-click-outside 1`] = `
   <div style="top: 100px; display: none;"
        class="van-dropdown-item van-dropdown-item--down"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
     </transition-stub>
     <transition-stub>
     </transition-stub>
@@ -412,7 +438,9 @@ exports[`disable dropdown item 1`] = `
   <div style="top: 0px; display: none;"
        class="van-dropdown-item van-dropdown-item--down"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
     </transition-stub>
     <transition-stub>
     </transition-stub>
@@ -449,7 +477,9 @@ exports[`render option icon 1`] = `
   <div style="top: 100px;"
        class="van-dropdown-item van-dropdown-item--down"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
       <div style="z-index: 2003; position: absolute; animation-duration: 0.2s;"
            class="van-overlay"
       >
@@ -457,8 +487,9 @@ exports[`render option icon 1`] = `
     </transition-stub>
     <transition-stub>
       <div style="z-index: 2003; transition-duration: 0.2s;"
-           class="van-popup van-popup--top van-dropdown-item__content"
            role="menu"
+           tabindex="0"
+           class="van-popup van-popup--top van-dropdown-item__content"
            aria-labelledby="van-dropdown-menu-0"
       >
         <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
@@ -497,7 +528,9 @@ exports[`render option icon 1`] = `
   <div style="top: 100px; display: none;"
        class="van-dropdown-item van-dropdown-item--down"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
     </transition-stub>
     <transition-stub>
     </transition-stub>
@@ -534,7 +567,9 @@ exports[`show dropdown item 1`] = `
   <div style="top: 100px;"
        class="van-dropdown-item van-dropdown-item--down"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
       <div style="z-index: 2001; position: absolute; animation-duration: 0.2s;"
            class="van-overlay"
       >
@@ -542,8 +577,9 @@ exports[`show dropdown item 1`] = `
     </transition-stub>
     <transition-stub>
       <div style="z-index: 2001; transition-duration: 0.2s;"
-           class="van-popup van-popup--top van-dropdown-item__content"
            role="menu"
+           tabindex="0"
+           class="van-popup van-popup--top van-dropdown-item__content"
            aria-labelledby="van-dropdown-menu-0"
       >
         <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
@@ -578,7 +614,9 @@ exports[`show dropdown item 1`] = `
   <div style="top: 100px; display: none;"
        class="van-dropdown-item van-dropdown-item--down"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
     </transition-stub>
     <transition-stub>
     </transition-stub>
@@ -615,7 +653,9 @@ exports[`show dropdown item 2`] = `
   <div style="top: 100px;"
        class="van-dropdown-item van-dropdown-item--down"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
       <div style="z-index: 2001; position: absolute; animation-duration: 0s; display: none;"
            class="van-overlay"
       >
@@ -623,8 +663,9 @@ exports[`show dropdown item 2`] = `
     </transition-stub>
     <transition-stub>
       <div style="z-index: 2001; transition-duration: 0s; display: none;"
-           class="van-popup van-popup--top van-dropdown-item__content"
            role="menu"
+           tabindex="0"
+           class="van-popup van-popup--top van-dropdown-item__content"
            aria-labelledby="van-dropdown-menu-0"
       >
         <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
@@ -659,7 +700,9 @@ exports[`show dropdown item 2`] = `
   <div style="top: 100px;"
        class="van-dropdown-item van-dropdown-item--down"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
       <div style="z-index: 2002; position: absolute; animation-duration: 0.2s;"
            class="van-overlay"
       >
@@ -667,8 +710,9 @@ exports[`show dropdown item 2`] = `
     </transition-stub>
     <transition-stub>
       <div style="z-index: 2002; transition-duration: 0.2s;"
-           class="van-popup van-popup--top van-dropdown-item__content"
            role="menu"
+           tabindex="0"
+           class="van-popup van-popup--top van-dropdown-item__content"
            aria-labelledby="van-dropdown-menu-1"
       >
         <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
@@ -732,7 +776,9 @@ exports[`show dropdown item 3`] = `
   <div style="top: 100px;"
        class="van-dropdown-item van-dropdown-item--down"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
       <div style="z-index: 2001; position: absolute; animation-duration: 0s; display: none;"
            class="van-overlay"
       >
@@ -740,8 +786,9 @@ exports[`show dropdown item 3`] = `
     </transition-stub>
     <transition-stub>
       <div style="z-index: 2001; transition-duration: 0s; display: none;"
-           class="van-popup van-popup--top van-dropdown-item__content"
            role="menu"
+           tabindex="0"
+           class="van-popup van-popup--top van-dropdown-item__content"
            aria-labelledby="van-dropdown-menu-0"
       >
         <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
@@ -776,7 +823,9 @@ exports[`show dropdown item 3`] = `
   <div style="top: 100px;"
        class="van-dropdown-item van-dropdown-item--down"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
       <div style="z-index: 2002; position: absolute; animation-duration: 0.2s; display: none;"
            class="van-overlay"
       >
@@ -784,8 +833,9 @@ exports[`show dropdown item 3`] = `
     </transition-stub>
     <transition-stub>
       <div style="z-index: 2002; transition-duration: 0.2s; display: none;"
-           class="van-popup van-popup--top van-dropdown-item__content"
            role="menu"
+           tabindex="0"
+           class="van-popup van-popup--top van-dropdown-item__content"
            aria-labelledby="van-dropdown-menu-1"
       >
         <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
@@ -849,7 +899,9 @@ exports[`title prop 1`] = `
   <div style="top: 0px; display: none;"
        class="van-dropdown-item van-dropdown-item--down"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
     </transition-stub>
     <transition-stub>
     </transition-stub>
@@ -857,7 +909,9 @@ exports[`title prop 1`] = `
   <div style="top: 0px; display: none;"
        class="van-dropdown-item van-dropdown-item--down"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
     </transition-stub>
     <transition-stub>
     </transition-stub>
@@ -883,7 +937,9 @@ exports[`title slot 1`] = `
   <div style="top: 0px; display: none;"
        class="van-dropdown-item van-dropdown-item--down"
   >
-    <transition-stub>
+    <transition-stub role="button"
+                     tabindex="0"
+    >
     </transition-stub>
     <transition-stub>
     </transition-stub>

packages/vant/src/image-preview/test/__snapshots__/index.spec.ts.snap

@@ -1,12 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`render image 1`] = `
-<transition-stub class="van-image-preview__overlay">
+<transition-stub class="van-image-preview__overlay"
+                 role="button"
+                 tabindex="0"
+>
   <div class="van-overlay">
   </div>
 </transition-stub>
 <transition-stub>
-  <div class="van-popup van-popup--center van-image-preview">
+  <div role="dialog"
+       tabindex="0"
+       class="van-popup van-popup--center van-image-preview"
+  >
     <div class="van-swipe van-image-preview__swipe">
       <div style="transition-duration: 300ms; transform: translateX(0px);"
            class="van-swipe__track"
@@ -41,12 +47,18 @@ exports[`should change close icon when using close-icon prop 1`] = `
 `;
 
 exports[`should render cover slot correctly 1`] = `
-<transition-stub class="van-image-preview__overlay">
+<transition-stub class="van-image-preview__overlay"
+                 role="button"
+                 tabindex="0"
+>
   <div class="van-overlay">
   </div>
 </transition-stub>
 <transition-stub>
-  <div class="van-popup van-popup--center van-image-preview">
+  <div role="dialog"
+       tabindex="0"
+       class="van-popup van-popup--center van-image-preview"
+  >
     <div class="van-swipe van-image-preview__swipe">
       <div style="transition-duration: 300ms; transform: translateX(0px);"
            class="van-swipe__track"

packages/vant/src/notify/test/__snapshots__/index.spec.ts.snap

@@ -3,7 +3,9 @@
 exports[`should render Notify correctly 1`] = `
 <div
   class="van-popup van-popup--top van-notify van-notify--danger van-popup-slide-top-enter-from van-popup-slide-top-enter-active"
+  role="dialog"
   style="z-index: 2001; transition-duration: 0.2s;"
+  tabindex="0"
 >
   
   test

packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap

@@ -109,7 +109,9 @@ exports[`should render demo and match snapshot 1`] = `
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
   </div>
-  <transition-stub>
+  <transition-stub role="button"
+                   tabindex="0"
+  >
   </transition-stub>
   <transition-stub>
   </transition-stub>

packages/vant/src/popover/test/__snapshots__/index.spec.tsx.snap

@@ -15,7 +15,10 @@ exports[`should change icon class prefix when using icon-prefix prop 1`] = `
 <span class="van-popover__wrapper">
 </span>
 <transition-stub>
-  <div class="van-popup van-popover van-popover--light">
+  <div role="dialog"
+       tabindex="0"
+       class="van-popup van-popover van-popover--light"
+  >
     <div class="van-popover__arrow">
     </div>
     <div role="menu"
@@ -44,6 +47,8 @@ exports[`should locate to reference element when showed 1`] = `
 exports[`should locate to reference element when showed 2`] = `
 <transition-stub>
   <div style="z-index: 2007; position: absolute; left: 0px; top: 108px; margin: 0px;"
+       role="dialog"
+       tabindex="0"
        class="van-popup van-popover van-popover--light"
        data-popper-placement="bottom"
   >
@@ -60,6 +65,8 @@ exports[`should locate to reference element when showed 2`] = `
 exports[`should locate to reference element when showed 3`] = `
 <transition-stub>
   <div style="z-index: 2007; display: none;"
+       role="dialog"
+       tabindex="0"
        class="van-popup van-popover van-popover--light"
   >
     <div class="van-popover__arrow">
@@ -84,6 +91,8 @@ exports[`should render action slot correctly 1`] = `
 exports[`should watch placement prop and update location 1`] = `
 <transition-stub>
   <div style="z-index: 2008; position: absolute; left: 0px; top: -108px; margin: 0px;"
+       role="dialog"
+       tabindex="0"
        class="van-popup van-popover van-popover--light"
        data-popper-placement="top"
   >

packages/vant/src/popup/Popup.tsx

@@ -144,6 +144,8 @@ export default defineComponent({
             zIndex={zIndex.value}
             duration={props.duration}
             customStyle={props.overlayStyle}
+            role={props.closeOnClickOverlay ? 'button' : undefined}
+            tabindex={props.closeOnClickOverlay ? 0 : undefined}
             onClick={onClickOverlay}
           />
         );
@@ -185,6 +187,8 @@ export default defineComponent({
           v-show={props.show}
           ref={popupRef}
           style={style.value}
+          role="dialog"
+          tabindex={0}
           class={[
             bem({
               round,

packages/vant/src/popup/test/__snapshots__/demo.spec.ts.snap

@@ -14,7 +14,9 @@ exports[`should render demo and match snapshot 1`] = `
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
   </div>
-  <transition-stub>
+  <transition-stub role="button"
+                   tabindex="0"
+  >
   </transition-stub>
   <transition-stub>
   </transition-stub>
@@ -68,19 +70,27 @@ exports[`should render demo and match snapshot 1`] = `
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
   </div>
-  <transition-stub>
+  <transition-stub role="button"
+                   tabindex="0"
+  >
   </transition-stub>
   <transition-stub>
   </transition-stub>
-  <transition-stub>
+  <transition-stub role="button"
+                   tabindex="0"
+  >
   </transition-stub>
   <transition-stub>
   </transition-stub>
-  <transition-stub>
+  <transition-stub role="button"
+                   tabindex="0"
+  >
   </transition-stub>
   <transition-stub>
   </transition-stub>
-  <transition-stub>
+  <transition-stub role="button"
+                   tabindex="0"
+  >
   </transition-stub>
   <transition-stub>
   </transition-stub>
@@ -122,15 +132,21 @@ exports[`should render demo and match snapshot 1`] = `
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
   </div>
-  <transition-stub>
+  <transition-stub role="button"
+                   tabindex="0"
+  >
   </transition-stub>
   <transition-stub>
   </transition-stub>
-  <transition-stub>
+  <transition-stub role="button"
+                   tabindex="0"
+  >
   </transition-stub>
   <transition-stub>
   </transition-stub>
-  <transition-stub>
+  <transition-stub role="button"
+                   tabindex="0"
+  >
   </transition-stub>
   <transition-stub>
   </transition-stub>
@@ -148,7 +164,9 @@ exports[`should render demo and match snapshot 1`] = `
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
   </div>
-  <transition-stub>
+  <transition-stub role="button"
+                   tabindex="0"
+  >
   </transition-stub>
   <transition-stub>
   </transition-stub>

packages/vant/src/popup/test/__snapshots__/index.spec.jsx.snap

@@ -1,12 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should change icon class prefix when using icon-prefix prop 1`] = `
-<transition-stub>
+<transition-stub role="button"
+                 tabindex="0"
+>
   <div class="van-overlay">
   </div>
 </transition-stub>
 <transition-stub>
-  <div class="van-popup van-popup--center">
+  <div role="dialog"
+       tabindex="0"
+       class="van-popup van-popup--center"
+  >
     <i class="van-badge__wrapper my-icon my-icon-cross van-popup__close-icon van-popup__close-icon--top-right van-haptics-feedback"
        role="button"
        tabindex="0"
@@ -25,13 +30,18 @@ exports[`should render correct close icon when using close-icon prop 1`] = `
 `;
 
 exports[`should render overlay-content slot correctly 1`] = `
-<transition-stub>
+<transition-stub role="button"
+                 tabindex="0"
+>
   <div class="van-overlay">
     Custom Overlay Content
   </div>
 </transition-stub>
 <transition-stub>
-  <div class="van-popup van-popup--center">
+  <div role="dialog"
+       tabindex="0"
+       class="van-popup van-popup--center"
+  >
   </div>
 </transition-stub>
 `;

packages/vant/src/share-sheet/test/__snapshots__/demo.spec.ts.snap

@@ -14,7 +14,9 @@ exports[`should render demo and match snapshot 1`] = `
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
   </div>
-  <transition-stub>
+  <transition-stub role="button"
+                   tabindex="0"
+  >
   </transition-stub>
   <transition-stub>
   </transition-stub>
@@ -32,7 +34,9 @@ exports[`should render demo and match snapshot 1`] = `
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
   </div>
-  <transition-stub>
+  <transition-stub role="button"
+                   tabindex="0"
+  >
   </transition-stub>
   <transition-stub>
   </transition-stub>
@@ -50,7 +54,9 @@ exports[`should render demo and match snapshot 1`] = `
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
   </div>
-  <transition-stub>
+  <transition-stub role="button"
+                   tabindex="0"
+  >
   </transition-stub>
   <transition-stub>
   </transition-stub>
@@ -68,7 +74,9 @@ exports[`should render demo and match snapshot 1`] = `
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
   </div>
-  <transition-stub>
+  <transition-stub role="button"
+                   tabindex="0"
+  >
   </transition-stub>
   <transition-stub>
   </transition-stub>

packages/vant/src/share-sheet/test/__snapshots__/index.spec.ts.snap

@@ -23,12 +23,17 @@ exports[`should render description when using description prop 1`] = `
 `;
 
 exports[`should render title and description slot correctly 1`] = `
-<transition-stub>
+<transition-stub role="button"
+                 tabindex="0"
+>
   <div class="van-overlay">
   </div>
 </transition-stub>
 <transition-stub>
-  <div class="van-popup van-popup--round van-popup--bottom van-safe-area-bottom van-share-sheet">
+  <div role="dialog"
+       tabindex="0"
+       class="van-popup van-popup--round van-popup--bottom van-safe-area-bottom van-share-sheet"
+  >
     <div class="van-share-sheet__header">
       <h2 class="van-share-sheet__title">
         Custom Title

packages/vant/src/space/README.md

@@ -0,0 +1,130 @@
+# Space
+
+### Intro
+
+Set the spacing between elements, requires `vant >= v3.6.0`.
+
+### 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 { Space } from 'vant';
+
+const app = createApp();
+app.use(Space);
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<van-space>
+  <van-button type="primary">Button</van-button>
+  <van-button type="primary">Button</van-button>
+  <van-button type="primary">Button</van-button>
+  <van-button type="primary">Button</van-button>
+</van-space>
+```
+
+### Vertical
+
+```html
+<van-space direction="vertical" fill>
+  <van-button type="primary" block>Button</van-button>
+  <van-button type="primary" block>Button</van-button>
+  <van-button type="primary" block>Button</van-button>
+</van-space>
+```
+
+### Custom Size
+
+```html
+<!-- 20px -->
+<van-space :size="20">
+  <van-button type="primary">Button</van-button>
+  <van-button type="primary">Button</van-button>
+  <van-button type="primary">Button</van-button>
+</van-space>
+
+<!-- 2rem -->
+<van-space size="2rem">
+  <van-button type="primary">Button</van-button>
+  <van-button type="primary">Button</van-button>
+  <van-button type="primary">Button</van-button>
+</van-space>
+```
+
+### Alignment
+
+```html
+<van-radio-group
+  v-model="align"
+  direction="horizontal"
+  style="margin-bottom: 16px"
+>
+  <van-radio name="start">start</van-radio>
+  <van-radio name="center">center</van-radio>
+  <van-radio name="end">end</van-radio>
+  <van-radio name="baseline">baseline</van-radio>
+</van-radio-group>
+
+<van-space :align="align" style="padding: 16px; background: #f3f2f5">
+  <van-button type="primary">{{ align }}</van-button>
+  <div style="padding: 40px 20px; background: #fff">Block</div>
+</van-space>
+```
+
+```js
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const align = ref('center');
+    return { align };
+  },
+};
+```
+
+### Auto Wrap
+
+```html
+<van-space wrap>
+  <van-button type="primary" block>Button</van-button>
+  <van-button type="primary" block>Button</van-button>
+  <van-button type="primary" block>Button</van-button>
+  <van-button type="primary" block>Button</van-button>
+  <van-button type="primary" block>Button</van-button>
+  <van-button type="primary" block>Button</van-button>
+  <van-button type="primary" block>Button</van-button>
+  <van-button type="primary" block>Button</van-button>
+</van-space>
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| direction | Spacing direction | _vertical \| horizontal_ | `horizontal` |
+| size | Spacing size, such as `20px` `2em`. The default unit is px, supports using array to set horizontal and vertical spacing | _number \| string \| number[] \| string[]_ | `8px` |
+| align | Spacing alignment | _start \| end \| center \| baseline_ | - |
+| wrap | Whether to wrap automatically, only for horizontal alignment | _boolean_ | `false` |
+| fill | Whether to render Space as a block element and fill the parent element | _boolean_ | `false` |
+
+### Slots
+
+| Name    | Description  |
+| ------- | ------------ |
+| default | Default slot |
+
+### Types
+
+The component exports the following type definitions:
+
+```ts
+import type { SpaceProps, SpaceSize, SpaceAlign } from 'vant';
+```

packages/vant/src/space/README.zh-CN.md

@@ -0,0 +1,140 @@
+# Space 间距
+
+### 介绍
+
+设置元素之间的间距，从 `v3.6.0` 版本开始支持。
+
+### 引入
+
+通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。
+
+```js
+import { createApp } from 'vue';
+import { Space } from 'vant';
+
+const app = createApp();
+app.use(Space);
+```
+
+## 代码演示
+
+### 基础用法
+
+Space 组件会在各个子组件之间设置一定的间距，默认间距为 `8px`。
+
+```html
+<van-space>
+  <van-button type="primary">按钮</van-button>
+  <van-button type="primary">按钮</van-button>
+  <van-button type="primary">按钮</van-button>
+  <van-button type="primary">按钮</van-button>
+</van-space>
+```
+
+### 垂直排列
+
+将 `direction` 属性设置为 `vertical`，可以设置垂直方向排列的间距。
+
+```html
+<van-space direction="vertical" fill>
+  <van-button type="primary" block>按钮</van-button>
+  <van-button type="primary" block>按钮</van-button>
+  <van-button type="primary" block>按钮</van-button>
+</van-space>
+```
+
+### 自定义间距
+
+通过调整 `size` 的值来控制间距的大小。传入 `number` 类型时，会默认使用 `px` 单位；也可以传入 `string` 类型，比如 `2rem` 或 `5vw` 等带有单位的值。
+
+```html
+<!-- 20px -->
+<van-space :size="20">
+  <van-button type="primary">按钮</van-button>
+  <van-button type="primary">按钮</van-button>
+  <van-button type="primary">按钮</van-button>
+</van-space>
+
+<!-- 2rem -->
+<van-space size="2rem">
+  <van-button type="primary">按钮</van-button>
+  <van-button type="primary">按钮</van-button>
+  <van-button type="primary">按钮</van-button>
+</van-space>
+```
+
+### 对齐方式
+
+通过调整 `align` 的值来设置子元素的对齐方式, 可选值为 `start`, `center` ,`end` ,`baseline`，在水平模式下的默认值为 `center`。
+
+```html
+<van-radio-group
+  v-model="align"
+  direction="horizontal"
+  style="margin-bottom: 16px"
+>
+  <van-radio name="start">start</van-radio>
+  <van-radio name="center">center</van-radio>
+  <van-radio name="end">end</van-radio>
+  <van-radio name="baseline">baseline</van-radio>
+</van-radio-group>
+
+<van-space :align="align" style="padding: 16px; background: #f3f2f5">
+  <van-button type="primary">{{ align }}</van-button>
+  <div style="padding: 40px 20px; background: #fff">Block</div>
+</van-space>
+```
+
+```js
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const align = ref('center');
+    return { align };
+  },
+};
+```
+
+### 自动换行
+
+在水平模式下, 通过 `wrap` 属性来控制子元素是否自动换行。
+
+```html
+<van-space wrap>
+  <van-button type="primary" block>按钮</van-button>
+  <van-button type="primary" block>按钮</van-button>
+  <van-button type="primary" block>按钮</van-button>
+  <van-button type="primary" block>按钮</van-button>
+  <van-button type="primary" block>按钮</van-button>
+  <van-button type="primary" block>按钮</van-button>
+  <van-button type="primary" block>按钮</van-button>
+  <van-button type="primary" block>按钮</van-button>
+</van-space>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| direction | 间距方向 | _vertical \| horizontal_ | `horizontal` |
+| size | 间距大小，如 `20px` `2em`，默认单位为 `px`，支持数组形式来分别设置横向和纵向间距 | _number \| string \| number[] \| string[]_ | `8px` |
+| align | 设置子元素的对齐方式 | _start \| end \| center \| baseline_ | - |
+| wrap | 是否自动换行，仅适用于水平方向排列 | _boolean_ | `false` |
+| fill | 是否让 Space 变为一个块级元素，填充整个父元素 | _boolean_ | `false` |
+
+### Slots
+
+| 名称    | 说明         |
+| ------- | ------------ |
+| default | 间距组件内容 |
+
+### 类型定义
+
+组件导出以下类型定义：
+
+```js
+import type { SpaceProps, SpaceSize, SpaceAlign } from 'vant';
+```

packages/vant/src/space/Space.tsx

@@ -0,0 +1,121 @@
+import {
+  computed,
+  CSSProperties,
+  defineComponent,
+  ExtractPropTypes,
+  Fragment,
+  PropType,
+  type VNode,
+} from 'vue';
+import { createNamespace } from '../utils';
+
+const [name, bem] = createNamespace('space');
+
+export type SpaceSize = number | string;
+export type SpaceAlign = 'start' | 'end' | 'center' | 'baseline';
+
+const spaceProps = {
+  align: String as PropType<SpaceAlign>,
+  direction: {
+    type: String as PropType<'vertical' | 'horizontal'>,
+    default: 'horizontal',
+  },
+  size: {
+    type: [Number, String, Array] as PropType<
+      number | string | [SpaceSize, SpaceSize]
+    >,
+    default: 8,
+  },
+  wrap: Boolean,
+  fill: Boolean,
+};
+
+export type SpaceProps = ExtractPropTypes<typeof spaceProps>;
+
+function filterEmpty(children: VNode[] = []) {
+  const nodes: VNode[] = [];
+  children.forEach((child) => {
+    if (Array.isArray(child)) {
+      nodes.push(...child);
+    } else if (child.type === Fragment) {
+      nodes.push(...filterEmpty(child.children as VNode[]));
+    } else {
+      nodes.push(child);
+    }
+  });
+  return nodes.filter(
+    (c) =>
+      !(
+        c &&
+        ((typeof Comment !== 'undefined' && c.type === Comment) ||
+          (c.type === Fragment && c.children?.length === 0) ||
+          (c.type === Text && (c.children as string).trim() === ''))
+      )
+  );
+}
+
+export default defineComponent({
+  name,
+  props: spaceProps,
+  setup(props, { slots }) {
+    const mergedAlign = computed(
+      () => props.align ?? (props.direction === 'horizontal' ? 'center' : '')
+    );
+
+    const getMargin = (size: SpaceSize) => {
+      if (typeof size === 'number') {
+        return size + 'px';
+      }
+      return size;
+    };
+    const getMarginStyle = (isLast: boolean): CSSProperties => {
+      const style: CSSProperties = {};
+
+      const marginRight = `${getMargin(
+        Array.isArray(props.size) ? props.size[0] : props.size
+      )}`;
+      const marginBottom = `${getMargin(
+        Array.isArray(props.size) ? props.size[1] : props.size
+      )}`;
+
+      if (isLast) {
+        return props.wrap ? { marginBottom } : {};
+      }
+
+      if (props.direction === 'horizontal') {
+        style.marginRight = marginRight;
+      }
+      if (props.direction === 'vertical' || props.wrap) {
+        style.marginBottom = marginBottom;
+      }
+
+      return style;
+    };
+
+    return () => {
+      const children = filterEmpty(slots.default?.());
+      return (
+        <div
+          class={[
+            bem({
+              [props.direction]: props.direction,
+              [`align-${mergedAlign.value}`]: mergedAlign.value,
+              wrap: props.wrap,
+              fill: props.fill,
+            }),
+          ]}
+        >
+          {children.map((c, i) => (
+            <div
+              key={`item-${i}`}
+              class={`${name}-item`}
+              style={getMarginStyle(i === children.length - 1)}
+            >
+              {c}
+            </div>
+          ))}
+        </div>
+      );
+    };
+  },
+});

packages/vant/src/space/demo/index.vue

@@ -0,0 +1,102 @@
+<script setup>
+import VanSpace from '..';
+import VanButton from '../../button';
+import VanRadio from '../../radio';
+import VanRadioGroup from '../../radio-group';
+import { ref } from 'vue';
+import { useTranslate } from '../../../docs/site';
+
+const t = useTranslate({
+  'zh-CN': {
+    vertical: '垂直排列',
+    customSize: '自定义间距',
+    align: '对齐方式',
+    wrap: '自动换行',
+  },
+  'en-US': {
+    vertical: 'Vertical',
+    customSize: 'Custom Size',
+    align: 'Alignment',
+    wrap: 'Auto Wrap',
+  },
+});
+
+const align = ref('center');
+</script>
+
+<template>
+  <demo-block :title="t('basicUsage')">
+    <van-space>
+      <van-button type="primary">{{ t('button') }}</van-button>
+      <van-button type="primary">{{ t('button') }}</van-button>
+      <van-button type="primary">{{ t('button') }}</van-button>
+      <van-button type="primary">{{ t('button') }}</van-button>
+    </van-space>
+  </demo-block>
+
+  <demo-block :title="t('vertical')">
+    <van-space direction="vertical" fill>
+      <van-button type="primary" block>{{ t('button') }}</van-button>
+      <van-button type="primary" block>{{ t('button') }}</van-button>
+      <van-button type="primary" block>{{ t('button') }}</van-button>
+    </van-space>
+  </demo-block>
+
+  <demo-block :title="t('customSize')">
+    <van-space :size="20" style="margin-bottom: 16px">
+      <van-button type="primary">{{ t('button') }}</van-button>
+      <van-button type="primary">{{ t('button') }}</van-button>
+      <van-button type="primary">{{ t('button') }}</van-button>
+    </van-space>
+
+    <van-space size="3rem">
+      <van-button type="primary">{{ t('button') }}</van-button>
+      <van-button type="primary">{{ t('button') }}</van-button>
+      <van-button type="primary">{{ t('button') }}</van-button>
+    </van-space>
+  </demo-block>
+
+  <demo-block :title="t('align')">
+    <van-radio-group
+      v-model="align"
+      direction="horizontal"
+      style="margin-bottom: 16px"
+    >
+      <van-radio name="start">start</van-radio>
+      <van-radio name="center">center</van-radio>
+      <van-radio name="end">end</van-radio>
+      <van-radio name="baseline">baseline</van-radio>
+    </van-radio-group>
+    <van-space :align="align" style="padding: 16px; background: #f3f2f5">
+      <van-button type="primary">{{ align }}</van-button>
+      <div style="padding: 40px 20px; background: #fff">Block</div>
+    </van-space>
+  </demo-block>
+
+  <demo-block :title="t('wrap')">
+    <van-space wrap>
+      <van-button type="primary" block>{{ t('button') }}</van-button>
+      <van-button type="primary" block>{{ t('button') }}</van-button>
+      <van-button type="primary" block>{{ t('button') }}</van-button>
+      <van-button type="primary" block>{{ t('button') }}</van-button>
+      <van-button type="primary" block>{{ t('button') }}</van-button>
+      <van-button type="primary" block>{{ t('button') }}</van-button>
+      <van-button type="primary" block>{{ t('button') }}</van-button>
+      <van-button type="primary" block>{{ t('button') }}</van-button>
+    </van-space>
+  </demo-block>
+</template>
+
+<style lang="less">
+.demo-space {
+  background: var(--van-background-color-light);
+
+  .van-doc-demo-block {
+    padding: 0 var(--van-padding-md);
+  }
+
+  .van-doc-demo-block__title {
+    padding-left: 0;
+  }
+}
+</style>

packages/vant/src/space/index.less

@@ -0,0 +1,38 @@
+.van-space {
+  display: inline-flex;
+
+  &--horizontal {
+    .van-space-item {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &--vertical {
+    flex-direction: column;
+  }
+
+  &--align-baseline {
+    align-items: baseline;
+  }
+
+  &--align-start {
+    align-items: flex-start;
+  }
+
+  &--align-end {
+    align-items: flex-end;
+  }
+
+  &--align-center {
+    align-items: center;
+  }
+
+  &--wrap {
+    flex-wrap: wrap;
+  }
+
+  &--fill {
+    display: flex;
+  }
+}

packages/vant/src/space/index.ts

@@ -0,0 +1,12 @@
+import { withInstall } from '../utils';
+import _Space from './Space';
+
+export const Space = withInstall(_Space);
+export default Space;
+export type { SpaceProps, SpaceSize, SpaceAlign } from './Space';
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VanSpace: typeof Space;
+  }
+}

packages/vant/src/space/test/__snapshots__/demo.spec.ts.snap

@@ -0,0 +1,370 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-space van-space--horizontal van-space--align-center">
+    <div class="van-space-item"
+         style="margin-right: 8px;"
+    >
+      <button type="button"
+              class="van-button van-button--primary van-button--normal"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+    <div class="van-space-item"
+         style="margin-right: 8px;"
+    >
+      <button type="button"
+              class="van-button van-button--primary van-button--normal"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+    <div class="van-space-item"
+         style="margin-right: 8px;"
+    >
+      <button type="button"
+              class="van-button van-button--primary van-button--normal"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+    <div class="van-space-item">
+      <button type="button"
+              class="van-button van-button--primary van-button--normal"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-space van-space--vertical van-space--fill">
+    <div class="van-space-item"
+         style="margin-bottom: 8px;"
+    >
+      <button type="button"
+              class="van-button van-button--primary van-button--normal van-button--block"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+    <div class="van-space-item"
+         style="margin-bottom: 8px;"
+    >
+      <button type="button"
+              class="van-button van-button--primary van-button--normal van-button--block"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+    <div class="van-space-item">
+      <button type="button"
+              class="van-button van-button--primary van-button--normal van-button--block"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-space van-space--horizontal van-space--align-center"
+       style="margin-bottom: 16px;"
+  >
+    <div class="van-space-item"
+         style="margin-right: 20px;"
+    >
+      <button type="button"
+              class="van-button van-button--primary van-button--normal"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+    <div class="van-space-item"
+         style="margin-right: 20px;"
+    >
+      <button type="button"
+              class="van-button van-button--primary van-button--normal"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+    <div class="van-space-item">
+      <button type="button"
+              class="van-button van-button--primary van-button--normal"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+  </div>
+  <div class="van-space van-space--horizontal van-space--align-center">
+    <div class="van-space-item"
+         style="margin-right: 3rem;"
+    >
+      <button type="button"
+              class="van-button van-button--primary van-button--normal"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+    <div class="van-space-item"
+         style="margin-right: 3rem;"
+    >
+      <button type="button"
+              class="van-button van-button--primary van-button--normal"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+    <div class="van-space-item">
+      <button type="button"
+              class="van-button van-button--primary van-button--normal"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-radio-group van-radio-group--horizontal"
+       role="radiogroup"
+       style="margin-bottom: 16px;"
+  >
+    <div role="radio"
+         class="van-radio van-radio--horizontal"
+         tabindex="0"
+         aria-checked="false"
+    >
+      <div class="van-radio__icon van-radio__icon--round">
+        <i class="van-badge__wrapper van-icon van-icon-success">
+        </i>
+      </div>
+      <span class="van-radio__label">
+        start
+      </span>
+    </div>
+    <div role="radio"
+         class="van-radio van-radio--horizontal"
+         tabindex="0"
+         aria-checked="true"
+    >
+      <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked">
+        <i class="van-badge__wrapper van-icon van-icon-success">
+        </i>
+      </div>
+      <span class="van-radio__label">
+        center
+      </span>
+    </div>
+    <div role="radio"
+         class="van-radio van-radio--horizontal"
+         tabindex="0"
+         aria-checked="false"
+    >
+      <div class="van-radio__icon van-radio__icon--round">
+        <i class="van-badge__wrapper van-icon van-icon-success">
+        </i>
+      </div>
+      <span class="van-radio__label">
+        end
+      </span>
+    </div>
+    <div role="radio"
+         class="van-radio van-radio--horizontal"
+         tabindex="0"
+         aria-checked="false"
+    >
+      <div class="van-radio__icon van-radio__icon--round">
+        <i class="van-badge__wrapper van-icon van-icon-success">
+        </i>
+      </div>
+      <span class="van-radio__label">
+        baseline
+      </span>
+    </div>
+  </div>
+  <div class="van-space van-space--horizontal van-space--align-center"
+       style="padding: 16px; background: rgb(243, 242, 245);"
+  >
+    <div class="van-space-item"
+         style="margin-right: 8px;"
+    >
+      <button type="button"
+              class="van-button van-button--primary van-button--normal"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            center
+          </span>
+        </div>
+      </button>
+    </div>
+    <div class="van-space-item">
+      <div style="padding: 40px 20px; background: rgb(255, 255, 255);">
+        Block
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-space van-space--horizontal van-space--align-center van-space--wrap">
+    <div class="van-space-item"
+         style="margin-right: 8px; margin-bottom: 8px;"
+    >
+      <button type="button"
+              class="van-button van-button--primary van-button--normal van-button--block"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+    <div class="van-space-item"
+         style="margin-right: 8px; margin-bottom: 8px;"
+    >
+      <button type="button"
+              class="van-button van-button--primary van-button--normal van-button--block"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+    <div class="van-space-item"
+         style="margin-right: 8px; margin-bottom: 8px;"
+    >
+      <button type="button"
+              class="van-button van-button--primary van-button--normal van-button--block"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+    <div class="van-space-item"
+         style="margin-right: 8px; margin-bottom: 8px;"
+    >
+      <button type="button"
+              class="van-button van-button--primary van-button--normal van-button--block"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+    <div class="van-space-item"
+         style="margin-right: 8px; margin-bottom: 8px;"
+    >
+      <button type="button"
+              class="van-button van-button--primary van-button--normal van-button--block"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+    <div class="van-space-item"
+         style="margin-right: 8px; margin-bottom: 8px;"
+    >
+      <button type="button"
+              class="van-button van-button--primary van-button--normal van-button--block"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+    <div class="van-space-item"
+         style="margin-right: 8px; margin-bottom: 8px;"
+    >
+      <button type="button"
+              class="van-button van-button--primary van-button--normal van-button--block"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+    <div class="van-space-item"
+         style="margin-bottom: 8px;"
+    >
+      <button type="button"
+              class="van-button van-button--primary van-button--normal van-button--block"
+      >
+        <div class="van-button__content">
+          <span class="van-button__text">
+            Button
+          </span>
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
+`;

packages/vant/src/space/test/demo.spec.ts

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

packages/vant/src/space/test/index.spec.tsx

@@ -0,0 +1,133 @@
+import { mount } from '../../../test';
+import { Space } from '..';
+import { Button } from '../../button';
+
+test('should render space', async () => {
+  const wrapper = mount({
+    render() {
+      return (
+        <Space>
+          <Button>按钮</Button>
+          <Button>按钮</Button>
+          <Button>按钮</Button>
+        </Space>
+      );
+    },
+  });
+  const items = wrapper.findAll('.van-space-item');
+  expect(items[0].style.marginRight).toBe('8px');
+  expect(items[1].style.marginRight).toBe('8px');
+  expect(items[2].style.marginRight).toBe('');
+});
+
+test('should render vertical', async () => {
+  const wrapper = mount({
+    render() {
+      return (
+        <Space direction="vertical" fill>
+          <Button type="primary" block>
+            按钮
+          </Button>
+          <Button type="primary" block>
+            按钮
+          </Button>
+          <Button type="primary" block>
+            按钮
+          </Button>
+        </Space>
+      );
+    },
+  });
+  const space = wrapper.find('.van-space');
+  const items = wrapper.findAll('.van-space-item');
+  expect(space.classes()).toContain('van-space--vertical');
+  expect(items[0].style.marginBottom).toBe('8px');
+  expect(items[1].style.marginBottom).toBe('8px');
+  expect(items[2].style.marginBottom).toBe('');
+});
+
+test('should render size 20px', async () => {
+  const wrapper = mount({
+    render() {
+      return (
+        <Space size="20px">
+          <Button type="primary" block>
+            按钮
+          </Button>
+          <Button type="primary" block>
+            按钮
+          </Button>
+          <Button type="primary" block>
+            按钮
+          </Button>
+        </Space>
+      );
+    },
+  });
+  const items = wrapper.findAll('.van-space-item');
+  expect(items[0].style.marginRight).toBe('20px');
+  expect(items[1].style.marginRight).toBe('20px');
+  expect(items[2].style.marginRight).toBe('');
+});
+
+test('should render align start', async () => {
+  const wrapper = mount({
+    render() {
+      return (
+        <Space align="start">
+          <Button type="primary" block>
+            按钮
+          </Button>
+          <Button type="primary" block>
+            按钮
+          </Button>
+          <Button type="primary" block>
+            按钮
+          </Button>
+        </Space>
+      );
+    },
+  });
+  const space = wrapper.find('.van-space');
+  expect(space.classes()).toContain('van-space--align-start');
+});
+
+test('should render wrap', async () => {
+  const wrapper = mount({
+    render() {
+      return (
+        <Space wrap>
+          <Button type="primary" block>
+            按钮
+          </Button>
+          <Button type="primary" block>
+            按钮
+          </Button>
+          <Button type="primary" block>
+            按钮
+          </Button>
+          <Button type="primary" block>
+            按钮
+          </Button>
+          <Button type="primary" block>
+            按钮
+          </Button>
+          <Button type="primary" block>
+            按钮
+          </Button>
+          <Button type="primary" block>
+            按钮
+          </Button>
+          <Button type="primary" block>
+            按钮
+          </Button>
+          <Button type="primary" block>
+            按钮
+          </Button>
+        </Space>
+      );
+    },
+  });
+  const space = wrapper.find('.van-space');
+  expect(space.classes()).toContain('van-space--wrap');
+});

packages/vant/src/toast/test/__snapshots__/index.spec.ts.snap

@@ -2,7 +2,9 @@
 
 exports[`create a forbidClick toast 1`] = `
 <transition-stub>
-  <div class="van-popup van-popup--center van-toast van-toast--middle van-toast--success"
+  <div role="dialog"
+       tabindex="0"
+       class="van-popup van-popup--center van-toast van-toast--middle van-toast--success"
        style="z-index: 2004;"
   >
     <i class="van-badge__wrapper van-icon van-icon-success van-toast__icon">

packages/vant/vant.config.mjs

@@ -132,6 +132,10 @@ export default {
                 path: 'popup',
                 title: 'Popup 弹出层',
               },
+              {
+                path: 'space',
+                title: 'Space 间距',
+              },
               {
                 path: 'style',
                 title: 'Style 内置样式',
@@ -465,7 +469,7 @@ export default {
       'en-US': {
         title: 'Vant 4',
         subtitle: ' (for Vue 3)',
-        description: 'Mobile UI Components built on Vue',
+        description: 'Lightweight Mobile UI Components built on Vue',
         logo: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
         langLabel: 'EN',
         links: [
@@ -535,6 +539,10 @@ export default {
                 path: 'popup',
                 title: 'Popup',
               },
+              {
+                path: 'space',
+                title: 'Space',
+              },
               {
                 path: 'style',
                 title: 'Built-in style',

pnpm-lock.yaml

@@ -94,7 +94,6 @@ importers:
       '@types/less': ^3.0.3
       '@types/markdown-it': ^12.2.3
       '@vant/eslint-config': ^3.3.2
-      '@vant/markdown-vetur': ^2.3.0
       '@vant/touch-emulator': ^1.3.2
       '@vitejs/plugin-vue': ^3.0.1
       '@vitejs/plugin-vue-jsx': ^2.0.0
@@ -140,7 +139,6 @@ importers:
       '@docsearch/js': 3.1.1_react-dom@18.2.0+react@18.2.0
       '@types/jest': 27.5.2
       '@vant/eslint-config': link:../vant-eslint-config
-      '@vant/markdown-vetur': link:../vant-markdown-vetur
       '@vant/touch-emulator': link:../vant-touch-emulator
       '@vitejs/plugin-vue': 3.0.1_vite@3.0.2+vue@3.2.37
       '@vitejs/plugin-vue-jsx': 2.0.0_vite@3.0.2+vue@3.2.37
@@ -230,19 +228,6 @@ importers:
     devDependencies:
       release-it: 15.1.1
 
-  packages/vant-markdown-vetur:
-    specifiers:
-      '@types/fs-extra': ^9.0.13
-      fast-glob: ^3.2.2
-      fs-extra: ^10.0.0
-      typescript: ^4.7.4
-    dependencies:
-      fast-glob: 3.2.11
-      fs-extra: 10.1.0
-    devDependencies:
-      '@types/fs-extra': 9.0.13
-      typescript: 4.7.4
-
   packages/vant-popperjs:
     specifiers:
       '@popperjs/core': ^2.9.2