8 changed files with 48 additions and 191 deletions
Unified View
Diff Options
-
30app.js
-
13colorui/components/cu-custom.js
-
78components/password-box/index.js
-
4components/password-box/index.json
-
17components/password-box/index.wxml
-
73components/password-box/index.wxss
-
17pages/mall/shops/index.js
-
7project.config.json
@ -1,78 +0,0 @@ |
|||||
// 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: '' |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
@ -1,4 +0,0 @@ |
|||||
{ |
|
||||
"component": true, |
|
||||
"usingComponents": {} |
|
||||
} |
|
||||
@ -1,17 +0,0 @@ |
|||||
<!--components/password-box.wxml--> |
|
||||
<view class="password-box"> |
|
||||
<view class='password-wrapper'> |
|
||||
<!-- 伪装的input --> |
|
||||
<block wx:for="{{inputLength}}" wx:key="item"> |
|
||||
<!-- 宽高可以由外部指定 --> |
|
||||
<view class="{{item===(inputLength-1)?'password-item-last':'password-item'}}" style="width: {{inputWidth}}; height: {{inputHeight}}" catchtap='_focusInput'> |
|
||||
<!-- 隐藏密码时显示的小圆点【自定义】 --> |
|
||||
<view wx:if="{{!showValue && currentValue.length>=index+1}}" class="hidden"></view> |
|
||||
<!-- 显示密码时显示对应的值 --> |
|
||||
<view wx:if="{{showValue}}" class="show">{{currentValue.length>=index+1?currentValue[index]:''}}</view> |
|
||||
</view> |
|
||||
</block> |
|
||||
</view> |
|
||||
<!-- 隐藏的输入框 --> |
|
||||
<input type="number" password="{{true}}" value="{{currentValue}}" class='hidden-input' maxlength="{{inputLength}}" focus="{{inputFocus}}" bindinput="_setCurrentValue"></input> |
|
||||
</view> |
|
||||
@ -1,73 +0,0 @@ |
|||||
/* components/password-box.wxss */ |
|
||||
.password-box .password-wrapper { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
} |
|
||||
.password-box .password-item { |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
} |
|
||||
.password-box .password-item::after { |
|
||||
display: block; |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
border-left: 2px solid #999; |
|
||||
border-top: 2px solid #999; |
|
||||
border-bottom: 2px solid #999; |
|
||||
border-spacing: 0; |
|
||||
box-sizing: border-box; |
|
||||
width: 200%; |
|
||||
height: 200%; |
|
||||
border-radius: 0rpx; |
|
||||
transform: scale(0.5); |
|
||||
transform-origin: left top; |
|
||||
} |
|
||||
|
|
||||
.password-box .password-item-last { |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
} |
|
||||
.password-box .password-item-last::after { |
|
||||
display: block; |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
border-left: 2px solid #999; |
|
||||
border-top: 2px solid #999; |
|
||||
border-right: 2px solid #999; |
|
||||
border-bottom: 2px solid #999; |
|
||||
border-spacing: 0; |
|
||||
box-sizing: border-box; |
|
||||
width: 200%; |
|
||||
height: 200%; |
|
||||
border-radius: 0rpx; |
|
||||
transform: scale(0.5); |
|
||||
transform-origin: left top; |
|
||||
} |
|
||||
|
|
||||
.password-box .password-item + .password-item { |
|
||||
margin-left: -1rpx; |
|
||||
} |
|
||||
.password-box .password-wrapper .hidden { |
|
||||
width: 36rpx; |
|
||||
height: 36rpx; |
|
||||
border-radius: 50%; |
|
||||
background: #999; |
|
||||
} |
|
||||
.password-box .password-wrapper .show { |
|
||||
color: #333333; |
|
||||
font-size: 48rpx; |
|
||||
} |
|
||||
.password-box .hidden-input { |
|
||||
width: 0; |
|
||||
height: 0; |
|
||||
min-height: 0; |
|
||||
} |
|
||||
Write
Preview
Loading…
Cancel
Save