Question

在我的<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，并且在按下字母时，它什么也不会显示

Answer 1

您可以尝试添加keydown事件侦听器并测试键码以查看是否为数字：

@keydown="testNumber"

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

Answer 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;

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

2 个答案: