<template>
<div>
<van-nav-bar title="登录" left-text="返回" right-text="登录" />
<div>
<!-- @自定义事件 -->
<!-- :动态属性 -->
<van-form @submit="onSubmit">
<van-field
v-model="user.mobile"
name="mobile"
required
label="手机号"
placeholder="请输入11位手机号"
:rules="[
{
required: true,
message: '请填写正确的手机号',
pattern: /^1[3-9]\d{9}$/,
},
]"
/>
<van-field
v-model="user.code"
type="password"
name="code"
required
label="密码"
placeholder="请输入6位密码"
:rules="[
{ required: true, message: '请填写正确的密码', pattern: /^\d{6}$/ },
]"
/>
<div style="margin: 16px">
<van-button
round
block
type="info"
native-type="submit"
:disabled="isLoading"
:loading="isLoading"
loading-text="正在登录ing..."
>登录</van-button
>
</div>
</van-form>
</div>
</div>
</template>
<script>
import { Notify } from "vant";
Notify("通知内容");
import { loginAPI } from "../../api/index";
export default {
data() {
return {
user: {
mobile: "13888888888", // 手机号
code: "246810", // 验证码(密码-必须是246810后台规定s的, 无论手机号是什么)
},
isLoading: false, // 登录按钮-加载状态
};
},
methods: {
onSubmit(values) {
console.log("submit", values);
// 状态设置为true
this.isLoading = true
// 调用接口
try {
const res = loginAPI(this.user);
console.log(res);
// 成功通知
Notify({ type: "success", message: "登陆成功" });
} catch (error) {
// 危险通知
Notify({ type: "danger", message: "账号或者密码错误" });
}
// 网络请求完成无论成功/报错,都把状态关掉
this.isLoading = false;
},
},
};
</script>
<style scoped lang="less"></style>
为什么这个loading不加载,把网速调慢也不出来
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
2条回答 默认 最新
- 崽崽的谷雨 2022-04-21 19:37关注
先确定 isLoading 状态是不是 对 ,写死 为true 看看显示与否 。显示 就说明代码没问题 。不显示说明 配置的有问题 ,建议看看 文档案例
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 多电路系统共用电源的串扰问题
- ¥15 slam rangenet++配置
- ¥15 有没有研究水声通信方面的帮我改俩matlab代码
- ¥15 对于相关问题的求解与代码
- ¥15 ubuntu子系统密码忘记
- ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
- ¥15 保护模式-系统加载-段寄存器
- ¥15 电脑桌面设定一个区域禁止鼠标操作
- ¥15 求NPF226060磁芯的详细资料
- ¥15 使用R语言marginaleffects包进行边际效应图绘制