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

叹！

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 是确认按钮后回调的值  这个值自己引入到对应的位置赋值即可
    
   }，

以上，有问题可以留言！