vue输入框插件，只允许输入数字

vue输入框插件，只允许输入数字、小数点和负号，并且小数点只允许输入一个，禁止输入中文和其他特殊字符。可配置小数的位数。

1、新建number-input.vue，拷贝下面代码进去：

<template>
  <span>
    <input
      type="text"
      :value="value"
      :placeholder="placeholder"
      :readonly="readonly"
      :disabled="disabled"
      @keypress="keyPress"
      @input="inputFn"
      @change="changeFn"
    >
  </span>
</template>
<script>
export default {
  name: 'NumberInput',
  props: {
    decimalPointLength: {
      type: Number,
      default: 3
    },
    placeholder: {
      type: String,
      default: ''
    },
    readonly: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
    }
  },
  created() {

  },
  methods: {
    keyPress(event) {
      if (event.keyCode !== 46 && event.keyCode !== 45 && event.keyCode < 48 || event.keyCode > 57) {
        event.returnValue = false
      }
    },
    inputFn(event) {
      let val = event.target.value
      const temp = val.split('.')
      if (temp[1] && temp[1].length > this.decimalPointLength) {
        temp[1] = temp[1].substr(0, this.decimalPointLength)
      }
      val = temp[0] + (temp[1] !== undefined ? '.' + temp[1] : '')
      event.target.value = val.replace(/[\u4e00-\u9fa5]/ig, '')
      this.$emit('input', val)
      // this.$emit('input', event.target.value)
    },
    changeFn(event) {
      this.$emit('change', event.target.value)
    }
  }
}
</script>

2、在main.js全局引入

import numberInput from '@/components/number-input.vue' // 数字输入框
Vue.component('numberInput', numberInput)

3、在需要使用到的地方加入下面的html代码

<number-input v-model="myValue" placeholder="请输入数字" :decimalPointLength="2" @change="changeFn" />

参数很简单，就不细说了。