溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

說說如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法

發(fā)布時(shí)間：2020-08-30 16:34:41 來源：腳本之家 閱讀：193 作者：deniro 欄目：web開發(fā)

我們對(duì)普通輸入框進(jìn)行擴(kuò)展，實(shí)現(xiàn)一個(gè)可快捷輸入數(shù)字組件。

首先制定規(guī)則：

  • 只能輸入數(shù)字。
  • 設(shè)計(jì)兩個(gè)快捷按鈕，可直接在當(dāng)前值的基礎(chǔ)上增 1 或者減 1。
  • 數(shù)字輸入組件可設(shè)置初始值、最大值與最小值。

接著，規(guī)劃好 API。一個(gè) Vue.js 組件最重要的 3 個(gè)部分就是 props、events 以及 slot，我們需要定義這三個(gè)部分的命名以及業(yè)務(wù)規(guī)則。這個(gè)組件比較簡單，所以我們只用到  props 與 events。

1 基礎(chǔ)版

html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>數(shù)字輸入組件</title>
</head>
<body>
<div id="app">
  <number-input v-model="value" :min="0" :max="6"></number-input>
</div>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="number.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      value: 3
    }
  });
</script>
</body>
</html>

這里，我們使用了 v-model，雙向綁定了 value。

number.js：

/**
 * 是否為數(shù)字
 * @param val
 * @returns {boolean}
 */
function isNum(val) {
  return (/^[0-9]*$/).test(val);
}

/**
 * 數(shù)字輸入組件
 */
Vue.component('number-input', {
  template: '\
  <div class="number-input">\
    <input \
      type="text"\
      :value="currentVal"\
      @change="change">\
    <button\
      @click="down"\
      :disabled="currentVal<=min">-</button>\
    <button\
      @click="up"\
      :disabled="currentVal >=max">+</button>\
  </div>',
  props: {//校驗(yàn)
    //最大值
    max: {
      type: Number,
      default: Infinity
    },
    //最小值
    min: {
      type: Number,
      default: -Infinity
    },
    //初始值
    value: {
      type: Number,
      default: 0
    }
  },
  data: function () {
    return {
      currentVal: this.value
    }
  },
  watch: {
    currentVal: function (val) {
      console.log("currentVal:" + this.currentVal);
      this.$emit('input',val);
    },
    value: function (val) {//更新 currentVal
      this.update(val);
    }
  },
  methods: {
    /**
     * 更新
     * @param val
     */
    update: function (val) {
      //讓輸入的值在限定范圍內(nèi)
      if (val > this.max) {
        val = this.max;
      }
      if (val < this.min) {
        val = this.min
      }
      this.currentVal = val;
    },
    /**
     * 減少
     */
    down: function () {
      if (this.currentVal <= this.min) {
        return;
      }
      this.currentVal -= 1;
    },
    /**
     * 增長
     */
    up: function () {
      if (this.currentVal >= this.max) {
        return;
      }
      this.currentVal += 1;
    },
    /**
     * 如果輸入的值，
     * @param event
     */
    change: function (event) {
      var val = event.target.value.trim();//獲取輸入值

      if (isNum(val)) {//賦值 currentVal
        val = Number(val);
        this.currentVal = val;

        //超出限定范圍時(shí)，規(guī)整
        var max = this.max;
        var min = this.min;
        if (val > max) {
          this.currentVal = max;
        } else if (val < min) {
          this.currentVal = min;
        }
      } else {//還原為 currentVal
        event.target.value = this.currentVal;
      }
    }
  },
  mounted: function () {
    //對(duì)初始值進(jìn)行范圍限定
    this.update(this.value);
  }
});

