mpvue小程序的自定义数字键盘

自定义的数字键盘

鉴于使用系统自带输入键盘会造成挤压页面等问题，同时也不能满足设计需求，因此自己去写了个键盘组件。
效果如下：

由于是写键盘组件的使用 所以页面也没有过多的样式 大家见谅.

效果图.png

效果图已贴上，下面就直接贴代码了

首先在组件component目录下新建.vue页面 例如：keyboard.vue
代码内容如下：

组件内容完成之后，就可以在页面引入并且使用 以下是在页面中如何使用的步骤 重要的地方会有相应的备注

1. 引入组件

import KeyBoard from '@/components/KeyBoard.vue'; //引入自定义键盘组件
components: {
  KeyBoard
},

2. 页面调用

3. 组件传值

showKey(){
  this.keyBoard = true  //点击弹出自定义键盘
},
getCount(val){
  this.number = val  //获取到输入的值
  this.keyBoard = false //隐藏键盘
},

4. 整个页面代码参考

以上就是整个的步骤以及代码了 哪个页面使用就直接调用就可 有什么疑问或者问题可指出.

一直在记录 从未停止.