feat: add @vant/compat package (#10806)

* feat: add @vant/compat package

* chore: remove prepare script

packages/vant-compat/LICENSE

@@ -0,0 +1,10 @@
+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-compat/README.md

@@ -0,0 +1,32 @@
+# @vant/compat
+
+This package provides Vant 3 compatible behavior for Vant 4 users.
+
+## Install
+
+```shell
+# with npm
+npm i @vant/compat
+
+# with yarn
+yarn add @vant/compat
+
+# with pnpm
+pnpm add @vant/compat
+```
+
+## Usage
+
+```js
+// Same as Toast in Vant 3
+import { Toast } from '@vant/compat';
+
+// Same as Dialog in Vant 3
+import { Dialog } from '@vant/compat';
+
+// Same as Notify in Vant 3
+import { Notify } from '@vant/compat';
+
+// Same as ImagePreview in Vant 3
+import { ImagePreview } from '@vant/compat';
+```

packages/vant-compat/build.js

@@ -0,0 +1 @@
+require('../vant-use/build');

packages/vant-compat/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@vant/compat",
+  "version": "1.0.0",
+  "description": "Provide Vant 3 compatible behavior for Vant 4",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.mjs",
+      "require": "./dist/index.cjs.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "dev": "node ./build.js -w",
+    "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
+    "build:bundle": "node ./build.js",
+    "build": "pnpm clean && pnpm build:bundle && pnpm build:types",
+    "release": "pnpm build && release-it"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/youzan/vant.git",
+    "directory": "packages/vant-compat"
+  },
+  "bugs": "https://github.com/youzan/vant/issues",
+  "author": "chenjiahan",
+  "license": "MIT",
+  "devDependencies": {
+    "@vue/runtime-core": "^3.2.27",
+    "vant": "workspace:*",
+    "vue": "^3.2.27",
+    "esbuild": "^0.14.29",
+    "release-it": "^15.1.1",
+    "typescript": "^4.7.4"
+  },
+  "release-it": {
+    "git": {
+      "tag": false,
+      "commitMessage": "release: @vant/compat ${version}"
+    }
+  }
+}

packages/vant-compat/src/dialog.ts

@@ -0,0 +1,30 @@
+import {
+  Dialog as VanDialog,
+  showDialog,
+  closeDialog,
+  showConfirmDialog,
+  setDialogDefaultOptions,
+  resetDialogDefaultOptions,
+} from 'vant';
+import type { App } from 'vue';
+
+export const Dialog = (...args: Parameters<typeof showDialog>) =>
+  showDialog(...args);
+
+Dialog.Component = VanDialog;
+Dialog.alert = Dialog;
+Dialog.config = showConfirmDialog;
+Dialog.close = closeDialog;
+Dialog.setDefaultOptions = setDialogDefaultOptions;
+Dialog.resetDefaultOptions = resetDialogDefaultOptions;
+
+Dialog.install = (app: App) => {
+  app.use(Dialog.Component);
+  app.config.globalProperties.$dialog = Dialog;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $dialog: typeof Dialog;
+  }
+}

packages/vant-compat/src/image-preview.ts

@@ -0,0 +1,11 @@
+import { ImagePreview as VanImagePreview, showImagePreview } from 'vant';
+import type { App } from 'vue';
+
+export const ImagePreview = (...args: Parameters<typeof showImagePreview>) =>
+  showImagePreview(...args);
+
+ImagePreview.Component = VanImagePreview;
+
+ImagePreview.install = (app: App) => {
+  app.use(ImagePreview.Component);
+};

packages/vant-compat/src/index.ts

@@ -0,0 +1,4 @@
+export * from './toast';
+export * from './notify';
+export * from './dialog';
+export * from './image-preview';

packages/vant-compat/src/notify.ts

@@ -0,0 +1,27 @@
+import {
+  Notify as VanNotify,
+  showNotify,
+  closeNotify,
+  setNotifyDefaultOptions,
+  resetNotifyDefaultOptions,
+} from 'vant';
+import type { App } from 'vue';
+
+export const Notify = (...args: Parameters<typeof showNotify>) =>
+  showNotify(...args);
+
+Notify.clear = closeNotify;
+Notify.Component = VanNotify;
+Notify.setDefaultOptions = setNotifyDefaultOptions;
+Notify.resetDefaultOptions = resetNotifyDefaultOptions;
+
+Notify.install = (app: App) => {
+  app.use(Notify.Component);
+  app.config.globalProperties.$notify = Notify;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $notify: typeof Notify;
+  }
+}

packages/vant-compat/src/toast.ts

@@ -0,0 +1,49 @@
+import {
+  showToast,
+  closeToast,
+  showFailToast,
+  showSuccessToast,
+  allowMultipleToast,
+  setToastDefaultOptions,
+  resetToastDefaultOptions,
+} from 'vant';
+import type { App } from 'vue';
+
+export const Toast = (...args: Parameters<typeof showToast>) => {
+  const toast = showToast(...args);
+  return {
+    clear: toast.close,
+    ...toast,
+  };
+};
+
+Toast.fail = (...args: Parameters<typeof showFailToast>) => {
+  const toast = showFailToast(...args);
+  return {
+    clear: toast.close,
+    ...toast,
+  };
+};
+
+Toast.success = (...args: Parameters<typeof showSuccessToast>) => {
+  const toast = showSuccessToast(...args);
+  return {
+    clear: toast.close,
+    ...toast,
+  };
+};
+
+Toast.clear = closeToast;
+Toast.allowMultiple = allowMultipleToast;
+Toast.setDefaultOptions = setToastDefaultOptions;
+Toast.resetDefaultOptions = resetToastDefaultOptions;
+
+Toast.install = (app: App) => {
+  app.config.globalProperties.$toast = Toast;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $toast: typeof Toast;
+  }
+}

packages/vant-compat/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "declaration": true
+  },
+  "include": ["src/**/*"]
+}

packages/vant-popperjs/package.json

@@ -31,7 +31,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/youzan/vant.git",
-    "directory": "packages/vant-markdown-loader"
+    "directory": "packages/vant-popperjs"
   },
   "bugs": "https://github.com/youzan/vant/issues",
   "author": "chenjiahan",

packages/vant-use/build.js

@@ -14,7 +14,7 @@ function bundleBundle(format) {
     outfile,
     // preserve Chinese character
     charset: 'utf8',
-    external: ['vue'],
+    external: ['vue', 'vant'],
     entryPoints: ['./src/index.ts'],
   }).then(finish);
 }

packages/vant/docs/markdown/migrate-from-v3.zh-CN.md

@@ -84,42 +84,60 @@ Dialog; // 组件对象
 Dialog(); // -> showDialog()
 Dialog.alert(); // -> showDialog()
 Dialog.confirm(); // -> showConfirmDialog()
-Dialog.close(); // -> hideDialog();
+Dialog.close(); // -> closeDialog();
 Dialog.setDefaultOptions(); // -> setDialogDefaultOptions()
 Dialog.resetDefaultOptions(); // -> resetDialogDefaultOptions()
 ```
 
-同时，Vant 4 将不再在 `this` 对象上全局注册 `$dialog` 方法，这意味着 `this` 对象上将无法访问到 `$dialog`。
+为了便于代码迁移，你可以使用 `@vant/compat` 中导出的 `Dialog` 对象：
 
 ```js
-export default {
-  mounted() {
-    // 无效代码
-    this.$dialog.alert({
-      message: '弹窗内容',
-    });
-  },
-};
+import { Dialog } from '@vant/compat';
+
+Dialog();
+Dialog.close();
 ```
 
-大多数场景下，推荐通过 `import` 引入对应的函数进行使用。
+`@vant/compat` 中导出的 `Dialog` 与 Vant 3 中的 `Dialog` 拥有完全一致的 API 和行为。
 
-如果需要全局方法，可以手动在 `app` 对象上注册：
+### Toast 调用方式调整
+
+Vant 4 中，`Toast` 组件的调用方式也进行了调整，与 `Dialog` 组件的改动一致：
 
 ```js
-import { showDialog } from 'vant';
+// Vant 3
+Toast(); // 函数调用
 
