So implementieren Sie die Zahleneingabefeldkomponente in Vue-js-Tutorial-php.cn

So implementieren Sie die Zahleneingabefeldkomponente in Vue

亚连

Freigeben： 2018-06-19 17:23:35

Original

1959 Leute haben es durchsucht

Dieser Artikel stellt Ihnen die Entwicklung numerischer Eingabefeldkomponenten anhand von Beispielcode vor. Freunde, die ihn benötigen, können darauf zurückgreifen.

Da Vue immer beliebter wird, gibt es viele verwandte Komponentenbibliotheken . Benutzen Sie einfach das Rad. Egal wie schwer es ist, wir müssen es noch bauen!!!

Übersicht

API für Vue-Komponentenentwicklung: Requisiten, Ereignisse und Slots

2. Komponentencode

Github-Adresse: https://github.com/MengFangui /VueInputNumber

Effekt:

(1)index.html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>数字输入框组件</title>
  </head>
  <body>
    <p id="app">
      <!--数字输入框组件命名为：input-number-->
      <!--数字输入框组件默认值为5，最大值为10，最小值为0-->
      <input-number v-model=&#39;value&#39; :max=&#39;10&#39; :min=&#39;0&#39;></input-number>
    </p>
    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
    <script src="js/input-number.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

Nach dem Login kopieren

(2)input-number.js

//验证输入值是否为数字
function isValueNumber(value) {
  return(/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9]*$)|(^-?0{1}$)/).test(value + &#39;&#39;);
}
Vue.component(&#39;input-number&#39;, {
  //模板
  template: `
  <p class="input-number">
      <input type="text" :value="currentValue" @change="handleChange" />
    <button @click="handleDown" :disabled="currentValue <= min">-</button>
    <button @click="handleUp" :disabled="currentValue >= max">+</button>
  </p>
  `,
  //props实现与父组件的通信（父组件-->子组件）
  //对每个props进行校验，props的值可以是数组，也可以是对象
  props: {
    max: {
      //必须是数字类型
      type: Number,
      //默认值为Infinity
      default: Infinity
    },
    min: {
      type: Number,
      default: -Infinity
    },
    value: {
      type: Number,
      default: 0
    }
  },
  //Vue组件为单向数据流，声明data来引用父组件的value，在组件内部维护currentValue
  data: function() {
    return {
      currentValue: this.value
    }
  },
  //监听：与父组件通信 （子组件-->父组件）
  watch: {
    currentValue: function(val) {
      //使用v-model改变value 
      //this指向当前组件实例
      this.$emit(&#39;input&#39;, val)
    }
    //    ,
    //本示例未使用自定义函数，使用了v-mode input函数来更新value
    //    value: function(val) {
    //      //自定义事件on-change，告知父组件数字输入框值有所改变
    //      this.$emit(&#39;on-change&#39;, 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.currentValue <= this.min) {
        return;
      }
      this.currentValue -= 1;
    },
    handleUp: function() {
      if(this.currentValue >= 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.current = max;
        }
        if(val < min) {
          this.current = min;
        }
      } else {
        //如果输入的不是数字，将输入的内容重置为之前的currentValue
        event.target.value = this.currentValue;
      }
    }
  },
  //初始化
  mounted: function() {
    this.updateValue(this.value);
  }
})

Nach dem Login kopieren

(3)index.js

var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    //数字输入框组件默认值为5（父组件设置初始化值）
    value: 5
  }
})

Nach dem Login kopieren

Das Obige habe ich für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Probleme bei der Dateiladeoptimierung in js

So konfigurieren Sie ueditor mit nodejs+mongodb+vue

So verwenden Sie jQuery, um die Funktion zum Hinzufügen und Entfernen von Menüs zu implementieren

Einführung in die praktischeren Funktionen von Webpack im Detail

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Zahleneingabefeldkomponente in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!