vue引入js数字小键盘的实现代码


            效果如图：



代码如下：

  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" class="iconfont icon-zhiding tab-top"></i> 

    <i v-else-if="key === '123'" @click.stop="clickKey" class="tab-num">123</i> 

    <i v-else-if="key === 'del'" @click.stop="clickKey" id="del" class="iconfont icon-delete key-delete"></i> 

    <i v-else-if="key === 'blank'" @click.stop="clickKey" class="iconfont icon-konggejian-jianpanyong tab-blank"></i> 

    <i v-else-if="key === 'symbol'" @click.stop="clickKey" class="tab-symbol">符</i> 

    <i v-else-if="key === 'point'" @click.stop="clickKey" class="tab-point">·</i> 

    <i v-else-if="key === 'enter'" @click.stop="clickKey" class="iconfont icon-huiche tab-enter"></i> 

    <i v-else @click.stop="clickKey" >{{key}}</i> 

   </template> 

  </p> 

 </div> 

</template> 

<script> 

import clickoutside from '../../directives/clickoutside' 

export default { 

 directives: { clickoutside }, 

 data() { 

  return { 

   keyList: [], 

   status: 2,//0 小写 1 大写 2 数字 3 符号 

   lowercase: [ 

    ['7', '8', '9'], 

    ['4', '5', '6'], 

    ['1', '2', '3'], 

    ['.','0','del'], 

   ], 

   //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){ 

    console.log(value.indexOf('key-delete')) 

    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 

    }else{ 

     this.status = 0 

     this.keyList = this.lowercase 

    } 

   }else{ 

   } 

  }, 

  clickKey(event) { 

   // if(event.type === 'click' && this.equip) return 

   let value = event.srcElement.innerText; 

   let id = event.srcElement.id; 

   let target = event.srcElement ? event.srcElement : event.target; 

   if(id !== '' && id === 'del'){//如果点击的是id为del的表示是删除 

    this.emitValue(id); 

   }else{//否则 

    value && id !== 'del'? this.emitValue(value) : this.tabHandle(target.classList); 

   } 

  }, 

  emitValue(key) { 

   console.log(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 { 

  display: inline-block; 

 width: 263px; 

 font-size: 18px; 

 border-radius: 2px; 

 background-color: #e5e6e8; 

 user-select: none; 

 bottom: 0; 

 position: absolute;/*定位数字键盘*/ 

 left: -20px; 

 top: 77px; 

 z-index: 999; 

 pointer-events: auto; 

 p { 

  width: 100%; 

  margin: 0 auto; 

  height: 42px; 

  margin-bottom: 0.5em; 

  display: flex; 

  display: -webkit-box; 

  flex-direction: row; 

  flex-wrap: nowrap; 

  justify-content: center; 

  i { 

   display: block; 

   margin: 0 0.2%; 

   height: 50px; 

   line-height: 52px; 

   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: 47px; 

   margin: 0 0.2%; 

   color: #827f7f; 

   background: ; 

  } 

  .tab-num { 

   font-size: 18px; 

   background: #dedede; 

   color: #5a5959; 

  } 

  .tab-point { 

   width: 20px; 

  } 

  .tab-blank { 

   width: 50px; 

   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: 100%; 

  } 

 } 

} 

</style> 



在使用页面引入代码：

html代码



引入数字小键盘vue



注册引入的主键



定义的method



总结

以上所述是小编给大家介绍的vue引入js数字小键盘的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！