如何仅在 <vue-numeric> 中强制用户输入数字答案

【问题标题】：how to force user input number only in <vue-numeric>如何仅在 <vue-numeric> 中强制用户输入数字
【发布时间】：2019-08-27 14:14:07
【问题描述】：

在我的<vue-numeric>

<vue-numeric
      currency="RMB"
      separator=","
      v-bind:minus="false"
      v-model="amount"
      v-bind:precision="2"
      class="form-control form-control-lg bg-secondary border-0 text-white"
    ></vue-numeric>

通过使用此代码，它可以将用户输入转换为number 类型，即使输入包含string，但我想要的是用户只能插入number，当按下字母时，它不会显示任何内容

【问题讨论】：

标签： vue.js bootstrap-4

【解决方案1】：

您可以尝试添加一个 keydown 事件侦听器并测试 keycode 以查看它是否是一个数字：

@keydown="testNumber"

methods: {
  testNumber({ keyCode }) {
    if(keyCode < 48 || keyCode > 57) {
      event.preventDefault()
    }
  }
}

【讨论】：

【解决方案2】：

您可以做的是扩展/覆盖组件选项 - 例如：

import VueNumeric from "vue-numeric";
const inputHanlder = VueNumeric.methods["onInputHandler"];
VueNumeric.methods["onInputHandler"] = function(val) {
  // here the sanitizer
  this.amount = this.amountNumber;
  inputHanlder.bind(this)();
};
VueNumeric.watch["valueNumber"] = function(newValue) {
  console.log(newValue);
  if (this.$refs.numeric !== document.activeElement) {
    this.amount = this.format(newValue);
  } else {
    this.amount = newValue;
  }
};
export default VueNumeric;

【讨论】：