用wepy框架做的一个小程序密码输入框动态修改input的属性。

	自己现在时间比较充裕，最近也想对自己之前的东西一些总结和收纳，帮助自己对于知识的梳理和强化，所以开始写博了。

-----------------------------------------------------------------华丽的分割线------------------------------------------------------------
最近开发了一个小程序的项目，有一个密码输入框一个睁眼闭眼的效果，实质上就是动态改变input的password属性，之前做过，这一次又做一次，所以记录下来，直接上代码。为了便于适用，用的标签也可适用原生小程序写法。

其主要的原理是通过’password=’{{isOldShowPassword}}’'控制password属性的增加和删除

展示实现效果

图标是网上随便找的，自己重新写了一次

wpy页面

html

<template>
  <view>
    <view class="head_input">
      <!-- 输入原来的密码 -->
      <view class="old_pwd">
        <view class="pwd_left">
          <image class="img_input" src="http://img5.imgtn.bdimg.com/it/u=3768748280,1395898927&fm=26&gp=0.jpg" />
          <input class="weui-input" @input="oldInputChange"  value="{{ oldPwd }}" password='{{isOldShowPassword}}' type="text" placeholder="请输入原密码" />
        </view>
        <view hidden="{{oldPwdChange}}" class="pwd_right">
          <image wx:if="{{isOldShowPassword}}" class="img_show" @tap="oldImgChange(1)" src="http://img2.imgtn.bdimg.com/it/u=204976452,4171432626&fm=26&gp=0.jpg" />
          <image wx:if="{{!isOldShowPassword}}" class="keimg_show" @tap="oldImgChange(1)" src="http://img3.imgtn.bdimg.com/it/u=441609135,424878888&fm=26&gp=0.jpg" />
          <image class="img_close" @tap="inputClose(1)" src="http://ico.58pic.com/iconset01/Google-Plus-icons/gif/127908.gif" />
        </view>
      </view>
      <!-- 输入新的密码 -->
      <view class="newOne_pwd">
        <view class="pwd_left">
          <image class="img_input" src="http://img5.imgtn.bdimg.com/it/u=3768748280,1395898927&fm=26&gp=0.jpg" />
          <input class="weui-input" @input="newInputChange" value="{{ newPwd }}" password='{{isNewShowPassword}}' type="text" placeholder="请输入新的密码" />
        </view>
        <view hidden="{{newPwdChange}}" class="pwd_right">
          <image wx:if="{{isNewShowPassword}}" class="img_show" @tap="oldImgChange(2)" src="http://img2.imgtn.bdimg.com/it/u=204976452,4171432626&fm=26&gp=0.jpg" />
          <image wx:if="{{!isNewShowPassword}}" class="keimg_show" @tap="oldImgChange(2)" src="http://img3.imgtn.bdimg.com/it/u=441609135,424878888&fm=26&gp=0.jpg" />
          <image class="img_close" @tap="inputClose(2)" src="http://ico.58pic.com/iconset01/Google-Plus-icons/gif/127908.gif" />
        </view>
      </view>
      <!-- 再次输入新密码 -->
      <view class="newSure_pwd">
        <view class="pwd_left">
          <image class="img_input" src="http://img5.imgtn.bdimg.com/it/u=3768748280,1395898927&fm=26&gp=0.jpg" />
          <input class="weui-input" @input="newTwiceInputChange"  value="{{ newTwicePwd }}" password='{{isNewTwiceShowPassword}}' type="text" placeholder="请再次输入新的密码" />
        </view>
        <view hidden="{{newTwiceChange}}" class="pwd_right">
          <image wx:if="{{isNewTwiceShowPassword}}" class="img_show" @tap="oldImgChange(3)" src="http://img2.imgtn.bdimg.com/it/u=204976452,4171432626&fm=26&gp=0.jpg" />
          <image wx:if="{{!isNewTwiceShowPassword}}" class="keimg_show" @tap="oldImgChange(3)" src="http://img3.imgtn.bdimg.com/it/u=441609135,424878888&fm=26&gp=0.jpg" />
          <image class="img_close" @tap="inputClose(3)" src="http://ico.58pic.com/iconset01/Google-Plus-icons/gif/127908.gif" />
        </view>
      </view>
    </view>
  </view>
</template>

css

<style lang="less" scoped>
  .pwd_makeSure_dialog {
    height: 188rpx;
    line-height: 188rpx;
    text-align: center;
    font-size: 14px;
  }
  .head_input {
    padding: 0 30rpx;
    .old_pwd,
    .newOne_pwd,
    .newSure_pwd {
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #EEE;
      .pwd_left {
        display: flex;
        align-items: center;
        .img_input {
          width: 23rpx;
          height: 24rpx;
        }
        input {
          padding-left: 15rpx;
          margin-left: 17rpx;
          font-size: 12px;
        }
      }
      .pwd_right {
        align-items: center;
        .keimg_show {
          padding: 45rpx 0 30rpx;
          width: 30rpx;
          height: 19rpx;
        }
        .img_show {
          padding: 45rpx 0 30rpx;
          width: 32rpx;
          height: 14rpx;
        }
        .img_close {
          padding: 50rpx 0 28rpx;
          width: 22rpx;
          height: 22rpx;
          margin-left: 30rpx;
        }
      }
    }
  }
</style>

mixins文件夹的js

import wepy from 'wepy'

export default class extends wepy.mixin {
    data = {
        oldPwd: '',
        newPwd: '',
        newTwicePwd: '',
        // 控制眼睛小图标
        oldPwdShow: false,
        newPwdShow: false,
        newTwiceShow: false,
        // 右侧小图标
        oldPwdChange: true,
        newPwdChange: true,
        newTwiceChange: true,
        // 控制密码框
        isOldShowPassword: true,
        isNewShowPassword: true,
        isNewTwiceShowPassword: true
    }
    methods = {
        oldInputChange(e) {
            console.log(e.detail.value)
            if (e.detail.value.trim()) {
                this.oldPwdChange = false
                this.oldPwd = e.detail.value
            } else {
                this.oldPwdChange = true
                this.oldPwd = ''
            }
        },
        newInputChange(e) {
            console.log(e.detail.value)
            if (e.detail.value.trim()) {
                this.newPwdChange = false
                this.newPwd = e.detail.value
            } else {
                this.newPwdChange = true
                this.newPwd = ''
            }
        },
        newTwiceInputChange(e) {
            console.log(e.detail.value)
            if (e.detail.value.trim()) {
                this.newTwiceChange = false
                this.newTwicePwd = e.detail.value
            } else {
                this.newTwiceChange = true
                this.newTwicePwd = ''
            }
        },
        // 清空
        inputClose(i) {
            if (i == 1) {
                this.oldPwd = ''
                this.oldPwdChange = true
                this.isOldShowPassword = true
            } else if (i == 2) {
                this.newPwd = ''
                this.newPwdChange = true
                this.isNewShowPassword = true
            } else if (i == 3) {
                this.newTwicePwd = ''
                this.newTwiceChange = true
                this.isNewTwiceShowPassword = true
            }
        },
        // 控制密码输入框
        oldImgChange(i) {
            if (i == 1) {
                this.isOldShowPassword = !this.isOldShowPassword;
            } else if (i == 2) {
                this.isNewShowPassword = !this.isNewShowPassword;
            } else if (i == 3) {
                this.isNewTwiceShowPassword = !this.isNewTwiceShowPassword;
            }
        }
    }

    onShow() {}

    onLoad() {}
}

个人水平有限，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！