vant的NumberKeyboard 数字键盘存在样式bug及注册事件失效
直接引用vant的NumberKeyboard 数字键盘在项目中显示如下
image.png
然而官方的样式如下
image.png
出现问题
1.样式货不对板
2.close事件失效 , blur事件也无法关闭键盘
样式问题解决
第一
在移动端更改vant组件的样式 不能使用scoped和>>> 进行样式穿透
需要给它定义一个唯一样式名字,再更改
将字体改为黑色
第二
找ui设计一个键盘图标, 重新覆盖原有键盘的位置,并添加动画效果
(将键盘和新图标同处于一个父级盒子下, 解决动画不同步问题)
事件失效问题解决
将click事件注册在新的键盘图标位置
具体代码如下
样式部分