<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 ETLCloud 处理json多层级问题
- ¥15 matlab中使用gurobi时报错
- ¥15 这个主板怎么能扩出一两个sata口
- ¥15 不是,这到底错哪儿了😭
- ¥15 2020长安杯与连接网探
- ¥15 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么
- ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
- ¥16 mybatis的代理对象无法通过@Autowired装填
- ¥15 可见光定位matlab仿真
- ¥15 arduino 四自由度机械臂