vue实现键盘效果

这次给大家带来vue实现键盘效果，vue实现键盘效果的注意事项有哪些，下面就是实战案例，一起来看一下。

常看到各种app应用中使用自定义的键盘，本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用

Keyboard.vue

 
 
      123      符  ·    {{key}}   
 
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('')  }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)  } } }}.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%; } }}

登录后复制

KeyInput.vue

 
   
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) } }}

登录后复制

使用demo

 
  
import KeyInput from '../components/KeyInput'export default { components: { KeyInput }, data() { return { } }, created() {}, methods: { }}body{ background: #efefef;}.demo-class{ input{ border:1px solid #ccc; outline: none; height: 30px; font-size: 16px; letter-spacing: 2px; padding: 0 5px; }}

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

vue-cli的使用详解

Vue模板文件打包配置步奏详解

JS怎样阻止图片拉伸自适应                         

以上就是vue实现键盘效果的详细内容，更多请关注【创想鸟】其它相关文章！