之前做过一个微信小程序密码输入框的问题，这里突然想起一个组件，感觉这个也挺常用的，所以特在此记录下，方便使用
这个是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%;
}
主要的是这些，直接复用