【vue+vant使用请求loading】【vant如何关闭Toast】

news2024/7/6 19:49:51

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/743332.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【UE4 C++】05-添加组件

在“SCharacter.h”中添加如下代码&#xff0c;从而为“SCharacter”添加弹簧臂和摄像机组件。 在“SCharacter.cpp”中添加如下代码 重新生成解决方案 打开虚幻编辑器&#xff0c;此时在视口中可以看到新添加的摄像机组件&#xff0c;摄像机处于世界坐标原点&#xff0c;并不会…

VisProg解析:根据自然语言指令解决复杂视觉任务

VisProg&#xff1a;根据自然语言指令解决复杂视觉任务 1. 介绍 VisProg 是一种神经符号系统&#xff0c;可以根据自然语言指令解决复杂的组合视觉任务。VisProg 使用 GPT3 的上下文学习能力来生成 Python 程序&#xff0c;然后执行这些程序以获得解决方案和全面且可解释的基…

前端学习——css盒子模型、css3新特性、伪类、布局0711TODO

样式还是得具体使用才能理解&#xff0c;不然会忘记也理解不透彻&#xff1b;还有定位&#xff0c;元素溢出&#xff0c;浮动&#xff0c;布局水平&垂直对齐&#xff1a; css3新特性 1过渡 2 动画 3 2D、3D转换 伪类 三种定位方式 弹性布局/栅格布局

VS+QT+OpenCV+C++多线程多摄像头视频监控采集窗体

程序示例精选 VSQTOpenCV多线程多摄像头视频监控采集窗体 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对<<VSQTOpenCV多线程多摄像头视频监控采集窗体>>编写代码&#xff0c;代码…

【Matlab】智能优化算法_算数优化算法AOA

【Matlab】智能优化算法_算数优化算法AOA 1.背景介绍2.数学模型2.1 初始化阶段2.2 勘探阶段2.3 开采阶段 3.文件结构4.伪代码5.详细代码及注释5.1 AOA.m5.2 func_plot.m5.3 Get_F.m5.4 initialization.m5.5 main.m 6.运行结果7.参考文献 1.背景介绍 算术是数论的基本组成部分&a…

MySQL的表操作DML,DDL