-// 注册 $dialog 方法
-app.config.globalProperties.$dialog = showDialog;
-
-// 添加 TS 类型定义
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    $dialog: typeof showDialog;
-  }
-}
+// Vant 4
+showToast(); // 函数调用
+Toast; // 组件对象
 ```
 
+`Toast` 上挂载的其他方法也进行了重命名，新旧 API 的映射关系如下：
+
+```js
+Toast(); // -> showToast()
+Toast.fail(); // -> showFailToast()
+Toast.success(); // -> showSuccessToast()
+Toast.loading(); // -> showLoadingToast()
+Toast.clear(); // -> closeToast()
+Toast.setDefaultOptions(); // -> setToastDefaultOptions()
+Toast.resetDefaultOptions(); // -> resetToastDefaultOptions()
+```
+
+同时，Vant 4 将不再在 `this` 对象上全局注册 `$toast` 方法，这意味着 `this` 对象上将无法访问到 `$toast`。
+
+为了便于代码迁移，你可以使用 `@vant/compat` 中导出的 `Toast` 对象：
+
+```js
+import { Toast } from '@vant/compat';
+
+Toast();
+Toast.clear();
+```
+
+`@vant/compat` 中导出的 `Toast` 与 Vant 3 中的 `Toast` 拥有完全一致的 API 和行为。
+
 ### Notify 调用方式调整
 
 Vant 4 中，`Notify` 组件的调用方式也进行了调整，与 `Dialog` 组件的改动一致：
@@ -138,40 +156,48 @@ Notify; // 组件对象
 
 ```js
 Notify(); // -> showNotify()
-Notify.clear(); // -> hideNotify()
+Notify.clear(); // -> closeNotify()
 Notify.setDefaultOptions(); // -> setNotifyDefaultOptions()
 Notify.resetDefaultOptions(); // -> resetNotifyDefaultOptions()
 ```
 
 同时，Vant 4 将不再在 `this` 对象上全局注册 `$notify` 方法，这意味着 `this` 对象上将无法访问到 `$notify`。
 
-```js
-export default {
-  mounted() {
-    // 无效代码
-    this.$notify({
-      message: '内容',
-    });
-  },
-};
-```
-
-如果需要全局方法，可以手动在 `app` 对象上注册：
+为了便于代码迁移，你可以使用 `@vant/compat` 中导出的 `Notify` 对象：
 
 ```js
-import { showNotify } from 'vant';
+import { Notify } from '@vant/compat';
 
-// 注册 $notify 方法
-app.config.globalProperties.$notify = showNotify;
-
-// 添加 TS 类型定义
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    $notify: typeof showNotify;
-  }
-}
+Notify();
+Notify.clear();
 ```
 
+`@vant/compat` 中导出的 `Notify` 与 Vant 3 中的 `Notify` 拥有完全一致的 API 和行为。
+
+### ImagePreview 调用方式调整
+
+Vant 4 中，`ImagePreview` 组件的调用方式也进行了调整，与 `ImagePreview` 组件的改动一致：
+
+```js
+// Vant 3
+ImagePreview(); // 函数调用
+ImagePreview.Component; // 组件对象
+
+// Vant 4
+showImagePreview(); // 函数调用
+ImagePreview; // 组件对象
+```
+
+为了便于代码迁移，你可以使用 `@vant/compat` 中导出的 `ImagePreview` 对象：
+
+```js
+import { ImagePreview } from '@vant/compat';
+
+ImagePreview();
+```
+
+`@vant/compat` 中导出的 `ImagePreview` 与 Vant 3 中的 `ImagePreview` 拥有完全一致的 API 和行为。
+
 ### 事件命名调整
 
 从 Vant 4 开始，所有的事件均采用 Vue 官方推荐的**驼峰格式**进行命名。

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

@@ -50,7 +50,7 @@ The easiest way to use Vant is to include a CDN link in the html file, after whi
   app.use(vant.Lazyload);
 
   // Call function component
-  vant.Toast('Message');
+  vant.showToast('Message');
 
   app.mount('#app');
 </script>
@@ -178,19 +178,19 @@ Some components of Vant are provided as function, including `Toast`, `Dialog`, `
 
 ```js
 // Toast
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 import 'vant/es/toast/style';
 
 // Dialog
-import { Dialog } from 'vant';
+import { showDialog } from 'vant';
 import 'vant/es/dialog/style';
 
 // Notify
-import { Notify } from 'vant';
+import { showNotify } from 'vant';
 import 'vant/es/notify/style';
 
 // ImagePreview
-import { ImagePreview } from 'vant';
+import { showImagePreview } from 'vant';
 import 'vant/es/image-preview/style';
 ```
 

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

@@ -54,8 +54,8 @@ pnpm add vant
   // 可以通过下面的方式手动注册
   app.use(vant.Lazyload);
 
-  // 调用函数组件，弹出一个 Toast
-  vant.Toast('提示');
+  // 调用工具函数，弹出一个 Toast
+  vant.showToast('提示');
 
   app.mount('#app');
 </script>
@@ -179,19 +179,19 @@ Vant 中有个别组件是以函数的形式提供的，包括 `Toast`，`Dialog
 
 ```js
 // Toast
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 import 'vant/es/toast/style';
 
 // Dialog
-import { Dialog } from 'vant';
+import { showDialog } from 'vant';
 import 'vant/es/dialog/style';
 
 // Notify
-import { Notify } from 'vant';
+import { showNotify } from 'vant';
 import 'vant/es/notify/style';
 
 // ImagePreview
