通过vant表单,结合v-show使密码框和文本框展示或隐藏输入内容
代码如下:
<van-form @submit="onSubmit">
<van-field
v-model="password"
type="password"
name="密码"
label="密码"
placeholder="请输入密码"
:rules="[{ required: true}]"
right-icon="closed-eye"
v-show="isPassword"
@click-right-icon="showPassword"/>
<van-field
v-model="password"
type="text"
name="密码"
label="密码"
right-icon="eye-o"
v-show="!isPassword"
@click-right-icon="showPassword"/>
</van-form>
data() {
return {
password: ‘‘,
isPassword:true
}
},
methods: {
showPassword(){ // 显示隐藏密码
this.isPassword = !this.isPassword
},
onSubmit(values) {
console.log(‘submit‘, values)
}
}
实现效果如下: