Vue自定义数字键盘组件

本文采用需求导向阐述，需求->实现效果->实现思路->核心细节->详细代码以及调用方法
1.需求：需要实现一个安全认证的键盘，如下图效果图

键盘效果图.png

2.实现效果：

实际开发实现图.png

3.实现思路
首先要考虑的是直接用input控件，让手机系统弹出输入法是否可行，我原本是做android的，从android的角度来看，涉及到键盘弹出需要再WebView所在Activity设置android:windowSoftInputMode="stateHidden|adjustResize"属性，否则可能会发生键盘把底部一些布局弹起来的问题，例如：

input自动弹起键盘的实现方式.png

看上面的效果感觉不行， 一是样式没有保持一致,还不干净；二是依赖android系统默认设置，三是还要依赖android那边的实现，所以最后决定自己写。
4.实现细节

• 直接按照普通的样式来写，最后保证键盘控件在父布局的最底部，使用

    position fixed
    left 0
    bottom 0

代码即可实现类似键盘在最底部弹出

• 父布局需要传递一个值isShowKeyBoard给这个键盘子组件，让父布局根据业务控制是否显示这个键盘组件；
• 子组件需要在点击确定后取消后告诉父布局，用户输入的密码是什么，或者优化成在键盘子组件进行密码验证，最后返回一个验证结果给父组件，我上传的代码没有调用服务进行验证，而是返回了密码给父组件。

5.详细代码以及调用方法
子组件实现代码(基于pug和style模板语言，不懂的可看我之前的博客)：

• 键盘子组件代码

• 父布局调用代码：