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

组件展示：

<!-- 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!-- components/pwdBox/pwdBox.json-->
{
  "component": true,
  "usingComponents": {}
}
1
2
3
4
5

// 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,
      });
    },
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

/* 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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

页面使用

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

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

//js文件内
// 密码输入回调
  codeSuccess(value) {
    this.setData({
      pwdCode: value.detail,
    });
  },
  // 关闭密码框组件
  codeCancel() {
    this.setData({
      showPwd: false,
    });
  },
1
2
3
4
5
6
7
8
9
10
11
12
13