绘制自定义键盘

 

先看下微信当中的自带的数字键盘

这种实现方式比较简单，可以直接用inline-block标签，设置每行平均宽度，比如一行要放4个按钮，可以那么宽度就可以设为25%，同时要注意设置css样式为box-sizing: border-box,这样在设置边框 的时候就不会超出定义的固定宽度。

接下来看下另一种复杂点的键盘：

初看貌似可以像在上面方案一样，只是键盘文字再套一层标签，然后给外部标签增加padding。但是由于手机宽度不是固定的，所以无法计算出通用padding使得按钮元素在每一行精确平分空间显示。

这时候flex布局的justify-content：space-between属性就派上用场了。

从上图可以看到，该属性可以使一行当中的左右两边的元素靠边，中间元素会自动分配等距间隔。

所以用于存放键盘数字的数组就可以写成这样：

const textArr = [['A', 'B', 'C', 'D', 'E','F'],['G', 'H', 'I', 'J', 'K',],['L', 'M', 'N', 'O', 'P', 'Q']...]

这时候会遇到最后一行不是填满一整行的情况，那么可以将剩下的元素设置为空，['挂'，'','','','',''],同时在循环的时候判断元素是否为空，为空的话加上css样式：opacity: 0（不能设置为display: none);

 

最后：

1  为提高性能，注意采用事件委托方式绑定点击事件；

2  按钮点击的时候要有相应反馈，可以设置元素的为active的时候改变背景色。水墨散开效果是现在安卓上比较流行的点击反馈的效果，下面这段代码是实现该效果的，使用的时候给按钮添加ripple类名就可以了：

.ripple {
    position: relative;
    //隐藏溢出的径向渐变背景
    // overflow: hidden;
}

.ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    //设置径向渐变
    background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .3s, opacity .3s;
}

.ripple:active:after {
    transform: scale(0, 0);
    opacity: .3;
    //设置初始状态
    transition: 0s;
}