主要包含两个功能：

密码可见、不可见
验证码倒计时

html

<van-form>
<van-field
type="tel"
maxlength="11"
v-model="mobile"
name="mobile"
clearable
placeholder="请输入手机号"
@input="val=>mobile=val.replace(/\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);
});
}

效果如图：