Vue自定义数字键盘组件
16lz
2021-01-25
本文采用需求导向阐述,需求->实现效果->实现思路->核心细节->详细代码以及调用方法
1.需求:需要实现一个安全认证的键盘,如下图效果图
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模板语言,不懂的可看我之前的博客):
- 键盘子组件代码
.keyboard(:class="{isIos : isIOS}" v-show="isShowChild") .safe .tip 安全验证 .password {{sercet}} .operator .btn.sure(@click="clickSure" :class="{sure_canClick: isCanClick}") 确定 .btn.cancel(@click="clickCancel") 取消 .num_board .row button(@click="clickNum('1')") 1 button.center(@click="clickNum('2')") 2 button(@click="clickNum('3')") 3 .row button(@click="clickNum('4')") 4 button(class = "center" @click="clickNum('5')") 5 button(@click="clickNum('6')") 6 .row button(@click="clickNum('7')") 7 button(class = "center" @click="clickNum('8')") 8 button(@click="clickNum('9')") 9 .row button(class= "num_null") button(class = "center" @click="clickNum('0')") 0 button(class = "num_delete" @click="clickNum('X')") img(src="../../assets/delete.png" class="icon")
- 父布局调用代码:
Keyboard(:isShowKeyBoard="" @onShowChange="showKeyBoard" @onCheckPassword="onCheckPassword")
更多相关文章
- 没有一行代码,「2020 新冠肺炎记忆」这个项目却登上了 GitHub 中
- Android开发者确保应用程序运行的四大组件
- Android(安卓)记录一次 代码重启设备的爬坑记录
- [android架构篇]mvp+rxjava+retrofit+eventBus
- mainefest中配置组件的android:process属性的作用
- Android中实现自动生成布局View的初始化代码方法
- Platform Dependent Compilation 多平台兼容性使用注意事项
- 隆重推出:Android(安卓)KTX 预览版让 Kotlin 代码更精简
- Android(安卓)Jpush的集成