<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>
先确定 isLoading 状态是不是 对 ,写死 为true 看看显示与否 。显示 就说明代码没问题 。不显示说明 配置的有问题 ,建议看看 文档案例
第40行 绑定的时候是v-loading不是:loading