Vue.js数字输入框组件使用方法详解

本文实例为大家分享了Vue.js数字输入框组件的具体实现代码，供大家参考，具体内容如下

效果

入口页 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>数字输入框组件</title>
</head>
<body>
  <div id="app">
    <input-number v-model="value" :max="10" :min="0"></input-number>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="input-number.js"></script>
  <script src="index.js"></script>
</body>
</html>

数字输入框组件 input-number.js

function isValueNumber(value) {
  return (/(^-?[0-9]+\.{1}\d+$) | (^-?[1-9][0-9]*$) | (^-?0{1}$)/).test(value + '');
}

Vue.component('input-number',{
  template: '\
    <div class="input-number">\
      <input \
        type="text"\
        :value="currentValue"\
        @change="handleChange">\
      <button \
        @click="handleDown"\
        :disabled="currentValue <= min">-</button>\
      <button \
        @click="handleUp"\
        :disabled="currentValue >= max">+</button>\
    </div>',
  props: {
    max: {
      type: Number,
      default: Infinity
    },
    min: {
      type: Number,
      default: -Infinity
    },
    value: {
      type: Number,
      default: 0
    }
  },
  data: function () {
    return {
      currentValue: this.value
    }
  },
  watch: {
    currentValue: function (val) {
      this.$emit('input', val);
      this.$emit('on-change',val);
    },
    value: function (val) {
      this.updateValue(val);
    }
  },
  methods: {
    updateValue: function (val) {
      if(val > this.max)
        val = this.max;
      if(val < this.min)
        val = this.min;
      this.currentValue = val;
    },
    handleDown: function () {
      if(this.currentVaule <= this.min)
        return;
      this.currentValue -= 1;
    },
    handleUp: function () {
      if(this.currentVaule >= this.max)
        return;
      this.currentValue += 1;
    },
    handleChange: function (event) {
      var val = event.target.value.trim();

      var max = this.max;
      var min = this.min;

      if(isValueNumber(val)){
        val = Number(val);
        this.currentValue = val;

        if(val > max){
          this.currentValue = max;
        }else if(val < min){
          this.currentValue = min;
        }
      }else{
        event.target.value = this.currentValue;
      }
    }
  },
  mounted: function () {
    this.updateValue(this.value);
  }
});

根实例

var app = new Vue({
  el: '#app',
  data: {
    value: 5
  }
});

更多教程点击《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。