微信小程序自定义控件数字键盘

叹！

2020 7 28~ 晴 31℃

2020年~活着就是一种幸福~

人生磕磕绊绊20+，前途一片迷茫！年纪大了学习感觉有心无力！随着“鼠年”疫情影响，公司动荡不安，个人动力也仿佛被掏空......

正题！个人外包项目，微信小程序自定义数字键盘！能用，还没详细优化！

数字键盘应用场景

甲方：XX在线吗？你这个数字填写的部分应用的场景能不能不用input,弹出手机键盘很烦啊~挡住下面元素了，用户体验感很不好~

乙方：心里一万头“XXXX”飘过~~~咋搞呢？

甲方：能不能想我H5一样，小程序端也做成自定义的数字键盘（截图飘过来~~）

乙方：哦，好吧！

数字键盘效果

封装

1、mykeyboard.js

// pages/mykeyboard/mykeyboard.js
var app = getApp();
let arrval = [];
let number = '';
Component({externalClasses: ['mykeyboard'],//对外引用资源properties: {//显示键盘isShow: {type: Boolean,value: false,},//键盘按压背景颜色keyBoradBackground:{type:String,value:"#2DA2F1"},//键盘边角大小bordradius:{type:String,value:"5px",},},// 数据集data: {keynumber: '123456789.0X',canclebt: '取消',submitbt: '确定',deletebt: '删除',numberval: [],numbertext: '',},//方法函数methods: {keyboadrTap: function (e) {// console.log(e)let val = e.target.dataset.value; //获取data-vaule值switch (val) {case 'delete':// console.log('删除')arrval.pop();this.setData({numberval: arrval,numbertext: arrval.join(''),})this.triggerEvent('delete');break;case 'cancle':this.triggerEvent('cancle');// console.log('退出')//退出置空键盘数据集arrval = [];this.setData({numbertext:"",})break;case 'submit':// console.log('提交')// console.log(this.data.numbertext);//数字为空不允许点击确定按钮if(this.data.numbertext == ""){wx.showToast({title: '数据为空',})return true;}//正则判断this.triggerEvent('submit',this.data.numbertext);arrval = [];this.setData({numbertext:"",})break;default:// console.log('数字键盘');// console.log(val); arrval.push(val);var arr =  arrval.join('').replace(/^\./g, "").replace(".","#").replace(/\./g,"").replace("#",".").replace("X","*").replace(/\X/g,"").replace("*","x");this.setData({numberval: arrval,numbertext: arr,})this.triggerEvent('inputChange', this.data.numbertext);}},},
});

2、mykeyboard.json

{"component":true,"usingComponents": {}
}

3、mykeyboard.wxml

<view class="keyboard_cotainer" hidden="{{isShow}}"><view class="numval">{{numbertext}} </view><view class="keyboard_num" hover-class="keyboard_click" wx:for="{{keynumber}}" bindtap="keyboadrTap" wx:key="index" data-value="{{item}}" style="border-radius:{{bordradius}}; ">{{item}} </view><view class="deletebt" hover-class="bt_select" bindtap="keyboadrTap" data-value="delete" >{{deletebt}}</view><view class="canclebt" hover-class="bt_select" bindtap="keyboadrTap" data-value="cancle" >{{canclebt}}</view><view class="submitbt" hover-class="bt_select" bindtap="keyboadrTap" data-value="submit" >{{submitbt}}</view>
</view>

4、mykeyboard.wxss


.keyboard_cotainer{position: absolute;bottom: 0px;height: auto;width: 100%;background: rgba(158, 157, 157, 0.466);align-items: center;justify-content: center;
}
.numval{border-radius:5px;margin-bottom: .5px;text-align: center;line-height: 50px;font-weight: 700;height: 50px;width: 100%;background: #fff;font-size: 16px;color: #226bda;
}.keyboard_num{line-height: 50px;margin: .5px;float: left;color: black;font-size: 16px;font-weight: 700;width: 33%;height: 50px;background: #fff;border-radius:5px;text-align: center;
}
/* 点击选中样式 */
.keyboard_click{line-height: 50px;margin: .5px;float: left;color: black;font-size: 16px;font-weight: 300;width: 33%;height: 50px;background: #dddddd;border-radius:5px;text-align: center;
}
.deletebt{border-radius:5px;margin: .5px;color: #fff;font-size: 12px;text-align: center;line-height: 40px;float: left;width: 33%;height: 40px;background: #aaa8a8;
}
.canclebt{border-radius:5px;margin: .5px;color: #fff;font-size: 12px;text-align: center;line-height: 40px;float: left;width: 33%;height: 40px;background: #e98c8c;
}
.submitbt{border-radius:5px;margin: .5px;color: #fff;font-size: 12px;text-align: center;line-height: 40px;float: left;width: 33%;height: 40px;background: #226bda;
}
.bt_select{border-radius:5px;color: #fff;margin: .5px;font-size: 12px;text-align: center;line-height: 40px;float: left;width: 33%;height: 40px;background: rgb(51, 165, 241);
}

如何调用

在需要的用的地方使用：

1、xxxxxx.json 文件中引入

 "component": true,"usingComponents": {"mykeyboard": "../../../../components//mykeyboard/mykeyboard"},

2、xxxxxx.wxml 文件中引入

<!-- 自定义键盘  class为遮罩层-->
<view class="zhezhao" hidden="{{showkeyborad}}"><mykeyboard is-show="{{showkeyborad}}" bindcancle="boardcancle" bindsubmit="boardsubmit" bindinputchange="boardchange" />
</view>

3、xxxxxx.wxss 文件也放出来吧！就一遮罩，自己可以将其封装在自定义的wxss中！

.zhezhao {position: fixed;width: 100%;height: 100%;top: 0px;background: rgba(0, 0, 0, 0.4);overflow: hidden;
}

4、重点是js层调用 xxxxxx.js

data：{}中引入属性，控制键盘隐藏和弹出

  data: {//键盘显示 和隐藏  true是hidden  false是显示showkeyborad: true, },

方法调用：

inputval 是确认按钮后回调的值这个值自己引入到对应的位置赋值即可

//自定义键盘函数  取消按钮boardcancle: function (e) {this.setData({showkeyborad: true,})},//自定义键盘函数  确定按钮boardsubmit: function (e) {console.log(e)var inputval = e.detail;this.setData({showkeyborad: true,})//inputval 是确认按钮后回调的值  这个值自己引入到对应的位置赋值即可}，

以上，有问题可以留言！