建表 mysql> create table work(-> dept_id int(11) not null comment 部门号,-> staff_id int(11) not null comment 职工号,-> work_time date not null comment 工作时间,-> wage float(8.2) not null comment 工资,-> poli_face varchar(20) not null …

软考A计划-系统集成项目管理工程师-项目成本管理-中

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff…

如何在本地组策略编辑器中启用或禁用剪贴板历史记录

复制粘贴是我们大家都会做的事情,可能一天要做多次。但是,如果你需要一次又一次地复制同样的几件事,你该怎么办?如何在设备上复制内容? 从Windows 10版本17666开始,微软正在解决这一问题,并将剪贴板提升到一个新的水平,只需按下Win+V,你将获得全新的剪贴板体验。 你…

session共享问题和其他常见问题及解决方案

目录 1.shirospringboot中session的共享问题 1.1 如何解决session共享问题 2. 解决前端不支持cookie的效果 2.1.如何把sessionId放入请求头 2.2.重写DefaultWebSessionManager的方法 3.设置前端前置路由守卫 4.如何防止恶意重复登录 5.退出 6.获取当前登录用户的信息 …

jQuery根据数据动态创建表格:列固定,行超出滚动条,绑定td点击事件等

示例如图&#xff0c;代码如下: html: <div class"layui-row" id"avTableulL"><ul></ul></div><div id"avTableulR"><div id"avTableulT"><ul></ul></div><div id"avT…

【华为认证】HCIP-Datacom 2023最新题库

正在备考华为认证的小伙伴应该知道&#xff0c;除了理论知识外&#xff0c;刷题也相当重要&#xff0c;周工这里有一份HCIAHCIP-Datacom带解析的最新题库 点赞留言 即可领取。 1. &#xff08;多选题&#xff09;ISIS的Hello报文主要分为哪几种类型? A.P2P LAN IIH B.…

UnityVR--机械臂场景12-简单流水线应用4

目录 一. 手爪 二. 红外线传感器 三. 工件生成器 四. 总结 上一篇已经实现了机械臂各种动作的控制&#xff0c;本篇实现一下其余的组成部分&#xff0c;比如手爪、传感器和自动放置工件等。 一. 手爪 手爪的模型调整就不多说了&#xff0c;需要设置的是Rigidbody、Collide…

在Visual Studio Code里导出8266固件

1.编辑 .vscode目录下 arduion.json 添加 一个配置项output即输出目录.当然你不设置其它软固件一样会生成,只是就不知道你能不能找到了.我的配置如下 当然这个路径你想写什么 就是什么 . 2. 切换到 arduion的项目文件 xxxx.ino.点击vsc右上的验证 即可在上面设置的目录下找到…

Nginx系列之 一 入门

目录 一、Nginx概述 二、yum安装 三、nginx.conf配置文件详解 3.1 全局块 3.2 events 块 3.3 HTTP 块 四、Nginx 常用命令 五、Nginx代理 4.1 正向代理 4.2 反向代理 六、Nginx的Master-Worker模式 6.1 Master进程的作用是&#xff1f; 6.2 Worker进程的作用是&am…

Layui动态树详解

Layui动态树详解 一、什么是动态树形&#xff1f;二、Layui动态树形基本使用三、动态加载数据4.案列1.实体类2.dao方法3.子实现类4.jsp页面 前言 在前端开发过程中&#xff0c;树形控件是比较常用的控件之一。而Layui框架中&#xff0c;也提供了基于jQuery的树形控件。除了普通…

小程序接口返回errno: 600009 errMsg: “request:fail invalid url “异常问题排查修复记录

小程序封装wxrequest更换域名baseurl后调用接口返回errMsg: "request:fail invalid url "&#xff0c;errno: 600009 控制台输出request的url也是正常的&#xff0c;起初怀疑是没配置域名白名单&#xff0c;但是小程序模拟器勾选了不校验合法域名的&#xff0c;而且…

PWM技术在嵌入式设备运行中的调节应用

PWM&#xff08;脉宽调制&#xff09;是一种通过改变信号的脉冲宽度来控制电压或电流的技术。PWM的等效电压是指将PWM信号转换为相应的直流电压或电流的数值。 在PWM信号中&#xff0c;占空比表示高电平和低电平脉冲宽度的比例。例如&#xff0c;一个占空比为50%的PWM信号意味…

ApiPost - 踩坑指南

1.应用场景 主要用于记录apipost遇到的坑, 以及为遇到的开发者提供参考. 2.学习/操作 1.文档阅读 chatgpt & 其他资料 ApiPost问答-localhost的坑的问题列表 localhost 不能正确解析为本机-ApiPost使用-ApiPost问答 断网了&#xff0c;还能ping通 127.0.0.1 吗&#xff1…

基于STM32的智能花盆系统设计与实现(华为云IOT)

一、设计需求 1.1 设计需求总结 伴随着人们生活水平以及现在科学技术的急速发展,越来越多的人喜欢在家庭栽培一些盆栽植物。可是当代生活节奏过快,导致盆栽大多数都不能得到很好的补充水分和阳光照射,从而导致盆栽的生活周期变短。如何利用现代电子技术设计一种可自动浇水…

Android Java代码与JNI交互 JNI访问Java类方法 (七)

🔥 Android Studio 版本 🔥 🔥 创建包含JNI的类 JNIAccessMethod.java 🔥 package com.cmake.ndk1.jni;import com.cmake.ndk1.model.Animal;public class JNIAccessMethod {static {System.loadLibrary("access-method-lib");}public native void access…