【微信小程序】密码可见与不可见

微信小程序】密码可见与不可见

图片这里先准备好

眼睛使用的是 iconfont 阿里矢量图标库的内容
链接：https://www.iconfont.cn/search/index?searchType=icon&q=%E7%9C%BC%E7%9D%9B&page=2

login.xml

<view class='parentstyle '>
    <view class='centerStyle'>
      <input bindinput="inputPwd" password='{{passwordType}}' maxlength="20" placeholder="请输入密码" style='font-size:34rpx'></input>
      <image src='{{defaultType? "../pictures/eyeClose.png": "../pictures/eyeOpen.png"}}' class='imageStyle' bindtap='eyeStatus'></image>
    </view>
    <view class='line_style'></view>
  </view>

.parentstyle {
     margin-left: 38rpx;
     margin-top: 30rpx;
     margin-right: 38rpx;
   }
   
   .centerStyle {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
image{
     width: 20px;
     height: 20px;
     margin-right: 20px;
}

Page({
  /**
   * 页面的初始数据
   */
  data: {
    defaultType: true,
    passwordType: true
  },
  eyeStatus: function() {
    if (this.data.defaultType) {
      this.setData({
        passwordType: false,
        defaultType: false,
      })
    } else {
      this.setData({
        passwordType: true,
        defaultType: true,
      })
    }
  },
}）

defaultType：眼睛状态
passwordType：密码可见与否状态