-import { ImagePreview } from 'vant';
+import { showImagePreview } from 'vant';
 import 'vant/es/image-preview/style';
 ```
 

packages/vant/src/action-bar/README.md

@@ -32,12 +32,12 @@ app.use(ActionBarButton);
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
-    const onClickIcon = () => Toast('Click Icon');
-    const onClickButton = () => Toast('Click Button');
+    const onClickIcon = () => showToast('Click Icon');
+    const onClickButton = () => showToast('Click Button');
     return {
       onClickIcon,
       onClickButton,

packages/vant/src/action-bar/README.zh-CN.md

@@ -32,12 +32,12 @@ app.use(ActionBarButton);
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
-    const onClickIcon = () => Toast('点击图标');
-    const onClickButton = () => Toast('点击按钮');
+    const onClickIcon = () => showToast('点击图标');
+    const onClickButton = () => showToast('点击按钮');
     return {
       onClickIcon,
       onClickButton,

packages/vant/src/action-bar/demo/index.vue

@@ -3,7 +3,7 @@ import VanActionBar from '..';
 import VanActionBarIcon from '../../action-bar-icon';
 import VanActionBarButton from '../../action-bar-button';
 import { useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -33,8 +33,8 @@ const t = useTranslate({
     customButtonColor: 'Custom Button Color',
   },
 });
-const onClickIcon = () => Toast(t('clickIcon'));
-const onClickButton = () => Toast(t('clickButton'));
+const onClickIcon = () => showToast(t('clickIcon'));
+const onClickButton = () => showToast(t('clickButton'));
 </script>
 
 <template>

packages/vant/src/action-sheet/README.md

@@ -29,7 +29,7 @@ Use `actions` prop to set options of action-sheet.
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -41,7 +41,7 @@ export default {
     ];
     const onSelect = (item) => {
       show.value = false;
-      Toast(item.name);
+      showToast(item.name);
     };
 
     return {
@@ -67,7 +67,7 @@ export default {
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -77,7 +77,7 @@ export default {
       { name: 'Option 2' },
       { name: 'Option 3' },
     ];
-    const onCancel = () => Toast('cancel');
+    const onCancel = () => showToast('cancel');
 
     return {
       show,

packages/vant/src/action-sheet/README.zh-CN.md

@@ -29,7 +29,7 @@ app.use(ActionSheet);
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -43,7 +43,7 @@ export default {
       // 默认情况下点击选项时不会自动收起
       // 可以通过 close-on-click-action 属性开启自动收起
       show.value = false;
-      Toast(item.name);
+      showToast(item.name);
     };
 
     return {
@@ -71,7 +71,7 @@ export default {
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -81,7 +81,7 @@ export default {
       { name: '选项二' },
       { name: '选项三' },
     ];
-    const onCancel = () => Toast('取消');
+    const onCancel = () => showToast('取消');
 
     return {
       show,

packages/vant/src/action-sheet/demo/index.vue

@@ -3,7 +3,7 @@ import VanCell from '../../cell';
 import VanActionSheet, { ActionSheetAction } from '..';
 import { ref, computed } from 'vue';
 import { useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -61,10 +61,10 @@ const actionsWithDescription = computed<ActionSheetAction[]>(() => [
 
 const onSelect = (item: ActionSheetAction) => {
   showBasic.value = false;
-  Toast(item.name);
+  showToast(item.name);
 };
 
-const onCancel = () => Toast(t('cancel'));
+const onCancel = () => showToast(t('cancel'));
 </script>
 
 <template>

packages/vant/src/address-edit/AddressEdit.tsx

@@ -30,7 +30,7 @@ import { Cell } from '../cell';
 import { Form } from '../form';
 import { Field, FieldRule } from '../field';
 import { Popup } from '../popup';
-import { Toast } from '../toast';
+import { showToast } from '../toast';
 import { Button } from '../button';
 import { Switch } from '../switch';
 import AddressEditDetail from './AddressEditDetail';
@@ -183,7 +183,7 @@ export default defineComponent({
       selectedOptions,
     }: PickerConfirmEventParams) => {
       if (selectedValues.some((value) => value === AREA_EMPTY_CODE)) {
-        Toast(t('areaEmpty'));
+        showToast(t('areaEmpty'));
       } else {
         showAreaPopup.value = false;
         assignAreaText(selectedOptions as PickerOption[]);

packages/vant/src/address-edit/README.md

@@ -36,14 +36,14 @@ app.use(AddressEdit);
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const searchResult = ref([]);
 
-    const onSave = () => Toast('save');
-    const onDelete = () => Toast('delete');
+    const onSave = () => showToast('save');
+    const onDelete = () => showToast('delete');
     const onChangeDetail = (val) => {
       if (val) {
         searchResult.value = [

packages/vant/src/address-edit/README.zh-CN.md

@@ -36,14 +36,14 @@ app.use(AddressEdit);
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const searchResult = ref([]);
 
-    const onSave = () => Toast('save');
-    const onDelete = () => Toast('delete');
+    const onSave = () => showToast('save');
+    const onDelete = () => showToast('delete');
     const onChangeDetail = (val) => {
       if (val) {
         searchResult.value = [

packages/vant/src/address-edit/demo/index.vue

@@ -3,7 +3,7 @@ import VanAddressEdit from '..';
 import { ref } from 'vue';
 import { areaList } from '@vant/area-data';
 import { useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -41,8 +41,8 @@ const t = useTranslate({
 });
 const searchResult = ref([]);
 
-const onSave = () => Toast(t('save'));
-const onDelete = () => Toast(t('delete'));
+const onSave = () => showToast(t('save'));
+const onDelete = () => showToast(t('delete'));
 const onChangeDetail = (val: string) => {
   searchResult.value = val ? t('searchResult') : [];
 };

packages/vant/src/address-list/README.md

@@ -34,7 +34,7 @@ app.use(AddressList);
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -63,8 +63,8 @@ export default {
       },
     ];
 
-    const onAdd = () => Toast('Add');
-    const onEdit = (item, index) => Toast('Edit:' + index);
+    const onAdd = () => showToast('Add');
+    const onEdit = (item, index) => showToast('Edit:' + index);
 
     return {
       list,

packages/vant/src/address-list/README.zh-CN.md

@@ -34,7 +34,7 @@ app.use(AddressList);
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -63,8 +63,8 @@ export default {
       },
     ];
 
-    const onAdd = () => Toast('新增地址');
-    const onEdit = (item, index) => Toast('编辑地址:' + index);
+    const onAdd = () => showToast('新增地址');
+    const onEdit = (item, index) => showToast('编辑地址:' + index);
 
     return {
       list,

packages/vant/src/address-list/demo/index.vue

@@ -2,7 +2,7 @@
 import VanAddressList from '..';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -67,10 +67,10 @@ const t = useTranslate({
 
 const chosenAddressId = ref('1');
 const onAdd = () => {
-  Toast(t('add'));
+  showToast(t('add'));
 };
 const onEdit = (item: unknown, index: number) => {
-  Toast(`${t('edit')}:${index}`);
+  showToast(`${t('edit')}:${index}`);
 };
 </script>
 

packages/vant/src/calendar/Calendar.tsx

@@ -41,7 +41,7 @@ import { useExpose } from '../composables/use-expose';
 // Components
 import { Popup, PopupPosition } from '../popup';
 import { Button } from '../button';
-import { Toast } from '../toast';
+import { showToast } from '../toast';
 import CalendarMonth from './CalendarMonth';
 import CalendarHeader from './CalendarHeader';
 
@@ -326,7 +326,7 @@ export default defineComponent({
 
       if (maxRange && calcDateNum(date) > maxRange) {
         if (showRangePrompt) {
-          Toast(rangePrompt || t('rangePrompt', maxRange));
+          showToast(rangePrompt || t('rangePrompt', maxRange));
         }
         emit('overRange');
         return false;
@@ -443,7 +443,7 @@ export default defineComponent({
           const [unselectedDate] = dates.splice(selectedIndex, 1);
           emit('unselect', cloneDate(unselectedDate));
         } else if (props.maxRange && dates.length >= props.maxRange) {
-          Toast(props.rangePrompt || t('rangePrompt', props.maxRange));
+          showToast(props.rangePrompt || t('rangePrompt', props.maxRange));
         } else {
           select([...dates, date]);
         }

packages/vant/src/contact-card/README.md

@@ -25,11 +25,11 @@ app.use(ContactCard);
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
-    const onAdd = () => Toast('add');
+    const onAdd = () => showToast('add');
     return {
       onAdd,
     };
@@ -45,13 +45,13 @@ export default {
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const tel = ref('13000000000');
     const name = ref('John Snow');
-    const onEdit = () => Toast('edit');
+    const onEdit = () => showToast('edit');
 
     return {
       tel,

packages/vant/src/contact-card/README.zh-CN.md

@@ -25,11 +25,11 @@ app.use(ContactCard);
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
-    const onAdd = () => Toast('新增');
+    const onAdd = () => showToast('新增');
     return {
       onAdd,
     };
@@ -45,13 +45,13 @@ export default {
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const tel = ref('13000000000');
     const name = ref('张三');
-    const onEdit = () => Toast('edit');
+    const onEdit = () => showToast('edit');
     return {
       tel,
       name,

packages/vant/src/contact-card/demo/index.vue

@@ -2,7 +2,7 @@
 import VanContactCard from '..';
 import { computed } from 'vue';
 import { useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -26,8 +26,8 @@ const currentContact = computed(() => ({
   tel: '13000000000',
 }));
 
-const onAdd = () => Toast(t('add'));
-const onEdit = () => Toast(t('edit'));
+const onAdd = () => showToast(t('add'));
+const onEdit = () => showToast(t('edit'));
 </script>
 
 <template>

packages/vant/src/contact-edit/README.md

@@ -33,7 +33,7 @@ app.use(ContactEdit);
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -41,8 +41,8 @@ export default {
       tel: '',
       name: '',
     });
-    const onSave = (contactInfo) => Toast('Save');
-    const onDelete = (contactInfo) => Toast('Delete');
+    const onSave = (contactInfo) => showToast('Save');
+    const onDelete = (contactInfo) => showToast('Delete');
     return {
       onSave,
       onDelete,

packages/vant/src/contact-edit/README.zh-CN.md

@@ -33,7 +33,7 @@ app.use(ContactEdit);
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -41,8 +41,8 @@ export default {
       tel: '',
       name: '',
     });
-    const onSave = (contactInfo) => Toast('保存');
-    const onDelete = (contactInfo) => Toast('删除');
+    const onSave = (contactInfo) => showToast('保存');
+    const onDelete = (contactInfo) => showToast('删除');
     return {
       onSave,
       onDelete,

packages/vant/src/contact-edit/demo/index.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import VanContactEdit, { type ContactEditInfo } from '..';
 import { useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -18,8 +18,8 @@ const editingContact = ref<ContactEditInfo>({
   name: '',
 });
 
-const onSave = () => Toast(t('save'));
-const onDelete = () => Toast(t('delete'));
+const onSave = () => showToast(t('save'));
+const onDelete = () => showToast(t('delete'));
 </script>
 
 <template>

packages/vant/src/contact-list/README.md

@@ -33,7 +33,7 @@ app.use(ContactList);
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -52,9 +52,9 @@ export default {
       },
     ]);
 
-    const onAdd = () => Toast('Add');
-    const onEdit = (contact) => Toast('Edit' + contact.id);
-    const onSelect = (contact) => Toast('Select' + contact.id);
+    const onAdd = () => showToast('Add');
+    const onEdit = (contact) => showToast('Edit' + contact.id);
+    const onSelect = (contact) => showToast('Select' + contact.id);
 
     return {
       list,

packages/vant/src/contact-list/README.zh-CN.md

@@ -33,7 +33,7 @@ app.use(ContactList);
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -52,9 +52,9 @@ export default {
       },
     ]);
 
-    const onAdd = () => Toast('新增');
-    const onEdit = (contact) => Toast('编辑' + contact.id);
-    const onSelect = (contact) => Toast('选择' + contact.id);
+    const onAdd = () => showToast('新增');
+    const onEdit = (contact) => showToast('编辑' + contact.id);
+    const onSelect = (contact) => showToast('选择' + contact.id);
 
     return {
       list,

packages/vant/src/contact-list/demo/index.vue

@@ -2,7 +2,7 @@
 import VanContactList from '..';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -48,13 +48,13 @@ const t = useTranslate({
 const chosenContactId = ref('1');
 
 const onAdd = () => {
-  Toast(t('add'));
+  showToast(t('add'));
 };
 const onEdit = (contact: { id: string }) => {
-  Toast(t('edit') + contact.id);
+  showToast(t('edit') + contact.id);
 };
 const onSelect = (contact: { id: string }) => {
-  Toast(t('select') + contact.id);
+  showToast(t('select') + contact.id);
 };
 </script>
 

packages/vant/src/count-down/README.md

@@ -96,7 +96,7 @@ export default {
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -111,7 +111,7 @@ export default {
     const reset = () => {
       countDown.value.reset();
     };
-    const onFinish = () => Toast('Finished');
+    const onFinish = () => showToast('Finished');
 
     return {
       start,

packages/vant/src/count-down/README.zh-CN.md

@@ -106,7 +106,7 @@ export default {
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -121,7 +121,7 @@ export default {
     const reset = () => {
       countDown.value.reset();
     };
-    const onFinish = () => Toast('倒计时结束');
+    const onFinish = () => showToast('倒计时结束');
 
     return {
       start,

packages/vant/src/count-down/demo/index.vue

@@ -4,7 +4,7 @@ import VanGridItem from '../../grid-item';
 import VanCountDown, { type CountDownInstance } from '..';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -43,7 +43,7 @@ const pause = () => {
 const reset = () => {
   countDown.value?.reset();
 };
-const onFinish = () => Toast(t('finished'));
+const onFinish = () => showToast(t('finished'));
 </script>
 
 <template>

packages/vant/src/coupon-list/demo/index.vue

@@ -5,7 +5,7 @@ import VanCouponList from '..';
 import { ref, computed } from 'vue';
 import { useTranslate } from '../../../docs/site';
 import { CouponInfo } from '../../coupon';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -85,7 +85,7 @@ const onChange = (index: number) => {
 };
 
 const onExchange = () => {
-  Toast(t('exchange'));
+  showToast(t('exchange'));
   exchangedCoupons.value.push({
     ...coupon.value,
     id: getRandomId(),

packages/vant/src/dialog/README.md

@@ -133,7 +133,7 @@ export default {
 | --- | --- | --- | --- |
 | showDialog | Show dialog | _options: DialogOptions_ | `Promise<void>` |
 | showConfirmDialog | Show confirm dialog | _options: DialogOptions_ | `Promise<void>` |
-| hideDialog | Close dialog | - | `void` |
+| closeDialog | Close dialog | - | `void` |
 | setDialogDefaultOptions | Set default options of all dialogs | _options: DialogOptions_ | `void` |
 | resetDialogDefaultOptions | Reset default options of all dialogs | - | `void` |
 

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

@@ -150,7 +150,7 @@ export default {
 | --- | --- | --- | --- |
 | showDialog | 展示弹窗 | _options: DialogOptions_ | `Promise<void>` |
 | showConfirmDialog | 展示消息确认弹窗 | _options: DialogOptions_ | `Promise<void>` |
-| hideDialog | 关闭弹窗 | - | `void` |
+| closeDialog | 关闭弹窗 | - | `void` |
 | setDialogDefaultOptions | 修改默认配置，影响所有的 `showDialog` 调用 | _options: DialogOptions_ | `void` |
 | resetDialogDefaultOptions | 重置默认配置，影响所有的 `showDialog` 调用 | - | `void` |
 
@@ -297,16 +297,3 @@ Dialog.alert({
   // on close
 });
 ```
