Vant Toast loading加载使用

Vant Toast显示加载点击提交按钮时，触发请求，请求过程中显示加载弹窗，并且弹窗会遮挡整个页面的事件，不可点击。官网 https://youzan.github.io/vant/#/zh-CN/toast自己做个笔记，感觉加载的用法和element ui有点区别以下使用的CDN方式引入使用，和脚手架使用区别不大。效果图以下是CDN方式引入使用，axios也没有封装。Toast加载的时候，发送

文章共1,060字 · 阅读需要大约4分钟

一键AI生成摘要，助你高效阅读

问答

wgPython

21322人浏览 · 2020-08-20 14:29:17

wgPython · 2020-08-20 14:29:17 发布

Vant Toast显示加载

点击提交按钮时，触发请求，请求过程中显示加载弹窗，并且弹窗会遮挡整个页面的事件，不可点击。

官网 https://youzan.github.io/vant/#/zh-CN/toast

自己做个笔记，感觉加载的用法和element ui有点区别

以下使用的CDN方式引入使用，和脚手架使用区别不大。

效果图
在这里插入图片描述

以下是CDN方式引入使用(所以Toast前面得加上vant, 脚手架方式则不用)，axios也没有封装。Toast加载的时候，发送验证码等按钮点击事件会被阻止。

methods: {
 // 提交表单
 onSubmit(value) {
     const toast = vant.Toast.loading({
         duration: 0, // 持续展示 toast
         forbidClick: true,
         message: "加载中..."
     });
     axios.post("http://127.0.0.1:8010/test").then(function (resp) {
         let res = resp.data;
         if (res.code == 200) {
             console.log("成功-清除加载");
             vant.Toast.clear();
         } else {
             _this.loadBtn = false;
             vant.Toast.fail(res.msg);
         }
     }).catch(function (error) {
         // 请求发送失败
         console.log("请求失败-清除加载");
         vant.Toast.clear();  // 清除加载
         vant.Toast.fail('网络不稳定');
     });
  }
}

使用Python FastAPI 模拟延时的接口

import time
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=['*'],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.post("/test")
async def test_api():
	# 模拟延时
    time.sleep(10)
    return {"code": 200, "msg": "success", "data": "ok"}

if __name__ == "__main__":
    import uvicorn
    # 官方推荐是用命令后启动 uvicorn main:app --host=127.0.0.1 --port=8010 --reload
    uvicorn.run(app='main:app', host="127.0.0.1", port=8010, reload=True, debug=True)