Maison  >  Article  >  interface Web  >  Comment implémenter le composant de zone de saisie de nombres dans Vue

Comment implémenter le composant de zone de saisie de nombres dans Vue

亚连
亚连original
2018-06-19 17:23:351996parcourir

Cet article vous présente le développement de composants de boîte de saisie numérique basés sur Vue à travers un exemple de code. Les amis qui en ont besoin peuvent s'y référer

À mesure que Vue devient de plus en plus populaire, il existe de nombreuses bibliothèques de composants connexes. . Utilisez simplement la roue. Peu importe à quel point c'est difficile, nous devons toujours la construire !!!

1. pour le développement de composants Vue : accessoires, événements et emplacements

2. Code du composant

Adresse github : https://github.com/MengFangui /VueInputNumberEffet :

(1)index.html

(2)input-number.js

<!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>
(3)index.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);
  }
})
Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

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

Problèmes liés à l'optimisation du chargement des fichiers dans js

Comment configurer ueditor à l'aide de nodejs+mongodb+vue

Comment utiliser jQuery pour implémenter la fonction d'ajout et de suppression de menu

Présentation en détail des fonctions les plus pratiques de webpack

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn