vue+vant使用请求loading

在这里插入图片描述

文档:https://vant-contrib.gitee.io/vant/v2/#/zh-CN/toast

需求:目前需求是在请求中使用toast-loading,请求完成后关闭这个toast;

问题:vant如何关闭toast呢?

解决:

  1. var showLoading = null; //定义toast的变量
  2. // 自定义加载图标
    showLoading = this.$toast.loading({
    message: "登录中...",
    forbidClick: true,
    loadingType: "spinner",
    });
  3. if (showLoading) showLoading.close(); //请求结束关闭加载
<script> 
import { login } from "@/api/api.js";
var showLoading = null; //定义toast的变量
export default {
  methods: {
  //提交请求
    onSubmit() {   
     var loginForm = {
        fn: "loginAction",
        md: "login",
        data: {
          username: this.username,
          password: this.password, 
        },
      };
      // 自定义加载图标
      showLoading = this.$toast.loading({
        message: "登录中...",
        forbidClick: true,
        loadingType: "spinner",
      });
      
      login(loginForm)
        .then((res) => {
        //请求成功 
          if (showLoading) showLoading.close(); //请求结束关闭加载 
        })
        .catch((error) => { 
        //请求失败
          if (showLoading) showLoading.close(); //请求结束关闭加载
          this.$toast.fail(error); 
        });
    },
  },

提示:在项目中使用Toast时要用this.$toast

Logo

前往低代码交流专区

更多推荐