vue功能-数字键盘

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

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

这个组件中引入了一个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.接下来就可以在页面中引用数字键盘

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

---

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