vant van-field 密码输入框小程序里隐藏、显示密码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:

            <view class="form_label"><van-fieldname="password"model:value="{{ password }}"password="{{passwordShow}}"maxlength="20"clearableright-icon="{{ passwordShow ? 'closed-eye' : 'eye-o' }}"placeholder="请输入密码"bind:click-icon="onClickIcon"></van-field></view>

js代码：

    data: {passwordShow: true},onClickIcon:function() {console.log('11111111+++')var that = thisthat.setData({passwordShow: !that.data.passwordShow})},

这篇关于vant van-field 密码输入框小程序里隐藏、显示密码bug总结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---