diff --git a/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md b/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md index 6f924a237..b6d5ab1c6 100644 --- a/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md +++ b/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` 组件的改动一致： diff --git a/packages/vant/docs/markdown/quickstart.en-US.md b/packages/vant/docs/markdown/quickstart.en-US.md index 9f38280ff..fca3781c3 100644 --- a/packages/vant/docs/markdown/quickstart.en-US.md +++ b/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'); @@ -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'; ``` diff --git a/packages/vant/docs/markdown/quickstart.zh-CN.md b/packages/vant/docs/markdown/quickstart.zh-CN.md index 00826811d..0888589b4 100644 --- a/packages/vant/docs/markdown/quickstart.zh-CN.md +++ b/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'); @@ -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'; ``` diff --git a/packages/vant/src/action-bar/README.md b/packages/vant/src/action-bar/README.md index 742c858c5..653851f55 100644 --- a/packages/vant/src/action-bar/README.md +++ b/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, diff --git a/packages/vant/src/action-bar/README.zh-CN.md b/packages/vant/src/action-bar/README.zh-CN.md index c529e234b..fac207407 100644 --- a/packages/vant/src/action-bar/README.zh-CN.md +++ b/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, diff --git a/packages/vant/src/action-bar/demo/index.vue b/packages/vant/src/action-bar/demo/index.vue index eed313bc9..16c727c47 100644 --- a/packages/vant/src/action-bar/demo/index.vue +++ b/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'));