vant-ui，toast的用法

### Vant UI 中 Toast 组件的使用方法

#### 导入 Toast 组件
为了在项目中使用 `Toast` 组件，需先通过如下方式将其导入并安装：

import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);

此操作会在 Vue 实例上挂载 `$toast()` 方法以便后续调用[^2]。

#### 调用 Toast 提示框
当需要显示一条简单的消息通知时，可以在任何地方利用已挂载的方法来触发弹窗展示。例如，在某个组件内的生命周期钩子函数里执行如下代码即可实现基本功能：

export default {
  mounted() {
    this.$toast('欢迎来到我的网站');
  },
};

上述例子将在页面加载完成后立即显示出带有指定文字的信息条目[^1]。

#### 自定义样式与配置项
除了传递字符串作为参数外，还支持传入对象形式来自定义更多属性，如位置、持续时间等设置。下面是一个更复杂的实例展示了如何调整这些选项：

this.$toast({
  message: '这是一条自定义样式的提示',
  position: 'bottom', // 设置显示的位置 top / middle / bottom，默认middle
  duration: 800        // 显示的时间(ms)，设为 0 则不会自动关闭
});

此外还可以链式调用来简化语法结构:

this.$toast.loading({ forbidClick: true }).success('成功了!');
// 或者
this.$toast.fail('失败啦...');

以上就是关于 Vant UI 下 `Toast` 插件的基础介绍及其常见应用场景下的具体实践指南[^3]。