vue功能-数字键盘

vue项目pc端中，有的触摸屏页面需要JS封装键盘，如下就是全部代码~

1.首先是封装的键盘组件

<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>
    <p v-show="isShow"><i @click="closeKeyBoard">确定</i></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
    },
    isShow:{
    	type:Boolean,
    	default :true
    }
  },
  computed: {
    showKeyboard(){
      return this.option.show
    }
  },
  mounted() {
    this.keyList = this.lowercase
  },
  methods: {
    closeKeyBoard(){
    	this.option.show=false;
    	this.$emit('submit');
    },
    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) {
      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) {
      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;
  height: 258px;
  font-size: 18px;
  border-radius: 2px;
  background-color: #fff;
  user-select: none;
  bottom: 0;
  position: absolute;/*定位数字键盘*/
  left: 0;
  top: 77px;
  z-index: 999;
  pointer-events: auto;
  p {
    width: 100%;
    margin: 0 auto;
    height: 42px;
    margin-bottom: 0.6em;
    display: flex;
    display: -webkit-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    i {
      display: block;
      margin: 2px 1px;
      height: 50px;
      line-height: 52px;
      font-style: normal;
      box-sizing: border-box;
      font-size: 24px;
      border-radius: 3px;
      width: 44px;
      background-color: rgba(228, 52, 55, 0.78);
      text-align: center;
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0;
      -webkit-box-flex: 1;
      color:#fff;
      &:active {
        background-color: #c03030;
      }
    }
    .tab-top {
      width: 50px;
      margin: 0 1%;
      background: #cccdd0;
      color: #fff;
      font-size: 24px;
    }
    .key-delete {
      color: #fff;
    }
    .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>

这个组件中引入了一个js文件如下：

export default {
  bind(el, binding, vnode) {
    function documentHandler(e) {
      if (el.contains(e.target)) {
        return false;
      }
      if (binding.expression) {
        binding.value(e);
      }
    }
    el.__vueClickOutside__ = documentHandler;
    document.addEventListener('click', documentHandler);
  },
  update(el, binding, vnode) {},
  unbind(el, binding) {
    document.removeEventListener('click', el.__vueClickOutside__);
    delete el.__vueClickOutside__;
  }
};

2.接下来就可以在页面中引用数字键盘

			<Keyboard
				class="changeKBstyle"
				:option="option"
 				@close="option.show = false"
				@keyVal="getInputValue"
			></Keyboard>
	import Keyboard from '@/components/keyup/Keyboard';
	components: {
			Keyboard
		},

以下是对输入的数字截取(我是金额类截取最多两位小数)

 // 输入金额
		  getInputValue(val){
			  // moneyInput 购买金额
				  if (val === 'del' ) {
					  this.stepsNum.moneyInput = this.stepsNum.moneyInput.toString().substr(0, this.stepsNum.moneyInput.toString().length - 1);
				  } else {
					  if(this.stepsNum.moneyInput.indexOf(".") >=0){
						  if(val ==".") return ;
						  let start=this.stepsNum.moneyInput.indexOf("."),end=start+2;
						  this.stepsNum.moneyInput=this.stepsNum.moneyInput.slice(0,start)+this.stepsNum.moneyInput.slice(start,end);
					  }
					  this.stepsNum.moneyInput += val
				  }
		  },

---

以上就是全部代码，冗余代码可自行更改！