基于Vue開(kāi)發(fā)數(shù)字輸入框組件

發(fā)布時(shí)間：2020-10-18 20:31:17 來(lái)源：腳本之家閱讀：149 作者：孟繁貴欄目：web開(kāi)發(fā)

隨著 Vue 越來(lái)越火熱, 相關(guān)組件庫(kù)也非常多啦, 只用輪子怎么夠, 還是要造起來(lái)!!!

1、概述

Vue組件開(kāi)發(fā)的API：props、events和slots

2、組件代碼

github地址：https://github.com/MengFangui/VueInputNumber

效果：

基于Vue開(kāi)發(fā)數(shù)字輸入框組件

（1）index.html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>數(shù)字輸入框組件</title>
  </head>
  <body>
    <div id="app">
      <!--數(shù)字輸入框組件命名為：input-number-->
      <!--數(shù)字輸入框組件默認(rèn)值為5，最大值為10，最小值為0-->
      <input-number v-model='value' :max='10' :min='0'></input-number>
    </div>
    <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>

(2)input-number.js

//驗(yàn)證輸入值是否為數(shù)字
function isValueNumber(value) {
  return(/(^-?[0-9]+\.{1}\d+$)|(^-?[1-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實(shí)現(xiàn)與父組件的通信（父組件-->子組件）
  //對(duì)每個(gè)props進(jìn)行校驗(yàn)，props的值可以是數(shù)組，也可以是對(duì)象
  props: {
    max: {
      //必須是數(shù)字類型
      type: Number,
      //默認(rèn)值為Infinity
      default: Infinity
    },
    min: {
      type: Number,
      default: -Infinity
    },
    value: {
      type: Number,
      default: 0
    }
  },
  //Vue組件為單向數(shù)據(jù)流，聲明data來(lái)引用父組件的value，在組件內(nèi)部維護(hù)currentValue
  data: function() {
    return {
      currentValue: this.value
    }
  },
  //監(jiān)聽(tīng)：與父組件通信 （子組件-->父組件）
  watch: {
    currentValue: function(val) {
      //使用v-model改變value 
      //this指向當(dāng)前組件實(shí)例
      this.$emit('input', val)
    }
    //    ,
    //本示例未使用自定義函數(shù)，使用了v-mode input函數(shù)來(lái)更新value
    //    value: function(val) {
    //      //自定義事件on-change，告知父組件數(shù)字輸入框值有所改變
    //      this.$emit('on-change', val)
    //    }
  },
  methods: {
    //父組件傳遞過(guò)來(lái)的值可能不符合條件（大于最大值，小于最小值）
    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 {
        //如果輸入的不是數(shù)字，將輸入的內(nèi)容重置為之前的currentValue
        event.target.value = this.currentValue;
      }
    }
  },
  //初始化
  mounted: function() {
    this.updateValue(this.value);
  }
})

(3)index.js

var app = new Vue({
  el: '#app',
  data: {
    //數(shù)字輸入框組件默認(rèn)值為5（父組件設(shè)置初始化值）
    value: 5
  }
})

總結(jié)

以上所述是小編給大家介紹的基于Vue開(kāi)發(fā)數(shù)字輸入框組件，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問(wèn)一下細(xì)節(jié)

基于Vue開(kāi)發(fā)數(shù)字輸入框組件

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