vue移动端项目vant组件库之toast

vue移动端项目vant组件库之toast

具体属性

<template>
  <div>
    <van-button type="primary" @click="handler1">基础提示</van-button>
    <van-button type="primary" @click="handler2">加载提示</van-button>
    <van-button type="primary" @click="handler3">成功提示</van-button>
    <van-button type="primary" @click="handler4">失败提示</van-button>
    <van-button type="primary" @click="handler5">自定义图标</van-button>
    <van-button type="primary" @click="handler6">动态更新</van-button>
    <!-- 自定义位置 position 一般居中 不做设置-->
  </div>
</template>

<script>
import {
    
     Toast, Button } from "vant";
export default {
    
    
  components: {
    
    
    vanButton: Button,
  },
  created() {
    
    },
  methods: {
    
    
    handler1() {
    
    
      Toast("基础提示");
    },
    handler2() {
    
    
      Toast.loading({
    
    
        message: "加载中...",
        forbidClick: true,
      });
    },
    handler3() {
    
    
      Toast.success("成功提示");
    },
    handler4() {
    
    
      Toast.fail("失败提示");
    },
    handler5() {
    
    
      Toast({
    
    
        message: "自定义图标",
        icon: "like-o",
        // icon: 'https://img01.yzcdn.cn/vant/logo.png',
      });
    },
    handler6() {
    
    
      const toast = Toast.loading({
    
    
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "倒计时 3 秒",
      });

      let second = 3;
      const timer = setInterval(() => {
    
    
        second--;
        if (second) {
    
    
          toast.message = `倒计时 ${
    
    second} 秒`;
        } else {
    
    
          clearInterval(timer);
          // 手动清除 Toast
          Toast.clear();
        }
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

效果