微信小程序原生写法——密码输入框组件

组件展示：

<!-- components/pwdBox/pwdBox.wxml -->
<view class="main-pwd-box main-bg-color" style="top: {{height}}%;">
  <view class="desc-title">{{title}}</view>
  <view class="desc-box" bindtap="pwdInpt">
    <view class="pwd-box">
      <view class="pwd-item" wx:for="{{6}}" wx:key="index">
        {{!dotList[index] ?'':showPwd ? codeList[index] : dotList[index]}}
      </view>
    </view>
    <view class="input-box">
      <input class="weui-input" adjust-position="{{false}}" maxlength="6" focus="{{focusInput}}" value="{{inputCode}}" bindinput="bindKeyInput" bindfocus="bindfocus" bindblur="bindblur" />
    </view>
  </view>
  <view class="ok-btn">
    <text bindtap="_showPwd">{{showPwd?'隐藏密码':'显示密码'}}</text>
  </view>
  <view class="btnBox">
    <button class='myBtn cancel' style="width: 40%;" bindtap="onCancel">取消</button>
    <button class='myBtn checking' style="width: 40%;" bindtap="onChecking">完 成</button>
  </view>
</view>

<!-- components/pwdBox/pwdBox.json-->
{
  "component": true,
  "usingComponents": {}
}

// components/pwdBox/pwdBox.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    pinCode: {
      type: String,
      value: "",
    },
    title: {
      type: String,
      value: "请输入签署密码",
    },
  },
  // 使用公共样式
  options: {
    addGlobalClass: true,
  },
  observers: {
    //监听
    pinCode: function (pinCode) {
      let dotList = [];
      const codeList = pinCode.split("");
      if (pinCode) {
        for (let i = 0; i < codeList.length; i++) {
          dotList.push("●");
        }
        this.setData({
          codeList: pinCode.split(""),
          dotList,
          inputCode: pinCode,
        });
      }
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    showPwd: false, //是否显示密码明文
    focusInput: false, //输入框是否聚焦
    inputCode: "", //密码
    dotList: [], //圆点列表
    codeList: [], //密码列表
    height: 65,//离顶部的高度
  },
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      //输入框获取焦点
      this.setData({
        focusInput: true,
      });
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 密码输入框获取焦点
    pwdInpt() {
      this.setData({
        focusInput: true,
      });
    },
    bindfocus(e) {
    	//判断手机类型，再调整离顶部的高度
      const system = wx.getStorageSync("system");
      const height = system == "Android" ? 30 : 23;
      this.setData({
        height: height,
        focusInput: true,
      });
    },
    // 密码输入框失去焦点
    bindblur() {
      this.setData({
        focusInput: false,
      });
    },
    // 正在输入密码
    bindKeyInput(e) {
      const codeList = e.detail.value.split("");
      let dotList = [];
      for (let index = 0; index < codeList.length; index++) {
        dotList.push("●");
      }
      this.setData({
        inputCode: e.detail.value,
        dotList,
        codeList,
      });
    },
    // 显示密码
    _showPwd() {
      this.setData({
        showPwd: !this.data.showPwd,
        focusInput: true,
      });
    },
    // 验证密码
    onChecking(e) {
      if (this.data.inputCode.length < 6) {
        const that = this;
        wx.showModal({
          title: "提示",
          content: "请输入六位数的密码",
          showCancel: false,
          success(res) {
            if (res.confirm) {
              that.pwdInpt();
            }
          },
        });
      } else {
        this.triggerEvent("onSuccess", this.data.inputCode);
        this.setData({
          showPwd: false,
          focusInput: false,
          height: 65,
        });
      }
    },
    // 取消
    onCancel() {
      this.triggerEvent("onCancel");
      this.setData({
        showPwd: false,
        focusInput: false,
        height: 65,
      });
    },
  },
});

/* components/pwdBox/pwdBox.wxss */
.main-pwd-box {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: 2rpx solid #999;
  border-radius: 30rpx 30rpx 0 0;
}

.desc-title {
  line-height: 100rpx;
  font-size: 30rpx;
  text-align: center;
}
.desc-box {
  position: relative;
  width: 90%;
  margin: 0 auto;
  height: 130rpx;
  margin-bottom: 30rpx;
}
.pwd-box {
  position: absolute;
  top: 0;
  z-index: 999;
  height: 120rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-top: 1rpx solid rgba(153, 153, 153, 0.3);
  border-bottom: 1rpx solid rgba(153, 153, 153, 0.3);
  border-left: 1rpx solid rgba(153, 153, 153, 0.3);
  background-color: #fff;
  overflow: hidden;
  border-radius: 10rpx;
}
.pwd-item {
  height: 100%;
  width: 15%;
  line-height: 120rpx;
  text-align: center;
  font-size: 40rpx;
  border-right: 1rpx solid rgba(153, 153, 153, 0.3);
  z-index: 999;
}
.weui-input {
  height: 120rpx !important;
  color: transparent;
  line-height: 0 !important;
  font-size: 0 !important;
  min-height: 0 !important;
}
.input-box {
  position: absolute;
  opacity: 0;
  z-index: -999;
}

.ok-btn {
  color: #666;
  font-size: 28rpx;
  text-align: center;
  margin-bottom: 20rpx;
}
.btnBox {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.myBtn {
  color: #fff;
  font-weight: normal;
  border-radius: 50rpx;
  margin: 0;
}
.cancel {
  background-color: #fff;
  color: #444;
  border: 2rpx solid #a5a3a3;
}
.checking {
  background-color: #3f74ee;
}

页面使用

//wxml文件内
<!-- 密码组件 -->
<pwdBox pinCode="{{pwdCode}}" wx:if="{{showPwd}}" bind:onSuccess="codeSuccess" bind:onCancel="codeCancel"></pwdBox>

//json文件内
{
  "usingComponents": {
    "pwdBox":"/components/pwdBox/pwdBox"
  },
  "navigationBarTitleText": "详情",
  "navigationBarBackgroundColor": "#3F74EE",
  "backgroundColor": "#fff",
  "navigationBarTextStyle": "white",
  "disableScroll":true//设置为 true 则页面整体不能上下滚动。只在页面配置中有效(用于手机弹器输入器时，位置会移动)
}

//js文件内
// 密码输入回调
  codeSuccess(value) {
    this.setData({
      pwdCode: value.detail,
    });
  },
  // 关闭密码框组件
  codeCancel() {
    this.setData({
      showPwd: false,
    });
  },