-
-### 在 JSX 中渲染 Dialog 组件无法展示？
-
-请注意 `Dialog` 是一个函数，`Dialog.Component` 才是 Dialog 对应的组件。JSX 调用弹窗的正确姿势如下：
-
-```jsx
-export default {
-  setup() {
-    const show = ref(false);
-    return () => <Dialog.Component v-model={[show, 'show']} />;
-  },
-};
-```

packages/vant/src/dialog/function-call.tsx

@@ -78,7 +78,7 @@ export const resetDialogDefaultOptions = () => {
 export const showConfirmDialog = (options: DialogOptions) =>
   showDialog(extend({ showCancelButton: true }, options));
 
-export const hideDialog = () => {
+export const closeDialog = () => {
   if (instance) {
     instance.toggle(false);
   }

packages/vant/src/dialog/index.ts

@@ -5,7 +5,7 @@ export const Dialog = withInstall(_Dialog);
 export default Dialog;
 export {
   showDialog,
-  hideDialog,
+  closeDialog,
   showConfirmDialog,
   setDialogDefaultOptions,
   resetDialogDefaultOptions,

packages/vant/src/dialog/test/function-call.jsx

@@ -1,7 +1,7 @@
 import { later } from '../../../test';
 import {
   showDialog,
-  hideDialog,
+  closeDialog,
   setDialogDefaultOptions,
   resetDialogDefaultOptions,
 } from '../function-call';
@@ -34,7 +34,7 @@ test('should render dialog after calling showDialog', async () => {
   expect(dialog).toBeTruthy();
 });
 
-test('should close dialog after calling hideDialog', async () => {
+test('should close dialog after calling closeDialog', async () => {
   const wrapper = document.createElement('div');
   showDialog({
     message: '1',
@@ -45,7 +45,7 @@ test('should close dialog after calling hideDialog', async () => {
   const dialog = wrapper.querySelector('.van-dialog');
   expect(dialog.style.display).toEqual('');
 
-  hideDialog();
+  closeDialog();
   await later();
   expect(dialog.className.split(' ')).toContain(
     'van-dialog-bounce-leave-active'

packages/vant/src/form/README.md

@@ -109,7 +109,7 @@ export default {
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { closeToast, showLoadingToast } from 'vant';
 
 export default {
   setup() {
@@ -125,10 +125,10 @@ export default {
 
     const asyncValidator = (val) =>
       new Promise((resolve) => {
-        Toast.loading('Validating...');
+        showLoadingToast('Validating...');
 
         setTimeout(() => {
-          Toast.clear();
+          closeToast();
           resolve(val === '1234');
         }, 1000);
       });

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

@@ -117,7 +117,7 @@ export default {
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { closeToast, showLoadingToast } from 'vant';
 
 export default {
   setup() {
@@ -136,10 +136,10 @@ export default {
     // 校验函数可以返回 Promise，实现异步校验
     const asyncValidator = (val) =>
       new Promise((resolve) => {
-        Toast.loading('验证中...');
+        showLoadingToast('验证中...');
 
         setTimeout(() => {
-          Toast.clear();
+          closeToast();
           resolve(val === '1234');
         }, 1000);
       });

packages/vant/src/form/demo/ValidateRules.vue

@@ -6,7 +6,7 @@ import VanCellGroup from '../../cell-group';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site';
 import { FieldValidateError } from '../../field/types';
-import { Toast } from '../../toast';
+import { closeToast, showLoadingToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -47,10 +47,10 @@ const validatorMessage = (val: string) => t('invalid', val);
 
 const asyncValidator = (val: string) =>
   new Promise<boolean>((resolve) => {
-    Toast.loading(t('validating'));
+    showLoadingToast(t('validating'));
 
     setTimeout(() => {
-      Toast.clear();
+      closeToast();
       resolve(val === '1234');
     }, 1000);
   });

packages/vant/src/image-preview/README.md

@@ -16,12 +16,26 @@ const app = createApp();
 app.use(ImagePreview);
 ```
 
+### Function Call
+
+Vant provides some utility functions that can quickly evoke global `ImagePreview` components.
+
+For example, calling the `showImagePreview` function will render a Dialog directly in the page.
+
+```js
+import { showImagePreview } from 'vant';
+
+showImagePreview(['https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg']);
+```
+
 ## Usage
 
 ### Basic Usage
 
 ```js
-ImagePreview([
+import { showImagePreview } from 'vant';
+
+showImagePreview([
   'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
   'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
 ]);
@@ -30,7 +44,9 @@ ImagePreview([
 ### Set Start Position
 
 ```js
-ImagePreview({
+import { showImagePreview } from 'vant';
+
+showImagePreview({
   images: [
     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
@@ -44,7 +60,9 @@ ImagePreview({
 After setting the `closeable` attribute, the close icon will be displayed in the upper right corner of the pop-up layer, and the icon can be customized through the `close-icon` attribute, and the icon location can be customized by using the `close-icon-position` attribute.
 
 ```js
-ImagePreview({
+import { showImagePreview } from 'vant';
+
+showImagePreview({
   images: [
     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
@@ -56,15 +74,15 @@ ImagePreview({
 ### Close Event
 
 ```js
-import { Toast } from 'vant';
+import { showToast, showImagePreview } from 'vant';
 
-ImagePreview({
+showImagePreview({
   images: [
     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
   ],
   onClose() {
-    Toast('closed');
+    showToast('closed');
   },
 });
 ```
@@ -72,7 +90,9 @@ ImagePreview({
 ### Before Close
 
 ```js
-const instance = ImagePreview({
+import { showImagePreview } from 'vant';
+
+const instance = showImagePreview({
   images: [
     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',

packages/vant/src/image-preview/README.zh-CN.md

@@ -2,61 +2,42 @@
 
 ### 介绍
 
-图片放大预览，支持函数调用和组件调用两种方式。
+图片放大预览，支持组件调用和函数调用两种方式。
 
-### 函数调用
+### 引入
 
-`ImagePreview` 是一个函数，调用函数后会直接在页面中展示图片预览界面。
-
-```js
-import { ImagePreview } from 'vant';
-
-ImagePreview(['https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg']);
-```
-
-### 组件调用
-
-通过组件调用 `ImagePreview` 时，可以通过下面的方式进行注册。
+通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。
 
 ```js
 import { createApp } from 'vue';
 import { ImagePreview } from 'vant';
 
-// 全局注册
 const app = createApp();
 app.use(ImagePreview);
-
-// 局部注册
-export default {
-  components: {
-    [ImagePreview.Component.name]: ImagePreview.Component,
-  },
-};
 ```
 
-在 `script setup` 中，可以通过以下方式使用：
+### 函数调用
 
-```html
-<script setup>
-  const VanImagePreview = ImagePreview.Component;
-</script>
+为了便于使用 `ImagePreview`，Vant 提供了一系列辅助函数，通过辅助函数可以快速唤起全局的图片预览组件。
 
-<template>
-  <!-- 中划线命名 -->
-  <van-image-preview />
-  <!-- 也支持大驼峰命名 -->
-  <VanImagePreview>
-</template>
+比如使用 `showImagePreview` 函数，调用后会直接在页面中渲染对应的图片预览组件。
+
+```js
+import { showImagePreview } from 'vant';
+
+showImagePreview(['https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg']);
 ```
 
 ## 代码演示
 
 ### 基础用法
 
-直接传入图片数组，即可展示图片预览。
+在调用 `showImagePreview` 时，直接传入图片数组，即可展示图片预览。
 
 ```js
-ImagePreview([
+import { showImagePreview } from 'vant';
+
+showImagePreview([
   'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
   'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
 ]);
@@ -64,10 +45,12 @@ ImagePreview([
 
 ### 指定初始位置
 
-`ImagePreview` 支持传入配置对象，并通过 `startPosition` 选项指定图片的初始位置（索引值）。
+`showImagePreview` 支持传入配置对象，并通过 `startPosition` 选项指定图片的初始位置（索引值）。
 
 ```js
-ImagePreview({
+import { showImagePreview } from 'vant';
+
+showImagePreview({
   images: [
     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
@@ -81,7 +64,9 @@ ImagePreview({
 设置 `closeable` 属性后，会在弹出层的右上角显示关闭图标，并且可以通过 `close-icon` 属性自定义图标，使用`close-icon-position` 属性可以自定义图标位置。
 
 ```js
-ImagePreview({
+import { showImagePreview } from 'vant';
+
+showImagePreview({
   images: [
     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
@@ -95,15 +80,15 @@ ImagePreview({
 通过 `onClose` 选项监听图片预览的关闭事件。
 
 ```js
-import { Toast } from 'vant';
+import { showToast, showImagePreview } from 'vant';
 
-ImagePreview({
+showImagePreview({
   images: [
     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
   ],
   onClose() {
-    Toast('关闭');
+    showToast('关闭');
   },
 });
 ```
@@ -113,7 +98,9 @@ ImagePreview({
 通过 `beforeClose` 属性可以拦截关闭行为。
 
 ```js
-const instance = ImagePreview({
+import { showImagePreview } from 'vant';
+
+const instance = showImagePreview({
   images: [
     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
@@ -166,7 +153,7 @@ export default {
 
 ### Options
 
-通过函数调用 `ImagePreview` 时，支持传入以下选项：
+通过函数调用 `showImagePreview` 时，支持传入以下选项：
 
 | 参数名 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@@ -307,16 +294,3 @@ imagePreviewRef.value?.swipeTo(1);
 ### 在桌面端无法操作组件？
 
 参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。
-
-### 在 JSX 中渲染 ImagePreview 组件无法展示？
-
-请注意 `ImagePreview` 是一个函数，`ImagePreview.Component` 才是 ImagePreview 对应的组件。JSX 调用图片预览的正确姿势如下：
-
-```jsx
-export default {
-  setup() {
-    const show = ref(false);
-    return () => <ImagePreview.Component v-model={[show, 'show']} />;
-  },
-};
-```

packages/vant/src/image-preview/demo/index.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import VanCell from '../../cell';
-import { ImagePreview, ImagePreviewOptions } from '..';
+import {
+  showImagePreview,
+  ImagePreviewOptions,
+  ImagePreview as VanImagePreview,
+} from '..';
 import { ref } from 'vue';
 import { cdnURL, useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
-
-const VanImagePreview = ImagePreview.Component;
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -42,7 +44,7 @@ const images = [
 const show = ref(false);
 const index = ref(0);
 
-const onClose = () => Toast(t('closed'));
+const onClose = () => showToast(t('closed'));
 
 const beforeClose = () =>
   new Promise<boolean>((resolve) => {
@@ -51,16 +53,16 @@ const beforeClose = () =>
     }, 1000);
   });
 
-const showComponentCall = () => {
-  show.value = true;
-};
-
 const onChange = (newIndex: number) => {
   index.value = newIndex;
 };
 
-const showImagePreview = (options: Partial<ImagePreviewOptions> = {}) => {
-  const instance = ImagePreview({
+const showComponentCall = () => {
+  show.value = true;
+};
+
+const showFunctionCall = (options: Partial<ImagePreviewOptions> = {}) => {
+  const instance = showImagePreview({
     images,
     ...options,
   });
@@ -75,24 +77,24 @@ const showImagePreview = (options: Partial<ImagePreviewOptions> = {}) => {
 
 <template>
   <demo-block card :title="t('basicUsage')">
-    <van-cell is-link :value="t('showImages')" @click="showImagePreview()" />
+    <van-cell is-link :value="t('showImages')" @click="showFunctionCall()" />
   </demo-block>
 
   <demo-block card :title="t('customConfig')">
     <van-cell
       is-link
       :value="t('startPosition')"
-      @click="showImagePreview({ startPosition: 1 })"
+      @click="showFunctionCall({ startPosition: 1 })"
     />
     <van-cell
       is-link
       :value="t('showClose')"
-      @click="showImagePreview({ closeable: true })"
+      @click="showFunctionCall({ closeable: true })"
     />
     <van-cell
       is-link
       :value="t('closeEvent')"
-      @click="showImagePreview({ onClose })"
+      @click="showFunctionCall({ onClose })"
     />
   </demo-block>
 
@@ -100,7 +102,7 @@ const showImagePreview = (options: Partial<ImagePreviewOptions> = {}) => {
     <van-cell
       is-link
       :value="t('beforeClose')"
-      @click="showImagePreview({ beforeClose })"
+      @click="showFunctionCall({ beforeClose })"
     />
   </demo-block>
 

packages/vant/src/image-preview/function-call.tsx

@@ -1,7 +1,6 @@
-import { extend, inBrowser, withInstall, ComponentInstance } from '../utils';
+import { extend, inBrowser, ComponentInstance } from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
 import VanImagePreview from './ImagePreview';
-import type { App } from 'vue';
 import type { ImagePreviewOptions } from './types';
 
 let instance: ComponentInstance;
@@ -49,7 +48,7 @@ function initInstance() {
   }));
 }
 
-const ImagePreview = (
+export const showImagePreview = (
   options: string[] | ImagePreviewOptions,
   startPosition = 0
 ) => {
@@ -70,11 +69,3 @@ const ImagePreview = (
 
   return instance;
 };
-
-ImagePreview.Component = withInstall(VanImagePreview);
-
-ImagePreview.install = (app: App) => {
-  app.use(ImagePreview.Component);
-};
-
-export { ImagePreview };

packages/vant/src/image-preview/index.ts

@@ -1,8 +1,11 @@
-import { ImagePreview } from './function-call';
+import { withInstall } from '../utils';
+import _ImagePreview from './ImagePreview';
 import type { ImagePreviewProps } from './ImagePreview';
 
+export const ImagePreview = withInstall(_ImagePreview);
 export default ImagePreview;
-export { ImagePreview };
+export { showImagePreview } from './function-call';
+
 export type { ImagePreviewProps };
 export type {
   ImagePreviewOptions,

packages/vant/src/image-preview/test/function-call.spec.ts

@@ -1,22 +1,11 @@
 import { later, triggerDrag, mockGetBoundingClientRect } from '../../../test';
-import { createApp, nextTick } from 'vue';
-import { ImagePreview } from '../function-call';
-import ImagePreviewComponent from '../ImagePreview';
+import { nextTick } from 'vue';
+import { showImagePreview } from '../function-call';
 import { images, triggerZoom } from './shared';
 
-test('should expose ImagePreviewComponent in ImagePreview.Component', () => {
-  expect(ImagePreview.Component.name).toEqual('van-image-preview');
-});
-
-test('should register component to app', () => {
-  const app = createApp(document.body);
-  app.use(ImagePreview);
-  expect(app.component(ImagePreviewComponent.name)).toBeTruthy();
-});
-
 test('should allow to use the teleport option', async () => {
   const root = document.createElement('div');
-  ImagePreview({ images: [], teleport: root });
+  showImagePreview({ images: [], teleport: root });
 
   await later();
   expect(root.querySelector('.van-image-preview')).toBeTruthy();
@@ -24,7 +13,7 @@ test('should allow to use the teleport option', async () => {
 
 test('should trigger onClose option correctly', async () => {
   const onClose = jest.fn();
-  const instance = ImagePreview({
+  const instance = showImagePreview({
     images,
     startPosition: 1,
     onClose,
@@ -41,7 +30,7 @@ test('should trigger onClose option correctly', async () => {
 
 test('should trigger onChange option correctly', async () => {
   const onChange = jest.fn();
-  ImagePreview({
+  showImagePreview({
     images,
     startPosition: 0,
     onChange,
@@ -55,7 +44,7 @@ test('should trigger onChange option correctly', async () => {
 
 test('should trigger onScale option correctly', async () => {
   const restore = mockGetBoundingClientRect({ width: 100 });
-  ImagePreview({
+  showImagePreview({
     images,
     startPosition: 0,
     onScale({ index, scale }) {

packages/vant/src/nav-bar/README.md

@@ -60,12 +60,12 @@ export default {
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const onClickLeft = () => history.back();
-    const onClickRight = () => Toast('Button');
+    const onClickRight = () => showToast('Button');
     return {
       onClickLeft,
       onClickRight,

packages/vant/src/nav-bar/README.zh-CN.md

@@ -66,12 +66,12 @@ export default {
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const onClickLeft = () => history.back();
-    const onClickRight = () => Toast('按钮');
+    const onClickRight = () => showToast('按钮');
     return {
       onClickLeft,
       onClickRight,

packages/vant/src/nav-bar/demo/index.vue

@@ -2,7 +2,7 @@
 import VanNavBar from '..';
 import VanIcon from '../../icon';
 import { useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -17,8 +17,8 @@ const t = useTranslate({
   },
 });
 
-const onClickLeft = () => Toast(t('back'));
-const onClickRight = () => Toast(t('button'));
+const onClickLeft = () => showToast(t('back'));
+const onClickRight = () => showToast(t('button'));
 </script>
 
 <template>

packages/vant/src/notify/README.md

@@ -33,13 +33,13 @@ showNotify('Notify Message');
 ### Basic Usage
 
 ```js
-import { showNotify, hideNotify } from 'vant';
+import { showNotify, closeNotify } from 'vant';
 
 // auto close after 3s
 showNotify('Message');
 
 // manually close
-hideNotify();
+closeNotify();
 ```
 
 ### Notify Type
@@ -114,7 +114,7 @@ export default {
 | Methods | Attribute | Return value | Description |
 | --- | --- | --- | --- |
 | showNotify | `options \| message` | notify instance | Show notify |
-| hideNotify | - | `void` | Close notify |
+| closeNotify | - | `void` | Close notify |
 | setNotifyDefaultOptions | `options` | `void` | Set default options of all notifies |
 | resetNotifyDefaultOptions | - | `void` | Reset default options of all notifies |
 

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

@@ -33,13 +33,13 @@ showNotify({ message: '提示' });
 ### 基础用法
 
 ```js
-import { showNotify, hideNotify } from 'vant';
+import { showNotify, closeNotify } from 'vant';
 
 // 3 秒后自动关闭
 showNotify('通知内容');
 
 // 主动关闭
-hideNotify();
+closeNotify();
 ```
 
 ### 通知类型
@@ -127,7 +127,7 @@ export default {
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
 | showNotify | 展示提示 | `options \| message` | notify 实例 |
-| hideNotify | 关闭提示 | - | `void` |
+| closeNotify | 关闭提示 | - | `void` |
 | setNotifyDefaultOptions | 修改默认配置，影响所有的 `showNotify` 调用 | `options` | `void` |
 | resetNotifyDefaultOptions | 重置默认配置，影响所有的 `showNotify` 调用 | - | `void` |
 

packages/vant/src/notify/function-call.tsx

@@ -34,7 +34,7 @@ const getDefaultOptions = (): NotifyOptions => ({
 
 let currentOptions = getDefaultOptions();
 
-export const hideNotify = () => {
+export const closeNotify = () => {
   if (instance) {
     instance.toggle(false);
   }
@@ -55,7 +55,7 @@ export function showNotify(options: NotifyMessage | NotifyOptions) {
   clearTimeout(timer);
 
   if (options.duration! > 0) {
-    timer = window.setTimeout(hideNotify, options.duration);
+    timer = window.setTimeout(closeNotify, options.duration);
   }
 
   return instance;

packages/vant/src/notify/index.ts

@@ -5,7 +5,7 @@ export const Notify = withInstall(_Notify);
 export default Notify;
 export {
   showNotify,
-  hideNotify,
+  closeNotify,
   setNotifyDefaultOptions,
   resetNotifyDefaultOptions,
 } from './function-call';

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

@@ -1,13 +1,13 @@
 import { later } from '../../../test';
 import {
   showNotify,
-  hideNotify,
+  closeNotify,
   setNotifyDefaultOptions,
   resetNotifyDefaultOptions,
 } from '../function-call';
 
 test('should not throw error if calling clear method before render notify', () => {
-  hideNotify();
+  closeNotify();
 });
 
 test('should render Notify correctly', async () => {

packages/vant/src/number-keyboard/README.md

@@ -32,13 +32,13 @@ app.use(NumberKeyboard);
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const show = ref(true);
-    const onInput = (value) => Toast(value);
-    const onDelete = () => Toast('delete');
+    const onInput = (value) => showToast(value);
+    const onDelete = () => showToast('delete');
 
     return {
       show,

packages/vant/src/number-keyboard/README.zh-CN.md

@@ -34,13 +34,13 @@ app.use(NumberKeyboard);
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const show = ref(true);
-    const onInput = (value) => Toast(value);
-    const onDelete = () => Toast('删除');
+    const onInput = (value) => showToast(value);
+    const onDelete = () => showToast('删除');
 
     return {
       show,

packages/vant/src/number-keyboard/demo/index.vue

@@ -4,7 +4,7 @@ import VanField from '../../field';
 import VanNumberKeyboard from '..';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -44,8 +44,8 @@ const t = useTranslate({
 const value = ref('');
 const keyboard = ref('default');
 
-const onInput = (value: string) => Toast(`${t('input')}: ${value}`);
-const onDelete = () => Toast(t('delete'));
+const onInput = (value: string) => showToast(`${t('input')}: ${value}`);
+const onDelete = () => showToast(t('delete'));
 const isTest = process.env.NODE_ENV === 'test';
 </script>
 

packages/vant/src/picker/README.md

@@ -31,7 +31,7 @@ app.use(Picker);
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -43,12 +43,12 @@ export default {
       { text: 'Maine', value: 'Maine' },
     ];
     const onConfirm = ({ selectedValues }) => {
-      Toast(`Value: ${selectedValues.join(',')}`);
+      showToast(`Value: ${selectedValues.join(',')}`);
     };
     const onChange = ({ selectedValues }) => {
-      Toast(`Value: ${selectedValues.join(',')}`);
+      showToast(`Value: ${selectedValues.join(',')}`);
     };
-    const onCancel = () => Toast('Cancel');
+    const onCancel = () => showToast('Cancel');
 
     return {
       columns,
@@ -120,7 +120,7 @@ Using `v-model` to bind selected values.
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {

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

@@ -39,7 +39,7 @@ Picker 组件通过 `columns` 属性配置选项数据，`columns` 是一个包
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -51,12 +51,12 @@ export default {
       { text: '湖州', value: 'Huzhou' },
     ];
     const onConfirm = ({ selectedValues }) => {
-      Toast(`当前值: ${selectedValues.join(',')}`);
+      showToast(`当前值: ${selectedValues.join(',')}`);
     };
     const onChange = ({ selectedValues }) => {
-      Toast(`当前值: ${selectedValues.join(',')}`);
+      showToast(`当前值: ${selectedValues.join(',')}`);
     };
-    const onCancel = () => Toast('取消');
+    const onCancel = () => showToast('取消');
 
     return {
       columns,
@@ -131,7 +131,7 @@ export default {
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {

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

@@ -12,7 +12,7 @@ import {
   disabledColumns,
   customKeyColumns,
 } from './data';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 import { useTranslate } from '../../../docs/site';
 
 const t = useTranslate({
@@ -58,14 +58,14 @@ const customFieldName = {
 const selectedValues = ref(['Wenzhou']);
 
 const onChange1 = ({ selectedValues }: PickerChangeEventParams) => {
-  Toast(t('toastContent', selectedValues.join(',')));
+  showToast(t('toastContent', selectedValues.join(',')));
 };
 
 const onConfirm = ({ selectedValues }: PickerConfirmEventParams) => {
-  Toast(t('toastContent', selectedValues.join(',')));
+  showToast(t('toastContent', selectedValues.join(',')));
 };
 
-const onCancel = () => Toast(t('cancel'));
+const onCancel = () => showToast(t('cancel'));
 </script>
 
 <template>

packages/vant/src/popover/README.md

@@ -30,7 +30,7 @@ app.use(Popover);
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -40,7 +40,7 @@ export default {
       { text: 'Option 2' },
       { text: 'Option 3' },
     ];
-    const onSelect = (action) => Toast(action.text);
+    const onSelect = (action) => showToast(action.text);
 
     return {
       actions,

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

@@ -32,7 +32,7 @@ app.use(Popover);
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -44,7 +44,7 @@ export default {
       { text: '选项二' },
       { text: '选项三' },
     ];
-    const onSelect = (action) => Toast(action.text);
+    const onSelect = (action) => showToast(action.text);
 
     return {
       actions,

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

@@ -7,7 +7,7 @@ import VanPopup from '../../popup';
 import VanPicker from '../../picker';
 import VanGrid from '../../grid';
 import VanGridItem from '../../grid-item';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 import { useTranslate } from '../../../docs/site';
 
 const t = useTranslate({
@@ -92,7 +92,7 @@ const onPickerChange = (value: PopoverPlacement) => {
   });
 };
 
-const onSelect = (action: { text: string }) => Toast(action.text);
+const onSelect = (action: { text: string }) => showToast(action.text);
 </script>
 
 <template>

packages/vant/src/pull-refresh/README.md

@@ -30,7 +30,7 @@ The `refresh` event will be Emitted when pull refresh, you should set `v-model`
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -38,7 +38,7 @@ export default {
     const loading = ref(false);
     const onRefresh = () => {
       setTimeout(() => {
-        Toast('Refresh Success');
+        showToast('Refresh Success');
         loading.value = false;
         count.value++;
       }, 1000);

packages/vant/src/pull-refresh/README.zh-CN.md

@@ -30,7 +30,7 @@ app.use(PullRefresh);
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -38,7 +38,7 @@ export default {
     const loading = ref(false);
     const onRefresh = () => {
       setTimeout(() => {
-        Toast('刷新成功');
+        showToast('刷新成功');
         loading.value = false;
         count.value++;
       }, 1000);

packages/vant/src/pull-refresh/demo/index.vue

@@ -4,7 +4,7 @@ import VanTab from '../../tab';
 import VanPullRefresh from '..';
 import { computed, onMounted, ref } from 'vue';
 import { cdnURL, useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -33,10 +33,10 @@ const tips = computed(() => {
   return t('try');
 });
 
-const onRefresh = (showToast: boolean) => {
+const onRefresh = (isShowToast: boolean) => {
   setTimeout(() => {
-    if (showToast) {
-      Toast(t('success'));
+    if (isShowToast) {
+      showToast(t('success'));
     }
     loading.value = false;
     count.value++;

packages/vant/src/rate/README.md

@@ -113,12 +113,12 @@ export default {
 
 ```javascript
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const value = ref(3);
-    const onChange = (value) => Toast('current value:' + value);
+    const onChange = (value) => showToast('current value:' + value);
     return {
       value,
       onChange,

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

@@ -131,12 +131,12 @@ export default {
 
 ```javascript
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const value = ref(3);
-    const onChange = (value) => Toast('当前值：' + value);
+    const onChange = (value) => showToast('当前值：' + value);
     return {
       value,
       onChange,

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

@@ -2,7 +2,7 @@
 import VanRate from '..';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -38,7 +38,7 @@ const value6 = ref(3);
 const value7 = ref(3.3);
 const value8 = ref(2);
 
-const onChange = (value: number) => Toast(t('toastContent', value));
+const onChange = (value: number) => showToast(t('toastContent', value));
 </script>
 
 <template>

packages/vant/src/search/README.md

@@ -53,13 +53,13 @@ export default {
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const value = ref('');
-    const onSearch = (val) => Toast(val);
-    const onCancel = () => Toast('Cancel');
+    const onSearch = (val) => showToast(val);
+    const onCancel = () => showToast('Cancel');
     return {
       value,
       onSearch,
@@ -114,13 +114,13 @@ Use `action` slot to custom right button, `cancel` event will no longer be Emitt
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const value = ref('');
-    const onSearch = (val) => Toast(val);
-    const onClickButton = () => Toast(value.value);
+    const onSearch = (val) => showToast(val);
+    const onClickButton = () => showToast(value.value);
     return {
       value,
       onSearch,

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

@@ -55,13 +55,13 @@ Search 组件提供了 `search` 和 `cancel` 事件，`search` 事件在点击
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const value = ref('');
-    const onSearch = (val) => Toast(val);
-    const onCancel = () => Toast('取消');
+    const onSearch = (val) => showToast(val);
+    const onCancel = () => showToast('取消');
     return {
       value,
       onSearch,
@@ -126,13 +126,13 @@ export default {
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const value = ref('');
-    const onSearch = (val) => Toast(val);
-    const onClickButton = () => Toast(value.value);
+    const onSearch = (val) => showToast(val);
+    const onClickButton = () => showToast(value.value);
     return {
       value,
       onSearch,

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

@@ -2,7 +2,7 @@
 import VanSearch from '..';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -32,9 +32,9 @@ const value4 = ref('');
 const value5 = ref('');
 const value6 = ref('');
 
-const onSearch = (val: string) => Toast(val);
-const onCancel = () => Toast(t('cancel'));
-const onClickButton = () => Toast(value6.value);
+const onSearch = (val: string) => showToast(val);
+const onCancel = () => showToast(t('cancel'));
+const onClickButton = () => showToast(value6.value);
 </script>
 
 <template>

packages/vant/src/share-sheet/README.md

@@ -32,7 +32,7 @@ app.use(ShareSheet);
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -46,7 +46,7 @@ export default {
     ];
 
     const onSelect = (option) => {
-      Toast(option.name);
+      showToast(option.name);
       showShare.value = false;
     };
 

packages/vant/src/share-sheet/README.zh-CN.md

@@ -34,7 +34,7 @@ app.use(ShareSheet);
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -48,7 +48,7 @@ export default {
     ];
 
     const onSelect = (option) => {
-      Toast(option.name);
+      showToast(option.name);
       showShare.value = false;
     };
 

packages/vant/src/share-sheet/demo/index.vue

@@ -3,7 +3,7 @@ import VanCell from '../../cell';
 import VanShareSheet, { ShareSheetOption, ShareSheetOptions } from '..';
 import { ref, computed } from 'vue';
 import { cdnURL, useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -98,7 +98,7 @@ const optionsWithDesc = computed<ShareSheetOptions>(() => [
 ]);
 
 const onSelect = (option: ShareSheetOption) => {
-  Toast(option.name);
+  showToast(option.name);
   showBasic.value = false;
   showWithDesc.value = false;
   showMultiLine.value = false;

packages/vant/src/sidebar/README.md

@@ -72,12 +72,12 @@ export default {
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const active = ref(0);
-    const onChange = (index) => Toast(`Title ${index + 1}`);
+    const onChange = (index) => showToast(`Title ${index + 1}`);
     return {
       active,
       onChange,

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

@@ -80,12 +80,12 @@ export default {
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const active = ref(0);
-    const onChange = (index) => Toast(`标签名 ${index + 1}`);
+    const onChange = (index) => showToast(`标签名 ${index + 1}`);
     return {
       active,
       onChange,

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

@@ -5,7 +5,7 @@ import VanSidebar from '..';
 import VanSidebarItem from '../../sidebar-item';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -26,7 +26,7 @@ const active2 = ref(0);
 const active3 = ref(0);
 const active4 = ref(0);
 
-const onChange = (index: number) => Toast(`${t('title')} ${index + 1}`);
+const onChange = (index: number) => showToast(`${t('title')} ${index + 1}`);
 </script>
 
 <template>

packages/vant/src/slider/README.md

@@ -26,12 +26,12 @@ app.use(Slider);
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const value = ref(50);
-    const onChange = (value) => Toast('Current value: ' + value);
+    const onChange = (value) => showToast('Current value: ' + value);
     return {
       value,
       onChange,
@@ -50,13 +50,13 @@ Add `range` attribute to open dual thumb mode.
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     // value must be an Array
     const value = ref([10, 50]);
-    const onChange = (value) => Toast('Current value: ' + value);
+    const onChange = (value) => showToast('Current value: ' + value);
     return {
       value,
       onChange,
@@ -128,13 +128,13 @@ export default {
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const value = ref(50);
     const value2 = ref([10, 50]);
-    const onChange = (value) => Toast('Current value: ' + value);
+    const onChange = (value) => showToast('Current value: ' + value);
     return {
       value,
       value2,

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

@@ -26,12 +26,12 @@ app.use(Slider);
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const value = ref(50);
-    const onChange = (value) => Toast('当前值：' + value);
+    const onChange = (value) => showToast('当前值：' + value);
     return {
       value,
       onChange,
@@ -50,13 +50,13 @@ export default {
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     // 双滑块模式时，值必须是数组
     const value = ref([10, 50]);
-    const onChange = (value) => Toast('当前值：' + value);
+    const onChange = (value) => showToast('当前值：' + value);
     return {
       value,
       onChange,
@@ -130,13 +130,13 @@ export default {
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const value = ref(50);
     const value2 = ref([10, 50]);
-    const onChange = (value) => Toast('当前值：' + value);
+    const onChange = (value) => showToast('当前值：' + value);
     return {
       value,
       value2,

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

@@ -2,7 +2,7 @@
 import VanSlider from '..';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -39,7 +39,7 @@ const value7 = ref(50);
 const value8 = ref(50);
 const value9 = ref<[number, number]>([20, 60]);
 
-const onChange = (value: string) => Toast(t('text') + value);
+const onChange = (value: string) => showToast(t('text') + value);
 </script>
 
 <template>

packages/vant/src/stepper/README.md

@@ -85,18 +85,18 @@ export default {
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { closeToast, showLoadingToast } from 'vant';
 
 export default {
   setup() {
     const value = ref(1);
 
     const beforeChange = (value) => {
-      Toast.loading({ forbidClick: true });
+      showLoadingToast({ forbidClick: true });
 
       return new Promise((resolve) => {
         setTimeout(() => {
-          Toast.clear();
+          closeToast();
           // resolve 'true' or 'false'
           resolve(true);
         }, 500);

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

@@ -103,18 +103,18 @@ export default {
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { closeToast, showLoadingToast } from 'vant';
 
 export default {
   setup() {
     const value = ref(1);
 
     const beforeChange = (value) => {
-      Toast.loading({ forbidClick: true });
+      showLoadingToast({ forbidClick: true });
 
       return new Promise((resolve) => {
         setTimeout(() => {
-          Toast.clear();
+          closeToast();
           // 在 resolve 函数中返回 true 或 false
           resolve(true);
         }, 500);

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

@@ -3,7 +3,7 @@ import VanCell from '../../cell';
 import VanStepper from '..';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { closeToast, showLoadingToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -40,11 +40,11 @@ const stepperRound = ref(1);
 const disabledInput = ref(1);
 
 const beforeChange = () => {
-  Toast.loading({ forbidClick: true });
+  showLoadingToast({ forbidClick: true });
 
   return new Promise<boolean>((resolve) => {
     setTimeout(() => {
-      Toast.clear();
+      closeToast();
       resolve(true);
     }, 500);
   });

packages/vant/src/submit-bar/README.md

@@ -25,11 +25,11 @@ app.use(SubmitBar);
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
-    const onSubmit = () => Toast('Submit');
+    const onSubmit = () => showToast('Submit');
     return {
       onSubmit,
     };
@@ -72,12 +72,12 @@ Use slot to add custom contents.
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
-    const onSubmit = () => Toast('Submit');
-    const onClickLink = () => Toast('Click Link');
+    const onSubmit = () => showToast('Submit');
+    const onClickLink = () => showToast('Click Link');
     return {
       onSubmit,
       onClickLink,

packages/vant/src/submit-bar/README.zh-CN.md

@@ -25,11 +25,11 @@ app.use(SubmitBar);
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
-    const onSubmit = () => Toast('点击按钮');
+    const onSubmit = () => showToast('点击按钮');
     return {
       onSubmit,
     };
@@ -79,12 +79,12 @@ export default {
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
-    const onSubmit = () => Toast('点击按钮');
-    const onClickLink = () => Toast('修改地址');
+    const onSubmit = () => showToast('点击按钮');
+    const onClickLink = () => showToast('修改地址');
     return {
       onSubmit,
       onClickLink,

packages/vant/src/submit-bar/demo/index.vue

@@ -3,7 +3,7 @@ import VanSubmitBar from '..';
 import VanCheckbox from '../../checkbox';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -28,8 +28,8 @@ const t = useTranslate({
 
 const checked = ref(true);
 
-const onSubmit = () => Toast(t('clickButton'));
-const onClickLink = () => Toast(t('clickLink'));
+const onSubmit = () => showToast(t('clickButton'));
+const onClickLink = () => showToast(t('clickLink'));
 </script>
 
 <template>

packages/vant/src/swipe/README.md

@@ -78,11 +78,11 @@ export default {
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
-    const onChange = (index) => Toast('Current Swipe index:' + index);
+    const onChange = (index) => showToast('Current Swipe index:' + index);
     return { onChange };
   },
 };

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

@@ -80,11 +80,11 @@ export default {
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
-    const onChange = (index) => Toast('当前 Swipe 索引：' + index);
+    const onChange = (index) => showToast('当前 Swipe 索引：' + index);
     return { onChange };
   },
 };

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

@@ -2,7 +2,7 @@
 import VanSwipe from '..';
 import VanSwipeItem from '../../swipe-item';
 import { cdnURL, useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -30,7 +30,7 @@ const images = [
   cdnURL('apple-4.jpeg'),
 ];
 
-const onChange = (index: number) => Toast(t('message') + index);
+const onChange = (index: number) => showToast(t('message') + index);
 </script>
 
 <template>