vant 密码组件bug vant van-field 密码输入框小程序里隐藏、显示密码bug总结

老规矩先上效果图:

vant 输入框组件密码的隐藏与显示功能：

注:

用password属性控制密码的显示与隐藏

不要用type属性，type属性在真机上有时会没有效果

1、当然如果只用type=password 不需要切换显示、隐藏也可以使用。

2、如果用到了密码的显示与隐藏最好还是用 password属性的true 和 false

3、右侧图标的显示用right-icon 属性

然后用 passwordShow 变量控制隐藏（'closed-eye' ）和显示（ 'eye-o'）对应的icon图标。

4、bind:click-icon 点击尾部显示与隐藏图标时触发方法

代码如下：

code:

name="password"

model:value="{{ password }}"

password="{{passwordShow}}"

maxlength="20"

clearable

right-icon="{{ passwordShow ? 'closed-eye' : 'eye-o' }}"

placeholder="请输入密码"

bind:click-icon="onClickIcon"

js代码：

data: {

passwordShow: true

onClickIcon:function() {

console.log('11111111+++')

var that = this

that.setData({

passwordShow: !that.data.passwordShow

})

夸智网