refactor(Toast): redesign function-call API (#10804)

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

@@ -120,6 +120,58 @@ declare module '@vue/runtime-core' {
 }
 ```
 
+### Toast 调用方式调整
+
+Vant 4 中，`Toast` 组件的调用方式也进行了调整，与 `Dialog` 组件的改动一致：
+
+```js
+// Vant 3
+Toast(); // 函数调用
+
+// 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`。
+
+```js
+export default {
+  mounted() {
+    // 无效代码
+    this.$toast('内容');
+  },
+};
+```
+
+如果需要全局方法，可以手动在 `app` 对象上注册：
+
+```js
+import { showNotify } from 'vant';
+
+// 注册 $notify 方法
+app.config.globalProperties.$toast = showNotify;
+
+// 添加 TS 类型定义
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $toast: typeof showToast;
+  }
+}
+```
+
 ### Notify 调用方式调整
 
 Vant 4 中，`Notify` 组件的调用方式也进行了调整，与 `Dialog` 组件的改动一致：

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
+  // 调用工具函数，弹出一个 Toast
-  vant.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 onClickIcon = () => showToast('Click Icon');
-    const onClickButton = () => Toast('Click Button');
+    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 onClickIcon = () => showToast('点击图标');
-    const onClickButton = () => Toast('点击按钮');
+    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 onClickIcon = () => showToast(t('clickIcon'));
-const onClickButton = () => Toast(t('clickButton'));
+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 onSave = () => showToast('save');
-    const onDelete = () => Toast('delete');
+    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 onSave = () => showToast('save');
-    const onDelete = () => Toast('delete');
+    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 onSave = () => showToast(t('save'));
-const onDelete = () => Toast(t('delete'));
+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 onAdd = () => showToast('Add');
-    const onEdit = (item, index) => Toast('Edit:' + index);
+    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 onAdd = () => showToast('新增地址');
-    const onEdit = (item, index) => Toast('编辑地址:' + index);
+    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 onAdd = () => showToast(t('add'));
-const onEdit = () => Toast(t('edit'));
+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 onSave = (contactInfo) => showToast('Save');
-    const onDelete = (contactInfo) => Toast('Delete');
+    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 onSave = (contactInfo) => showToast('保存');
-    const onDelete = (contactInfo) => Toast('删除');
+    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 onSave = () => showToast(t('save'));
-const onDelete = () => Toast(t('delete'));
+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 onAdd = () => showToast('Add');
-    const onEdit = (contact) => Toast('Edit' + contact.id);
+    const onEdit = (contact) => showToast('Edit' + contact.id);
-    const onSelect = (contact) => Toast('Select' + 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 onAdd = () => showToast('新增');
-    const onEdit = (contact) => Toast('编辑' + contact.id);
+    const onEdit = (contact) => showToast('编辑' + contact.id);
-    const onSelect = (contact) => Toast('选择' + 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/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

@@ -74,7 +74,7 @@ showImagePreview({
 ### Close Event
 
 ```js
-import { Toast, showImagePreview } from 'vant';
+import { showToast, showImagePreview } from 'vant';
 
 showImagePreview({
   images: [
@@ -82,7 +82,7 @@ showImagePreview({
     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
   ],
   onClose() {
-    Toast('closed');
+    showToast('closed');
   },
 });
 ```

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

@@ -18,7 +18,7 @@ app.use(ImagePreview);
 
 ### 函数调用
 
-为了便于使用 `ImagePreview`，Vant 提供了一系列辅助函数，通过辅助函数可以快速唤起全局的弹窗组件。
+为了便于使用 `ImagePreview`，Vant 提供了一系列辅助函数，通过辅助函数可以快速唤起全局的图片预览组件。
 
 比如使用 `showImagePreview` 函数，调用后会直接在页面中渲染对应的图片预览组件。
 
@@ -80,7 +80,7 @@ showImagePreview({
 通过 `onClose` 选项监听图片预览的关闭事件。
 
 ```js
-import { Toast, showImagePreview } from 'vant';
+import { showToast, showImagePreview } from 'vant';
 
 showImagePreview({
   images: [
@@ -88,7 +88,7 @@ showImagePreview({
     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
   ],
   onClose() {
-    Toast('关闭');
+    showToast('关闭');
   },
 });
 ```

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

@@ -7,7 +7,7 @@ import {
 } from '..';
 import { ref } from 'vue';
 import { cdnURL, useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -44,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) => {

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 onClickLeft = () => showToast(t('back'));
-const onClickRight = () => Toast(t('button'));
+const onClickRight = () => showToast(t('button'));
 </script>
 
 <template>

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 onInput = (value) => showToast(value);
-    const onDelete = () => Toast('delete');
+    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 onInput = (value) => showToast(value);
-    const onDelete = () => Toast('删除');
+    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 onInput = (value: string) => showToast(`${t('input')}: ${value}`);
-const onDelete = () => Toast(t('delete'));
+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) {
+    if (isShowToast) {
-      Toast(t('success'));
+      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 onSearch = (val) => showToast(val);
-    const onCancel = () => Toast('Cancel');
+    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 onSearch = (val) => showToast(val);
-    const onClickButton = () => Toast(value.value);
+    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 onSearch = (val) => showToast(val);
-    const onCancel = () => Toast('取消');
+    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 onSearch = (val) => showToast(val);
-    const onClickButton = () => Toast(value.value);
+    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 onSearch = (val: string) => showToast(val);
-const onCancel = () => Toast(t('cancel'));
+const onCancel = () => showToast(t('cancel'));
-const onClickButton = () => Toast(value6.value);
+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 onSubmit = () => showToast('Submit');
-    const onClickLink = () => Toast('Click Link');
+    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 onSubmit = () => showToast('点击按钮');
-    const onClickLink = () => Toast('修改地址');
+    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 onSubmit = () => showToast(t('clickButton'));
-const onClickLink = () => Toast(t('clickLink'));
+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>

packages/vant/src/tab/README.md

@@ -110,11 +110,11 @@ Tabs styled as cards.
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
-    const onClickTab = ({ title }) => Toast(title);
+    const onClickTab = ({ title }) => showToast(title);
     return {
       onClickTab,
     };

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

@@ -115,12 +115,12 @@ export default {
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const active = ref(0);
-    const onClickTab = ({ title }) => Toast(title);
+    const onClickTab = ({ title }) => showToast(title);
     return {
       active,
       onClickTab,

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

@@ -4,7 +4,7 @@ import VanTab from '..';
 import VanIcon from '../../icon';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 import Shrink from './Shrink.vue';
 
 const t = useTranslate({
@@ -57,7 +57,7 @@ const activeName = ref('b');
 const tabs = [1, 2, 3, 4];
 
 const onClickTab = ({ title }: { title: string }) => {
-  Toast(title);
+  showToast(title);
 };
 
 const beforeChange = (name: number) => {

packages/vant/src/tabbar/README.md

@@ -134,12 +134,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(`Tab ${index}`);
+    const onChange = (index) => showToast(`Tab ${index}`);
     return {
       icon,
       onChange,

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

@@ -144,12 +144,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}`);
+    const onChange = (index) => showToast(`标签 ${index}`);
     return {
       icon,
       onChange,

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

@@ -3,7 +3,7 @@ import VanTabbar from '..';
 import VanTabbarItem from '../../tabbar-item';
 import { ref } from 'vue';
 import { cdnURL, useTranslate } from '../../../docs/site';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -35,7 +35,7 @@ const icon = {
 };
 
 const onChange = (index: number) => {
-  Toast(`${t('tab')} ${index + 1}`);
+  showToast(`${t('tab')} ${index + 1}`);
 };
 </script>
 

packages/vant/src/toast/README.md

@@ -16,18 +16,34 @@ const app = createApp();
 app.use(Toast);
 ```
 
+### Function Call
+
+Vant provides some utility functions that can quickly evoke global `Toast` components.
+
+For example, calling the `showToast` function will render a Toast directly in the page.
+
+```js
+import { showToast } from 'vant';
+
+showToast('Some messages');
+```
+
 ## Usage
 
 ### Text
 
 ```js
-Toast('Some messages');
+import { showToast } from 'vant';
+
+showToast('Some messages');
 ```
 
 ### Loading
 
 ```js
-Toast.loading({
+import { showLoadingToast } from 'vant';
+
+showLoadingToast({
   message: 'Loading...',
   forbidClick: true,
 });
@@ -36,24 +52,28 @@ Toast.loading({
 ### Success/Fail
 
 ```js
-Toast.success('Success');
+import { showSuccessToast, showFailToast } from 'vant';
-Toast.fail('Fail');
+
+showSuccessToast('Success');
+showFailToast('Fail');
 ```
 
 ### Custom Icon
 
 ```js
-Toast({
+import { showToast, showLoadingToast } from 'vant';
+
+showToast({
   message: 'Custom Icon',
   icon: 'like-o',
 });
 
-Toast({
+showToast({
   message: 'Custom Image',
   icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
 });
 
-Toast.loading({
+showLoadingToast({
   message: 'Loading...',
   forbidClick: true,
   loadingType: 'spinner',
@@ -63,12 +83,14 @@ Toast.loading({
 ### Custom Position
 
 ```js
-Toast({
+import { showToast } from 'vant';
+
+showToast({
   message: 'Top',
   position: 'top',
 });
 
-Toast({
+showToast({
   message: 'Bottom',
   position: 'bottom',
 });
@@ -77,7 +99,9 @@ Toast({
 ### Update Message
 
 ```js
-const toast = Toast.loading({
+import { showLoadingToast, closeToast } from 'vant';
+
+const toast = showLoadingToast({
   duration: 0,
   forbidClick: true,
   loadingType: 'spinner',
@@ -91,49 +115,41 @@ const timer = setInterval(() => {
     toast.message = `${second} seconds`;
   } else {
     clearInterval(timer);
-    Toast.clear();
+    closeToast();
   }
 }, 1000);
 ```
 
-### Global Method
-
-After registering the Toast component through `app.use`, the `$toast` method will be automatically mounted on all subcomponents of the app.
-
-```js
-export default {
-  mounted() {
-    this.$toast('Some messages');
-  },
-};
-```
-
 ### Singleton
 
 Toast use singleton mode by default, if you need to pop multiple Toast at the same time, you can refer to the following example:
 
 ```js
-Toast.allowMultiple();
+import { showToast, showSuccessToast, allowMultipleToast } from 'vant';
 
-const toast1 = Toast('First Toast');
+allowMultipleToast();
-const toast2 = Toast.success('Second Toast');
 
-toast1.clear();
+const toast1 = showToast('First Toast');
-toast2.clear();
+const toast2 = showSuccessToast('Second Toast');
+
+toast1.close();
+toast2.close();
 ```
 
 ### Set Default Options
 
-The Toast default configuration can be globally modified with the `Toast.setDefaultOptions` function.
+The Toast default configuration can be globally modified with the `setToastDefaultOptions` function.
 
 ```js
-Toast.setDefaultOptions({ duration: 2000 });
+import { setToastDefaultOptions, resetToastDefaultOptions } from 'vant';
 
-Toast.setDefaultOptions('loading', { forbidClick: true });
+setToastDefaultOptions({ duration: 2000 });
 
-Toast.resetDefaultOptions();
+setToastDefaultOptions('loading', { forbidClick: true });
 
-Toast.resetDefaultOptions('loading');
+resetToastDefaultOptions();
+
+resetToastDefaultOptions('loading');
 ```
 
 ## API
@@ -142,14 +158,14 @@ Toast.resetDefaultOptions('loading');
 
 | Methods | Attribute | Return value | Description |
 | --- | --- | --- | --- |
-| Toast | `options \| message` | toast instance | Show toast |
+| showToast | `options \| message` | toast instance | Show toast |
-| Toast.loading | `options \| message` | toast instance | Show loading toast |
+| showLoadingToast | `options \| message` | toast instance | Show loading toast |
-| Toast.success | `options \| message` | toast instance | Show success toast |
+| showSuccessToast | `options \| message` | toast instance | Show success toast |
-| Toast.fail | `options \| message` | toast instance | Show fail toast |
+| showFailToast | `options \| message` | toast instance | Show fail toast |
-| Toast.clear | `clearAll: boolean` | `void` | Close toast |
+| closeToast | `closeAll: boolean` | `void` | Close toast |
-| Toast.allowMultiple | - | `void` | Allow multiple toast at the same time |
+| allowMultipleToast | - | `void` | Allow multiple toast at the same time |
-| Toast.setDefaultOptions | `type \| options` | `void` | Set default options of all toasts |
+| setToastDefaultOptions | `type \| options` | `void` | Set default options of all toasts |
-| Toast.resetDefaultOptions | `type` | `void` | Reset default options of all toasts |
+| resetToastDefaultOptions | `type` | `void` | Reset default options of all toasts |
 
 ### Options
 

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

@@ -16,20 +16,36 @@ const app = createApp();
 app.use(Toast);
 ```
 
+### 函数调用
+
+为了便于使用 `Toast`，Vant 提供了一系列辅助函数，通过辅助函数可以快速唤起全局的 Toast 组件。
+
+比如使用 `showToast` 函数，调用后会直接在页面中渲染对应的轻提示。
+
+```js
+import { showToast } from 'vant';
+
+showToast('提示内容');
+```
+
 ## 代码演示
 
 ### 文字提示
 
 ```js
-Toast('提示内容');
+import { showToast } from 'vant';
+
+showToast('提示内容');
 ```
 
 ### 加载提示
 
-使用 `Toast.loading` 方法展示加载提示，通过 `forbidClick` 属性可以禁用背景点击。
+使用 `showLoadingToast` 方法展示加载提示，通过 `forbidClick` 选项可以禁用背景点击。
 
 ```js
-Toast.loading({
+import { showLoadingToast } from 'vant';
+
+showLoadingToast({
   message: '加载中...',
   forbidClick: true,
 });
@@ -37,11 +53,13 @@ Toast.loading({
 
 ### 成功/失败提示
 
-使用 `Toast.success` 方法展示成功提示，使用 `Toast.fail` 方法展示失败提示。
+使用 `showSuccessToast` 方法展示成功提示，使用 `showFailToast` 方法展示失败提示。
 
 ```js
-Toast.success('成功文案');
+import { showSuccessToast, showFailToast } from 'vant';
-Toast.fail('失败文案');
+
+showSuccessToast('成功文案');
+showFailToast('失败文案');
 ```
 
 ### 自定义图标
@@ -49,12 +67,14 @@ Toast.fail('失败文案');
 通过 `icon` 选项可以自定义图标，支持传入图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props)。
 
 ```js
-Toast({
+import { showToast } from 'vant';
+
+showToast({
   message: '自定义图标',
   icon: 'like-o',
 });
 
-Toast({
+showToast({
   message: '自定义图片',
   icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
 });
@@ -63,7 +83,9 @@ Toast({
 通过`loadingType` 属性可以自定义加载图标类型。
 
 ```js
-Toast.loading({
+import { showLoadingToast } from 'vant';
+
+showLoadingToast({
   message: '加载中...',
   forbidClick: true,
   loadingType: 'spinner',
@@ -75,12 +97,14 @@ Toast.loading({
 Toast 默认渲染在屏幕正中位置，通过 `position` 属性可以控制 Toast 展示的位置。
 
 ```js
-Toast({
+import { showToast } from 'vant';
+
+showToast({
   message: '顶部展示',
   position: 'top',
 });
 
-Toast({
+showToast({
   message: '底部展示',
   position: 'bottom',
 });
@@ -91,7 +115,9 @@ Toast({
 执行 Toast 方法时会返回对应的 Toast 实例，通过修改实例上的 `message` 属性可以实现动态更新提示的效果。
 
 ```js
-const toast = Toast.loading({
+import { showLoadingToast, closeToast } from 'vant';
+
+const toast = showLoadingToast({
   duration: 0,
   forbidClick: true,
   message: '倒计时 3 秒',
@@ -104,23 +130,11 @@ const timer = setInterval(() => {
     toast.message = `倒计时 ${second} 秒`;
   } else {
     clearInterval(timer);
-    Toast.clear();
+    closeToast();
   }
 }, 1000);
 ```
 
-### 全局方法
-
-通过 `app.use` 全局注册 Toast 组件后，会自动在 app 的所有子组件上挂载 `$toast` 方法，便于在组件内调用。
-
-```js
-export default {
-  mounted() {
-    this.$toast('提示文案');
-  },
-};
-```
-
 > Tips: 由于 setup 选项中无法访问 this，因此不能使用上述方式，请通过 import 引入。
 
 ### 单例模式
@@ -128,27 +142,31 @@ export default {
 Toast 默认采用单例模式，即同一时间只会存在一个 Toast，如果需要在同一时间弹出多个 Toast，可以参考下面的示例：
 
 ```js
-Toast.allowMultiple();
+import { showToast, showSuccessToast, allowMultipleToast } from 'vant';
 
-const toast1 = Toast('第一个 Toast');
+allowMultipleToast();
-const toast2 = Toast.success('第二个 Toast');
 
-toast1.clear();
+const toast1 = showToast('第一个 Toast');
-toast2.clear();
+const toast2 = showSuccessToast('第二个 Toast');
+
+toast1.close();
+toast2.close();
 ```
 
 ### 修改默认配置
 
-通过 `Toast.setDefaultOptions` 函数可以全局修改 Toast 的默认配置。
+通过 `setToastDefaultOptions` 函数可以全局修改 `showToast` 等方法的默认配置。
 
 ```js
-Toast.setDefaultOptions({ duration: 2000 });
+import { setToastDefaultOptions, resetToastDefaultOptions } from 'vant';
 
-Toast.setDefaultOptions('loading', { forbidClick: true });
+setToastDefaultOptions({ duration: 2000 });
 
-Toast.resetDefaultOptions();
+setToastDefaultOptions('loading', { forbidClick: true });
 
-Toast.resetDefaultOptions('loading');
+resetToastDefaultOptions();
+
+resetToastDefaultOptions('loading');
 ```
 
 ## API
@@ -157,14 +175,14 @@ Toast.resetDefaultOptions('loading');
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| Toast | 展示提示 | `options \| message` | toast 实例 |
+| showToast | 展示提示 | `options \| message` | toast 实例 |
-| Toast.loading | 展示加载提示 | `options \| message` | toast 实例 |
+| showLoadingToast | 展示加载提示 | `options \| message` | toast 实例 |
-| Toast.success | 展示成功提示 | `options \| message` | toast 实例 |
+| showSuccessToast | 展示成功提示 | `options \| message` | toast 实例 |
-| Toast.fail | 展示失败提示 | `options \| message` | toast 实例 |
+| showFailToast | 展示失败提示 | `options \| message` | toast 实例 |
-| Toast.clear | 关闭提示 | `clearAll: boolean` | `void` |
+| closeToast | 关闭提示 | `closeAll: boolean` | `void` |
-| Toast.allowMultiple | 允许同时存在多个 Toast | - | `void` |
+| allowMultipleToast | 允许同时存在多个 Toast | - | `void` |
-| Toast.setDefaultOptions | 修改默认配置，对所有 Toast 生效。<br>传入 type 可以修改指定类型的默认配置 | `type \| options` | `void` |
+| setToastDefaultOptions | 修改默认配置，影响所有的 `showToast` 调用。<br>传入 type 可以修改指定类型的默认配置 | `type \| options` | `void` |
-| Toast.resetDefaultOptions | 重置默认配置，对所有 Toast 生效。<br>传入 type 可以重置指定类型的默认配置 | `type` | `void` |
+| resetToastDefaultOptions | 重置默认配置，影响所有的 `showToast` 调用。<br>传入 type 可以重置指定类型的默认配置 | `type` | `void` |
 
 ### ToastOptions 数据结构
 

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

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import VanCell from '../../cell';
 import { cdnURL, useTranslate } from '../../../docs/site';
-import { Toast } from '..';
+import {
+  showToast,
+  closeToast,
+  showFailToast,
+  showSuccessToast,
+  showLoadingToast,
+} from '..';
 import type { LoadingType } from '../../loading';
 
 const t = useTranslate({
@@ -43,52 +49,44 @@ const t = useTranslate({
   },
 });
 
-const showLoadingToast = (loadingType?: LoadingType) => {
+const showLoadingToastWithType = (loadingType?: LoadingType) => {
-  Toast.loading({
+  showLoadingToast({
     forbidClick: true,
     message: t('loading'),
     loadingType,
   });
 };
 
-const showSuccessToast = () => {
-  Toast.success(t('text2'));
-};
-
-const showFailToast = () => {
-  Toast.fail(t('text3'));
-};
-
 const showTopToast = () => {
-  Toast({
+  showToast({
     message: t('positionTop'),
     position: 'top',
   });
 };
 
 const showBottomToast = () => {
-  Toast({
+  showToast({
     message: t('positionBottom'),
     position: 'bottom',
   });
 };
 
 const showIconToast = () => {
-  Toast({
+  showToast({
     message: t('customIcon'),
     icon: 'like-o',
   });
 };
 
 const showImageToast = () => {
-  Toast({
+  showToast({
     message: t('customImage'),
     icon: cdnURL('logo.png'),
   });
 };
 
-const showCustomizedToast = () => {
+const showCustomToast = () => {
-  const toast = Toast.loading({
+  const toast = showLoadingToast({
     duration: 0,
     forbidClick: true,
     message: t('text4', 3),
@@ -101,7 +99,7 @@ const showCustomizedToast = () => {
       toast.message = t('text4', second);
     } else {
       clearInterval(timer);
-      Toast.clear();
+      closeToast();
     }
   }, 1000);
 };
@@ -109,10 +107,18 @@ const showCustomizedToast = () => {
 
 <template>
   <demo-block card :title="t('basicUsage')">
-    <van-cell is-link :title="t('title1')" @click="Toast(t('text'))" />
+    <van-cell is-link :title="t('title1')" @click="showToast(t('text'))" />
-    <van-cell is-link :title="t('title2')" @click="showLoadingToast()" />
+    <van-cell
-    <van-cell is-link :title="t('success')" @click="showSuccessToast" />
+      is-link
-    <van-cell is-link :title="t('fail')" @click="showFailToast" />
+      :title="t('title2')"
+      @click="showLoadingToastWithType()"
+    />
+    <van-cell
+      is-link
+      :title="t('success')"
+      @click="showSuccessToast(t('text2'))"
+    />
+    <van-cell is-link :title="t('fail')" @click="showFailToast(t('text3'))" />
   </demo-block>
 
   <demo-block card :title="t('customIcon')">
@@ -121,7 +127,7 @@ const showCustomizedToast = () => {
     <van-cell
       is-link
       :title="t('loadingType')"
-      @click="showLoadingToast('spinner')"
+      @click="showLoadingToastWithType('spinner')"
     />
   </demo-block>
 
@@ -131,10 +137,6 @@ const showCustomizedToast = () => {
   </demo-block>
 
   <demo-block card :title="t('updateMessage')">
-    <van-cell
+    <van-cell is-link :title="t('updateMessage')" @click="showCustomToast" />
-      is-link
-      :title="t('updateMessage')"
-      @click="showCustomizedToast"
-    />
   </demo-block>
 </template>

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

@@ -1,5 +1,5 @@
-import { ref, watch, getCurrentInstance, type App } from 'vue';
+import { ref, watch, getCurrentInstance } from 'vue';
-import { extend, isObject, inBrowser, withInstall } from '../utils';
+import { extend, isObject, inBrowser } from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
 import VanToast from './Toast';
 import type { ToastType, ToastOptions, ToastWrapperInstance } from './types';
@@ -71,7 +71,7 @@ function createInstance() {
 
       return {
         open,
-        clear: close,
+        close,
         message,
       };
     },
@@ -89,7 +89,7 @@ function getInstance() {
   return queue[queue.length - 1];
 }
 
-function Toast(options: string | ToastOptions = {}) {
+export function showToast(options: string | ToastOptions = {}) {
   if (!inBrowser) {
     return {} as ToastWrapperInstance;
   }
@@ -110,30 +110,33 @@ function Toast(options: string | ToastOptions = {}) {
 }
 
 const createMethod = (type: ToastType) => (options: string | ToastOptions) =>
-  Toast(extend({ type }, parseOptions(options)));
+  showToast(extend({ type }, parseOptions(options)));
 
-Toast.loading = createMethod('loading');
+export const showLoadingToast = createMethod('loading');
-Toast.success = createMethod('success');
+export const showSuccessToast = createMethod('success');
-Toast.fail = createMethod('fail');
+export const showFailToast = createMethod('fail');
 
-Toast.clear = (all?: boolean) => {
+export const closeToast = (all?: boolean) => {
   if (queue.length) {
     if (all) {
       queue.forEach((toast) => {
-        toast.clear();
+        toast.close();
       });
       queue = [];
     } else if (!allowMultiple) {
-      queue[0].clear();
+      queue[0].close();
     } else {
-      queue.shift()?.clear();
+      queue.shift()?.close();
     }
   }
 };
 
-function setDefaultOptions(options: ToastOptions): void;
+export function setToastDefaultOptions(options: ToastOptions): void;
-function setDefaultOptions(type: ToastType, options: ToastOptions): void;
+export function setToastDefaultOptions(
-function setDefaultOptions(
+  type: ToastType,
+  options: ToastOptions
+): void;
+export function setToastDefaultOptions(
   type: ToastType | ToastOptions,
   options?: ToastOptions
 ) {
@@ -144,9 +147,7 @@ function setDefaultOptions(
   }
 }
 
-Toast.setDefaultOptions = setDefaultOptions;
+export const resetToastDefaultOptions = (type?: ToastType) => {
-
-Toast.resetDefaultOptions = (type?: ToastType) => {
   if (typeof type === 'string') {
     defaultOptionsMap.delete(type);
   } else {
@@ -155,13 +156,6 @@ Toast.resetDefaultOptions = (type?: ToastType) => {
   }
 };
 
-Toast.allowMultiple = (value = true) => {
+export const allowMultipleToast = (value = true) => {
   allowMultiple = value;
 };
-
-Toast.install = (app: App) => {
-  app.use(withInstall(VanToast));
-  app.config.globalProperties.$toast = Toast;
-};
-
-export { Toast };

packages/vant/src/toast/index.ts

@@ -1,6 +1,18 @@
-import { Toast } from './function-call';
+import { withInstall } from '../utils';
+import _Toast from './Toast';
 
+export const Toast = withInstall(_Toast);
 export default Toast;
-export { Toast };
+export {
+  showToast,
+  closeToast,
+  showFailToast,
+  showLoadingToast,
+  showSuccessToast,
+  allowMultipleToast,
+  setToastDefaultOptions,
+  resetToastDefaultOptions,
+} from './function-call';
+
 export type { ToastProps } from './Toast';
 export type { ToastType, ToastOptions, ToastPosition } from './types';

packages/vant/src/toast/test/function.spec.ts

@@ -1,11 +1,17 @@
-import { createApp } from 'vue';
 import { later } from '../../../test';
-import { Toast } from '../function-call';
+import {
-import ToastComponent from '../Toast';
+  showToast,
+  closeToast,
+  showLoadingToast,
+  allowMultipleToast,
+  showSuccessToast,
+  resetToastDefaultOptions,
+  setToastDefaultOptions,
+} from '../function-call';
 
 test('toast disappeared after duration', async () => {
   const onClose = jest.fn();
-  Toast({
+  showToast({
     duration: 10,
     onClose,
   });
@@ -16,7 +22,7 @@ test('toast disappeared after duration', async () => {
 });
 
 test('show loading toast', async () => {
-  Toast.loading({ className: 'loading-toast' });
+  showLoadingToast({ className: 'loading-toast' });
 
   await later();
   expect(
@@ -25,7 +31,7 @@ test('show loading toast', async () => {
 });
 
 test('show html toast', async () => {
-  Toast({
+  showToast({
     type: 'html',
     className: 'html-toast',
     message: '<div>Message</div>',
@@ -39,14 +45,14 @@ test('show html toast', async () => {
 });
 
 test('icon prop', async () => {
-  Toast({ icon: 'star-o' });
+  showToast({ icon: 'star-o' });
 
   await later();
   expect(document.querySelector('.van-icon-star-o')).toBeTruthy();
 });
 
 test('icon-prefix prop', async () => {
-  Toast({
+  showToast({
     icon: 'star-o',
     iconPrefix: 'my-icon',
   });
@@ -60,117 +66,111 @@ test('clear toast', async () => {
   const onClose2 = jest.fn();
   const onClose3 = jest.fn();
 
-  Toast({ onClose: onClose1 });
+  showToast({ onClose: onClose1 });
 
   await later();
   expect(onClose1).toBeCalledTimes(0);
-  await Toast.clear();
+  await closeToast();
   expect(onClose1).toBeCalledTimes(1);
 
-  Toast.allowMultiple();
+  allowMultipleToast();
 
-  Toast({ onClose: onClose2 });
+  showToast({ onClose: onClose2 });
   await later();
 
-  Toast({ onClose: onClose3 });
+  showToast({ onClose: onClose3 });
   await later();
 
-  await Toast.clear(true);
+  await closeToast(true);
 
   expect(onClose2).toBeCalledTimes(1);
   expect(onClose3).toBeCalledTimes(1);
-  Toast.allowMultiple(false);
+  allowMultipleToast(false);
 });
 
 test('clear multiple toast', async () => {
-  Toast.allowMultiple();
+  allowMultipleToast();
-  Toast.clear(true);
+  closeToast(true);
 
   const onClose1 = jest.fn();
   const onClose2 = jest.fn();
 
-  Toast.success({ onClose: onClose1 });
+  showSuccessToast({ onClose: onClose1 });
   await later();
-  Toast.success({ onClose: onClose2 });
+  showSuccessToast({ onClose: onClose2 });
   await later();
-  await Toast.clear();
+  await closeToast();
   expect(onClose1).toHaveBeenCalledTimes(1);
   expect(onClose2).toHaveBeenCalledTimes(0);
-  await Toast.clear();
+  await closeToast();
   expect(onClose2).toHaveBeenCalledTimes(1);
-  Toast.allowMultiple(false);
+  allowMultipleToast(false);
 });
 
 test('remove toast DOM when cleared in multiple mode', async () => {
-  Toast.allowMultiple();
+  allowMultipleToast();
-  Toast.clear(true);
+  closeToast(true);
-  const toast = Toast({ className: 'remove-toast' });
+  const toast = showToast({ className: 'remove-toast' });
   await later();
 
-  await toast.clear();
+  await toast.close();
   await later(100);
   expect(document.querySelector('.remove-toast')).toBeNull();
-  Toast.allowMultiple(false);
+  allowMultipleToast(false);
 });
 
 test('set default options', async () => {
   const className = 'my-toast';
-  Toast.setDefaultOptions({ className });
+  setToastDefaultOptions({ className });
-  Toast();
+  showToast();
   await later();
   expect(document.querySelector('.my-toast')).toBeTruthy();
 
-  Toast.resetDefaultOptions();
+  resetToastDefaultOptions();
-  Toast();
+  showToast();
   await later();
   expect(document.querySelector('.my-toast')).toBeFalsy();
 });
 
 test('set default options by type', async () => {
   const className = 'my-toast';
-  Toast.setDefaultOptions('loading', { className });
+  setToastDefaultOptions('loading', { className });
 
-  Toast.loading('');
+  showLoadingToast('');
   await later();
   expect(document.querySelector('.my-toast')).toBeTruthy();
 
-  Toast.success('');
+  showSuccessToast('');
   await later();
   expect(document.querySelector('.my-toast')).toBeFalsy();
 
-  Toast.resetDefaultOptions();
+  resetToastDefaultOptions();
-  Toast.loading('');
+  showLoadingToast('');
   await later();
   expect(document.querySelector('.my-toast')).toBeFalsy();
 });
 
 test('toast duration 0', async () => {
-  Toast.allowMultiple();
+  allowMultipleToast();
   const onClose = jest.fn();
-  Toast({ duration: 0, onClose });
+  showToast({ duration: 0, onClose });
 
   await later(2100);
   expect(onClose).toHaveBeenCalledTimes(0);
-  Toast.allowMultiple(false);
+  allowMultipleToast(false);
 });
 
 test('should trigger onClose callback after closed', async () => {
-  Toast.allowMultiple();
+  allowMultipleToast();
   const onClose = jest.fn();
-  const toast = Toast({ onClose });
+  const toast = showToast({ onClose });
 
   await later();
-  await toast.clear();
+  await toast.close();
   expect(onClose).toHaveBeenCalledTimes(1);
 
   // onClose should only be called once
-  await toast.clear();
+  await toast.close();
   expect(onClose).toHaveBeenCalledTimes(1);
-  Toast.allowMultiple(false);
+  allowMultipleToast(false);
-});
-
-test('should register component to app', () => {
-  const app = createApp(document.body);
-  app.use(Toast);
-  expect(app.component(ToastComponent.name)).toBeTruthy();
 });

packages/vant/src/toast/types.ts

@@ -1,4 +1,3 @@
-import { Toast } from './function-call';
 import type { ComponentPublicInstance, TeleportProps } from 'vue';
 import type { LoadingType } from '../loading';
 import type { Numeric } from '../utils';
@@ -29,16 +28,10 @@ export type ToastOptions = {
   closeOnClickOverlay?: boolean;
 };
 
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    $toast: typeof Toast;
-  }
-}
-
 export type ToastWrapperInstance = ComponentPublicInstance<
   { message: Numeric },
   {
-    clear: () => void;
+    close: () => void;
     /**
      * @private
      */

packages/vant/src/uploader/README.md

@@ -130,13 +130,13 @@ export default {
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const onOversize = (file) => {
       console.log(file);
-      Toast('File size cannot exceed 500kb');
+      showToast('File size cannot exceed 500kb');
     };
 
     return {
@@ -153,7 +153,7 @@ If you need to make different size limits for different types of files, you can
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -224,14 +224,14 @@ You can set the width and height separately.
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     // 返回布尔值
     const beforeRead = (file) => {
       if (file.type !== 'image/jpeg') {
-        Toast('Please upload an image in jpg format');
+        showToast('Please upload an image in jpg format');
         return false;
       }
       return true;
@@ -241,7 +241,7 @@ export default {
     const asyncBeforeRead = (file) =>
       new Promise((resolve, reject) => {
         if (file.type !== 'image/jpeg') {
-          Toast('Please upload an image in jpg format');
+          showToast('Please upload an image in jpg format');
           reject();
         } else {
           const img = new File(['foo'], 'bar.jpg', {
@@ -275,7 +275,7 @@ Use `disabled` prop to disable uploader.
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -284,7 +284,9 @@ export default {
         url: 'https://fastly.jsdelivr.net/npm/@vant/assets/sand.jpeg',
         deletable: true,
         beforeDelete: () => {
-          Toast('Customize the events and styles of a single preview image');
+          showToast(
+            'Customize the events and styles of a single preview image'
+          );
         },
       },
       {

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

@@ -143,13 +143,13 @@ export default {
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     const onOversize = (file) => {
       console.log(file);
-      Toast('文件大小不能超过 500kb');
+      showToast('文件大小不能超过 500kb');
     };
 
     return {
@@ -166,7 +166,7 @@ export default {
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -243,14 +243,14 @@ export default {
 ```
 
 ```js
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
     // 返回布尔值
     const beforeRead = (file) => {
       if (file.type !== 'image/jpeg') {
-        Toast('请上传 jpg 格式图片');
+        showToast('请上传 jpg 格式图片');
         return false;
       }
       return true;
@@ -260,7 +260,7 @@ export default {
     const asyncBeforeRead = (file) =>
       new Promise((resolve, reject) => {
         if (file.type !== 'image/jpeg') {
-          Toast('请上传 jpg 格式图片');
+          showToast('请上传 jpg 格式图片');
           reject();
         } else {
           const img = new File(['foo'], 'bar.jpg', {
@@ -296,7 +296,7 @@ export default {
 
 ```js
 import { ref } from 'vue';
-import { Toast } from 'vant';
+import { showToast } from 'vant';
 
 export default {
   setup() {
@@ -305,7 +305,7 @@ export default {
         url: 'https://fastly.jsdelivr.net/npm/@vant/assets/sand.jpeg',
         deletable: true,
         beforeDelete: () => {
-          Toast('删除前置处理');
+          showToast('删除前置处理');
         },
       },
       {

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

@@ -4,7 +4,7 @@ import VanButton from '../../button';
 import { ref } from 'vue';
 import { cdnURL, useTranslate } from '../../../docs/site';
 import { UploaderFileListItem } from '../types';
-import { Toast } from '../../toast';
+import { showToast } from '../../toast';
 
 const t = useTranslate({
   'zh-CN': {
@@ -63,7 +63,7 @@ const fileList5 = ref<UploaderFileListItem[]>([
     url: cdnURL('sand.jpeg'),
     deletable: true,
     beforeDelete: () => {
-      Toast(t('deleteMessage'));
+      showToast(t('deleteMessage'));
     },
   },
   {
@@ -105,7 +105,7 @@ const beforeRead = (file: File | File[]) => {
     return true;
   }
   if (file.type !== 'image/jpeg') {
-    Toast(t('invalidType'));
+    showToast(t('invalidType'));
     return false;
   }
   return true;
@@ -140,7 +140,7 @@ const afterReadFailed = (
 
 const onOversize = (file: UploaderFileListItem, detail: unknown) => {
   console.log(file, detail);
-  Toast(t('overSizeTip'));
+  showToast(t('overSizeTip'));
 };
 </script>