Vant 的 Toast 是一个轻量级的提示组件,用于在页面中显示一些短暂的提示信息。以下是一个简单的使用示例:
<template>
  <div>
    <van-button @click="showToast">显示轻提示</van-button>
  </div>
</template>

<script>
export default {
  methods: {
    showToast() {
      // 显示文本提示
      this.$toast('这是一条提示信息');

      // 或者显示加载中提示
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true, // 是否禁止背景点击
        duration: 0 // 设置为 0 表示不自动关闭,需要手动调用 close 方法关闭
      });

      // 两秒后关闭加载中提示
      setTimeout(() => {
        this.$toast.clear();
      }, 2000);
    }
  }
};
</script>

在上面的例子中,通过点击按钮触发 showToast 方法,然后使用 this.$toast 方法显示文本提示或加载中提示。this.$toast 方法支持多种类型的提示,比如文本提示、成功提示、加载中提示等。

确保你已经正确引入了 Vant 组件库,并按照其文档进行了配置。


转载请注明出处:http://www.zyzy.cn/article/detail/5676/Vant