使用Vue自定义数字键盘组件(体验度极好)

//处理数字
 _handleNumberKey(num) {
  let S = this.money;
  //如果有小数点且小数点位数不小于2
  if ( S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2)
  this.money = S + num;
  //没有小数点
  if (!(S.indexOf('.') > -1)) {
  //如果第一位是0，只能输入小数点
  if (num == 0 && S.length == 0)
   this.money = '0.';
  else {
   if (S.length && Number(S.charAt(0)) === 0) return;
   this.money = S + num;
  }
  }
 }

组件引入

组件准备好了，只需填好路径，在对应的 components 中注册后，直接放在页面上使用使用即可，类似下面

<calculation @confirmEvent="_confirmEvent"></calculation>

其中， _confirmEvent 是点击确认键的回调，参数就是输入的金额，我这里只是简单的打印而已~

_confirmEvent(res){
 console.log(res)
}

效果就跟下面差不多，

总结

以上所述是小编给大家介绍的使用Vue自定义数字键盘组件(体验度极好)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！