You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
1.8 KiB
78 lines
1.8 KiB
// components/password-box.js
|
|
Component({
|
|
/**
|
|
* 组件的属性列表
|
|
*/
|
|
properties: {
|
|
// 输入框的数量
|
|
inputLength: {
|
|
type: Number,
|
|
value: 6
|
|
},
|
|
// 单个输入框的宽度
|
|
inputWidth: {
|
|
type: String,
|
|
value: '100rpx'
|
|
},
|
|
inputHeight: {
|
|
type: String,
|
|
value: '100rpx'
|
|
},
|
|
// 是否显示输入的值，默认隐藏
|
|
showValue: {
|
|
type: Boolean,
|
|
value: false
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 组件的初始数据
|
|
*/
|
|
data: {
|
|
// input是否获取焦点
|
|
inputFocus: false,
|
|
// 初始input值为空
|
|
currentValue: ''
|
|
},
|
|
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
methods: {
|
|
// 设置当前的值
|
|
_setCurrentValue(e) {
|
|
// 在此处判断满6（inputLength）位，把值返回给上级父组件或页面
|
|
let currentValue = e.detail.value
|
|
// 改变时，派发一个事件，如果父组件或页面中需要实时获取改变后的值，可以监听这个事件。
|
|
this.triggerEvent('change', e.detail.value)
|
|
|
|
this.setData({
|
|
currentValue
|
|
})
|
|
if (currentValue.length >= this.data.inputLength) {
|
|
this._complate()
|
|
}
|
|
},
|
|
// 点击伪装的input时，让隐藏的input获得焦点
|
|
_focusInput() {
|
|
this.setData({
|
|
inputFocus: true
|
|
})
|
|
},
|
|
_complate() {
|
|
this.triggerEvent('inputComplate', this.data.currentValue)
|
|
},
|
|
// 提供给外部调用的方法，显示/隐藏密码。接收一个参数，可以显性修改展示的状态。
|
|
toggleValue(state) {
|
|
this.setData({
|
|
showValue: state != undefined ? state : !this.data.showValue
|
|
})
|
|
},
|
|
// 清除input当前的值
|
|
clearCurrentValue() {
|
|
this.setData({
|
|
currentValue: ''
|
|
})
|
|
}
|
|
}
|
|
})
|