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数字小键盘的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！