这篇文章主要介绍了使用vue实现简单键盘的示例(支持移动端和pc端)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
常看到各种app应用中使用自定义的键盘，本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用
实现
Keyboard.vue
<div class="keyboard"> <p> <i class="iconfont icon-zhiding tab-top"></i><i class="tab-num">123</i><i class="iconfont icon-delete key-delete"></i><i class="iconfont icon-konggejian-jianpanyong tab-blank"></i><i class="tab-symbol">符</i><i class="tab-point">・</i><i class="iconfont icon-huiche tab-enter"></i><i>{{key}}</i></p></div> .keyboard { width: 100%; margin: 0 auto; font-size: 18px; border-radius: 2px; padding-top: 0.5em; background-color: #e5e6e8; user-select: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; pointer-events: auto; p { width: 95%; margin: 0 auto; <span>本文来源gaodai#ma#com搞*代#码9网#</span>height: 45px; margin-bottom: 0.5em; display: flex; display: -webkit-box; flex-direction: row; flex-wrap: nowrap; justify-content: center; i { display: block; margin: 0 1%; height: 45px; line-height: 45px; font-style: normal; font-size: 24px; border-radius: 3px; width: 44px; background-color: #fff; text-align: center; flex-grow: 1; flex-shrink: 1; flex-basis: 0; -webkit-box-flex: 1; &:active { background-color: darken(#ccc, 10%); } } .tab-top { width: 50px; margin: 0 1%; background: #cccdd0; color: #fff; font-size: 24px; } .key-delete { width: 50px; margin: 0 1%; color: #827f7f; background: #d7d7d8; } .tab-num { font-size: 18px; background: #dedede; color: #5a5959; } .tab-point { width: 20px; } .tab-blank { width: 80px; font-size: 12px; padding: 0 15px; color: #5a5959; line-height: 60px; } .tab-symbol { width: 20px; font-size: 18px; } .tab-enter { font-size: 30px; line-height: 54px; } &:nth-child(2) { width: 88%; } } }
KeyInput.vue
<div> </div>
使用demo
<div> </div> body{ background: #efefef; } .demo-class{ input{ border:1px solid #ccc; outline: none; height: 30px; font-size: 16px; letter-spacing: 2px; padding: 0 5px; } }
完整代码：https://github.com/dawnyu/vue-keyborad
以上就是使用vue实现简单键盘的示例(支持移动端和pc端)的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：使用vue实现简单键盘的示例(支持移动端和pc端)
转载请注明原文链接：使用vue实现简单键盘的示例(支持移动端和pc端)
