之前做過一個微信小程序密碼輸入框的問題，這裏突然想起一個組件，感覺這個也挺常用的，所以特在此記錄下，方便使用
這個是github地址：https://link.jianshu.com/?t=https%3A%2F%2Fgithub.com%2Fevan2020%2Fsix-Input-box
在這裏我就舉個自己使用的例子，下面的是樣式；具體代碼還是看github上的，裏面的源碼可以現用
index.js
Page({
data: {
// 輸入框參數設置
inputData: {
input_value: "", //輸入框的初始內容
value_length: 0, //輸入框密碼位數
isNext: true, //是否有下一步的按鈕
get_focus: true, //輸入框的聚焦狀態
focus_class: true, //輸入框聚焦樣式
value_num: [1, 2, 3, 4, 5, 6], //輸入框格子數
height: "112rpx", //輸入框高度
width: "600rpx", //輸入框寬度
see: true, //是否明文展示
interval: false, //是否顯示間隔格子
}
},
onLoad: function(options) {
},
onShow: function() {},
inputClick(e) {
this.data.inputData.input_value = e.detail
this.setData({
inputData: this.data.inputData
})
},
})
index.wxml
<view class="codeindex">
<view class="code_main">
<view class="input_box">
<paySix bindinputClick="inputClick" input_value="{{inputData.input_value}}" value_length="{{inputData.value_length}}" isNext="{{inputData.isNext}}" get_focus="{{inputData.get_focus}}" focus_class="{{inputData.focus_class}}" value_num="{{inputData.value_num}}"
height="{{inputData.height}}" width="{{inputData.width}}" see="{{inputData.see}}" interval="{{inputData.interval}}">
</paySix>
</view>
</view>
</view>
index.wxss
.codeindex {
width: 100%;
padding: 0 64rpx;
}
.code_main {
margin-top: 24rpx;
font-size: 28rpx;
}
.input_box {
text-align: center;
margin-top: 80rpx;
}
index.json
{
"navigationBarTitleText": "",
"usingComponents": {
"paySix": "/component/sixinput/component",
}
}
組件裏面的東西也修改了，但這個不能上傳文件，有點麻煩，但還是貼出來吧，主要是修改了樣式，
sininput.js
// component.js
Component({
// 組件屬性
properties: {
//輸入框密碼位數
value_length: {
type: Number,
value: 0,
// 監聽輸入框密碼變化
observer: function(newVal, oldVal) {
let that = this;
let input_value = that.data.input_value
that.triggerEvent('valueNow', input_value)
// 當輸入框的值等於6時（發起支付等...）
if (newVal == 6) {
// 設定延時事件處理
setTimeout(function() {
// 引用組件頁面的自定義函數(前一個參數爲函數，後一個爲傳遞給父頁面的值)
that.triggerEvent('valueSix', input_value)
// 當沒有
if (!that.data.isNext) {
// 回到初始樣式
that.setData({
get_focus: false,
value_length: 0,
input_value: ""
});
}
}, 100)
}
}
},
// 是否顯示間隔輸入框
interval: {
type: Boolean,
value: true,
observer: function(newVal, oldVal) {
}
},
// 是否有下一步按鈕（如果有則當輸入6位數字時不自動清空內容）
isNext: {
type: Boolean,
value: false,
observer: function(newVal, oldVal) {
}
},
//輸入框聚焦狀態
get_focus: {
type: Boolean,
value: false,
observer: function(newVal, oldVal) {
}
},
//輸入框初始內容
input_value: {
type: String,
value: "",
observer: function(newVal, oldVal) {
}
},
//輸入框聚焦樣式
focus_class: {
type: Boolean,
value: false,
observer: function(newVal, oldVal) {
}
},
//輸入框格子數
value_num: {
type: Array,
value: [1, 2, 3, 4, 5, 6],
observer: function(newVal, oldVal) {
}
},
//輸入框高度
height: {
type: String,
value: "98rpx",
observer: function(newVal, oldVal) {
}
},
//輸入框寬度
width: {
type: String,
value: "604rpx",
observer: function(newVal, oldVal) {
}
},
//是否明文展示
see: {
type: Boolean,
value: false,
observer: function(newVal, oldVal) {
}
},
},
// 初始化數據
data: {
},
// 組件方法
methods: {
// 獲得焦點時
get_focus() {
let that = this;
that.setData({
focus_class: true
})
},
// 失去焦點時
blur() {
let that = this;
that.setData({
focus_class: false
})
},
// 點擊聚焦
set_focus() {
let that = this;
that.setData({
get_focus: true
})
},
// 獲取輸入框的值
get_value(data) {
let that = this;
// 設置空數組用於明文展現
let val_arr = [];
// 獲取當前輸入框的值
let now_val = data.detail.value
// 遍歷把每個數字加入數組
for (let i = 0; i < 6; i++) {
val_arr.push(now_val.substr(i, 1))
}
// 獲取輸入框值的長度
let value_length = data.detail.value.length;
// 更新數據
that.triggerEvent('inputClick', now_val)
that.setData({
value_length: value_length,
val_arr: val_arr,
input_value: now_val
});
console.log(now_val)
},
}
})
sixinput.wxml
<view class='content'>
<!-- 輸入框（表格） -->
<view class='{{(interval?"pay_number":"pay_number_interval")}} {{focus_class?"get_focus":""}}' catchtap="set_focus" style='width:{{width}};height:{{height}};'>
<view class='{{focus_class?(interval?"get_focus_dot":"get_focus_dot_interval"):(interval?"password_dot":"password_dot_interval")}} {{index==0?"noBorder":""}}' wx:for="{{value_num}}" wx:key="{{index}}">
<view wx:if="{{(value_length==item-1)&&focus_class}}" class="cursor"></view>
<view wx:if="{{value_length>=item}}" class="{{see?'':'dot'}}">{{see?val_arr[index]:""}}</view>
</view>
</view>
<!-- 輸入框（隱藏） -->
<input value="{{input_value}}" focus="{{get_focus}}" maxlength="6" type="number" class='input_container' placeholder="" bindinput="get_value" bindfocus="get_focus" bindblur="blur" />
</view>
sixinput.wxss
/* 支付密碼框 */
.pay_number {
margin: 0 auto;
display: flex;
flex-direction: row;
border: 1px solid #cfd4d3;
/* border-radius:10rpx; */
}
.pay_number_interval {
margin: 0 auto;
display: flex;
flex-direction: row;
/* border-left: 1px solid #cfd4d3; */
/* border:none; */
}
/* 第一個格子輸入框 */
.content .noBorder {
border-left: none;
}
/* 支付密碼框聚焦的時候 */
.get_focus {
border-color: #4782FF;
}
/* 單個格式樣式 */
/* .password_dot {
flex: 1;
border-left: 1px solid #cfd4d3;
display: flex;
align-items: center;
justify-content: center;
} */
.password_dot_interval {
flex: 1;
border-bottom: 1px solid #cfd4d3;
margin-right: 20px;
display: flex;
align-items: center;
justify-content: center;
}
/* 單個格式樣式（聚焦的時候） */
/* .get_focus_dot {
flex: 1;
border-left: 1px solid #f52c72;
display: flex;
align-items: center;
justify-content: center;
} */
.get_focus_dot_interval {
flex: 1;
border-bottom: 1px solid #4782FF;
margin-right: 20px;
display: flex;
align-items: center;
justify-content: center;
}
/* 模擬光標 */
.cursor {
width: 1px;
height: 15px;
background-color: #4782FF;
animation: focus 0.7s infinite;
}
/* 光標動畫 */
@keyframes focus {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* 格式中的點 */
.dot {
width: 10px;
height: 10px;
background-color: #000;
border-radius: 50%;
}
/* 輸入框 */
.input_container {
/* height: 0;
width: 0;
min-height: 0; */
position: relative;
text-indent: -999em;
left: -100%;
}
主要的是這些，直接複用