使用vue实现简单键盘的示例(支持移动端和pc端)
程序员文章站
2022-05-21 07:53:17
常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和pc端使用
实现效果:
keyboard.vue
常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和pc端使用
实现效果:
keyboard.vue
<template> <div class="keyboard" v-show="showkeyboard" v-clickoutside="closemodal"> <p v-for="keys in keylist"> <template v-for="key in keys"> <i v-if="key === 'top'" @click.stop="clickkey" @touchend.stop="clickkey" class="iconfont icon-zhiding tab-top"></i> <i v-else-if="key === '123'" @click.stop="clickkey" @touchend.stop="clickkey" class="tab-num">123</i> <i v-else-if="key === 'del'" @click.stop="clickkey" @touchend.stop="clickkey" class="iconfont icon-delete key-delete"></i> <i v-else-if="key === 'blank'" @click.stop="clickkey" @touchend.stop="clickkey" class="iconfont icon-konggejian-jianpanyong tab-blank"></i> <i v-else-if="key === 'symbol'" @click.stop="clickkey" @touchend.stop="clickkey" class="tab-symbol">符</i> <i v-else-if="key === 'point'" @click.stop="clickkey" @touchend.stop="clickkey" class="tab-point">·</i> <i v-else-if="key === 'enter'" @click.stop="clickkey" @touchend.stop="clickkey" class="iconfont icon-huiche tab-enter"></i> <i v-else @click.stop="clickkey" @touchend.stop="clickkey">{{key}}</i> </template> </p> </div> </template> <script> import clickoutside from '../directives/clickoutside' export default { directives: { clickoutside }, data() { return { keylist: [], status: 0,//0 小写 1 大写 2 数字 3 符号 lowercase: [ ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'], ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'], ['top', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'del'], ['123', 'point', 'blank', 'symbol', 'enter'] ], uppercase: [ ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'], ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'], ['top', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'del'], ['123', 'point', 'blank', 'symbol', 'enter'] ], equip:!!navigator.useragent.tolocalelowercase().match(/ipad|mobile/i)//是否是移动设备 } }, props: { option: { type: object } }, computed: { showkeyboard(){ return this.option.show } }, mounted() { this.keylist = this.lowercase }, methods: { tabhandle({ value = '' }) { if(value.indexof('tab-num') > -1){ this.status = 2 //数字键盘数据 }else if(value.indexof('key-delete') > -1){ this.emitvalue('delete') }else if(value.indexof('tab-blank') > -1){ this.emitvalue(' ') }else if(value.indexof('tab-enter') > -1){ this.emitvalue('\n') }else if(value.indexof('tab-point') > -1){ this.emitvalue('.') }else if(value.indexof('tab-symbol') > -1){ this.status = 3 }else if(value.indexof('tab-top') > -1){ if(this.status === 0){ this.status = 1 this.keylist = this.uppercase }else{ this.status = 0 this.keylist = this.lowercase } }else{ } }, clickkey(event) { if(event.type === 'click' && this.equip) return let value = event.srcelement.innertext value && value !== '符' && value !== '·' && value !== '123'? this.emitvalue(value) : this.tabhandle(event.srcelement.classlist) }, emitvalue(key) { this.$emit('keyval', key) }, closemodal(e) { if (e.target !== this.option.sourcedom) { // this.showkeyboard = false this.$emit('close', false) } } } } </script> <style scoped lang="less"> .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; 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%; } } } </style>
keyinput.vue
<template> <div> <input type="text" ref="keyboard" v-model="inputvalue" @focus="onfocus"> <keyboard :option="option" @keyval="getinputvalue" @close="option.show = false"></keyboard> </div> </template> <script> import keyboard from '../components/keyboard' export default { components: { keyboard }, data() { return { option: { show: false, sourcedom: '' }, inputvalue: '' } }, props: {}, created() {}, methods: { getinputvalue(val) { if(val === 'delete'){ this.inputvalue = this.inputvalue.slice(0,this.inputvalue.length -1) }else{ this.inputvalue += val } }, onfocus() { this.$set(this.option, 'show', true) this.$set(this.option, 'sourcedom', this.$refs['keyboard']) }, //获取光标位置 getcursorposition() { let doc = this.$refs['keyboard'] if (doc.selectionstart) return doc.selectionstart return -1 }, //设置光标位置 暂未实现 setcursorposition(pos) { let doc = this.$refs['keyboard'] console.log(doc.setselectionrange) doc.focus() doc.setselectionrange(1,3) } } } </script> <style lang="less" scoped> </style>
使用demo
<template> <div> <key-input class="demo-class"></key-input> </div> </template> <script> import keyinput from '../components/keyinput' export default { components: { keyinput }, data() { return { } }, created() {}, methods: { } } </script> <style lang="less"> body{ background: #efefef; } .demo-class{ input{ border:1px solid #ccc; outline: none; height: 30px; font-size: 16px; letter-spacing: 2px; padding: 0 5px; } } </style>
完整代码:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 推荐10款扩展Web表单的JS插件
下一篇: Java内存区域与虚拟机类加载机制