init

src/components/LimitInput.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="fxcol">
+    <input
+      class="filter-input i-border"
+      :disabled="disabled"
+      :type="type"
+      ref="input"
+      :value="numberValue"
+      :placeholder="placeholder"
+      oninput="value=value.replace(/[^\d.]/g,'')"
+      @input="handleChange"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'limitInput',
+  props: {
+    disabled: Boolean,
+    type: String,
+    placeholder: String,
+    value: '', // 传过来的值
+    max: Number,
+    min: Number,
+    defaultValue: '' // 默认值
+  },
+  data () {
+    return {
+      numberValue: this.value
+    }
+  },
+  watch: {
+    value (val) { //  监听传来的value值，并传递给新定义的值
+      // debugger
+      this.numberValue = Number(val)
+    },
+    max (val) { //  因为最大值是根据上个值输入而变化的，所以要监听相应变化
+      this.max = val
+    },
+    min (val) { //  因为最小值是根据上个值输入而变化的，所以要监听相应变化
+      this.min = val
+    },
+    numberValue (val) { //  emit input事件,可令父组件进行v-model绑定
+      this.$emit('input', val)
+    },
+    disabled (val) {
+      this.disabled = val
+    },
+    defaultValue (val) { // 要根据上面的值变化而相应变化，所以要监听
+      this.numberValue = val
+    }
+  },
+  methods: {
+    handleChange (event) {
+      let val = event.target.value.trim()
+      if (val < 0 || isNaN(val)) {
+        this.numberValue = 0
+        return
+      }
+      if (val) {
+        val = Number(val)
+        this.numberValue = val
+        if (val > Number(this.max)) this.numberValue = this.max
+        if (val < Number(this.min)) this.numberValue = this.min
+      } else {
+        this.numberValue = 0
+      }
+    }
+  },
+  mounted () {
+    if (this.defaultValue) {
+      this.numberValue = this.defaultValue
+    }
+  }
+}
+</script>
+<style lang="stylus" scoped>
+// input
+//  width 100%
+.i-border
+  border 1px solid #a1a1a1
+  border-radius 3px
+  text-align center
+</style>