Vant登录表单,密码、验证码
Vant登录表单，密码、验证码主要包含两个功能：
密码可见、不可见
验证码倒计时
html
<van-form>
<van-field
type="tel"
maxlength="11"
v-model="mobile"
name="mobile"
clearable
placeholder="请输⼊⼿机号"
@input="val=>place(/\D/g,'')"
/>
<van-field
v-model="captcha"
:maxlength="6"
name="captcha"
center
clearable
placeholder="请输⼊验证码"
>
倒着输入银行卡密码
<template #button>
<div class="get-code" @click="getCode" v-if="sendAuthCode">{{ btn_text }}</div>
<div class="get-code" v-else>{{time}}s后获取</div>
</template>
</van-field>
<van-field
v-model="password"
:type="password_eye ? 'text' : 'password'"
name="password"
maxlength="16"
clearable
placeholder="请输⼊密码"
:right-icon="password_eye ? visible : invisible"
@click-right-icon="password_fn"
/>
<van-field
v-model="password_reset"
:type="password_eye_reset ? 'text' : 'password'"
name="password_reset"
maxlength="16"
clearable
placeholder="再次输⼊新密码"
:
right-icon="password_eye_reset ? visible : invisible"
@click-right-icon="password_reset_fn"
/>
js
data(){
return{
invisible,
visible,
password_eye: false,
password_eye_reset: false,
password: "",
password_reset: "",
mobile: "",  //⼿机号
captcha: "", //验证码
btn_text :"获取验证码",
sendAuthCode: true,
btn_time: 60,
timer: null,
};
},
methods：{
password_fn(){
this.password_eye =!this.password_eye;
},
password_reset_fn(){
this.password_eye_reset =!this.password_eye_reset; },
api.send(params).then((res)=>{
this.sendAuthCode =false;
this.btn_time= 60;
this.timer = setInterval(()=>{
this.btn_time--;
if(this.btn_time<= 0){
this.sendAuthCode =true;
this.btn_text ="重新获取";
clearInterval(this.timer);
}
}, 1000);
});
}
效果如图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。