這里，我們專門定義了一個(gè) number.js，用于定義數(shù)字輸入組件。
在 number.js 中，我們做了如下工作：

  1. 利用正則表達(dá)式 ，定義了一個(gè)判斷 “是否為數(shù)字” 的函數(shù)。
  2. 在模板定義中，我們定義了一個(gè)輸入框以及兩個(gè)按鈕，首先在 input 中綁定了 currentVal 數(shù)據(jù)以及原生的 change 事件。接著，定義了遞增與遞減按鈕，每個(gè)按鈕都綁定了相應(yīng)的事件，還綁定了 disabled 屬性，這樣當(dāng)輸入的值超出范圍時(shí)，按鈕就會(huì)置灰不可用。
  3. 在定義的 change() 方法中，先獲取輸入值，然后判斷是否為數(shù)字。如果是數(shù)字，則賦值給 currentVal；如果不是數(shù)字，則還原為 currentVal，這樣可以保證組件的內(nèi)容始終是數(shù)字。
  4. 接著在 props 中，對(duì)每一個(gè)參數(shù)（最大值、最小值、初始值）定義了相應(yīng)的校驗(yàn)規(guī)則。這樣就可以在父組件中初始化這個(gè)數(shù)字輸入組件啦O(∩_∩)O~
  5. 因?yàn)?Vue.js 組件時(shí)單向數(shù)據(jù)流，所以不能在組件內(nèi)部修改之前在 props 中定義的 value。我們可以在 data 函數(shù)中，聲明一個(gè) currentVal，并把  props 中定義的 value 值賦給它。這樣就實(shí)現(xiàn)了組件初始化時(shí)，引用父組件中的值的工作。
  6. 為了當(dāng)父組件修改了輸入值，也要更新子組件中的 currentVal 的功能，我們需要用到 watch 屬性。 watch 屬性用于監(jiān)聽某個(gè) prop 或者 data，當(dāng)它們發(fā)生變化時(shí)，會(huì)觸發(fā)定義在 watch 中的函數(shù)。這里我們監(jiān)聽了 currentVal 與 value，監(jiān)聽了 currentVal 是為了將來當(dāng)內(nèi)部更新了 currentVal 的場景時(shí)，可以同步到 Value，這里起核心作用的是監(jiān)聽 value 值。為了讓輸入的值在限定范圍內(nèi)，這里封裝了一個(gè) update() 函數(shù)。
  7. watch 中的監(jiān)聽函數(shù)，有兩個(gè)入?yún)?，第一個(gè)是新值，第二個(gè)是舊值。這里只用到新值。因?yàn)楸O(jiān)聽函數(shù)中的 this ，指向的是當(dāng)前組件實(shí)例，所以可以直接調(diào)用定義在 methods 中的函數(shù)。
  8. 為了在組件初始化時(shí)，對(duì)初始值進(jìn)行范圍限定，這里在 mounted 掛載函數(shù)中，也調(diào)用了 update() 函數(shù)。

效果：

說說如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法

2 按鍵支持

當(dāng)輸入框獲得焦點(diǎn)時(shí)，按下“向上鍵”時(shí)，增長；按下“向上鍵”時(shí)，減少。

這可以利用按鍵修飾符來實(shí)現(xiàn)，我們修改示例中的組件模板：

...
 <input 
      type="text"
      :value="currentVal"
      @change="change"
      @keyup.up="up"
      @keyup.down="down">
...

Vue.js 定義按鍵別名有這些：

  • .enter
  • .tab
  • .delete(捕獲“刪除”和“退格”鍵)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

效果：

說說如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法

3 控制步伐

新增一個(gè)步伐屬性，增長或者減少以步伐值為變化量。之前的示例，步伐為 1。

首先在 props 中，定義一個(gè)步伐屬性：

//步伐
step: {
  type: Number,
  default: 1
}

然后在增長與減少函數(shù)中，使用步伐屬性做為變化量：

/**
 * 減少
 */
down: function () {
  if (this.currentVal <= this.min) {
    return;
  }
  this.currentVal -= this.step;
},
/**
 * 增長
 */
up: function () {
  if (this.currentVal >= this.max) {
    return;
  }
  this.currentVal += this.step;
},

最后為組件重新配置參數(shù)：

<number-input v-model="value" :min="0" :max="50" :step="5"></number-input>

效果：

說說如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法

本文示例代碼

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手