欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2017年12月19日 11:16:09   作者:孟繁貴  
本文通過實(shí)例代碼給大家介紹了基于Vue開發(fā)數(shù)字輸入框組件,需要的朋友可以參考下

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

1、概述

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

2、組件代碼

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

效果:

(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)與父組件的通信(父組件-->子組件)
  //對每個props進(jìn)行校驗(yàn),props的值可以是數(shù)組,也可以是對象
  props: {
    max: {
      //必須是數(shù)字類型
      type: Number,
      //默認(rèn)值為Infinity
      default: Infinity
    },
    min: {
      type: Number,
      default: -Infinity
    },
    value: {
      type: Number,
      default: 0
    }
  },
  //Vue組件為單向數(shù)據(jù)流,聲明data來引用父組件的value,在組件內(nèi)部維護(hù)currentValue
  data: function() {
    return {
      currentValue: this.value
    }
  },
  //監(jiān)聽:與父組件通信 (子組件-->父組件)
  watch: {
    currentValue: function(val) {
      //使用v-model改變value 
      //this指向當(dāng)前組件實(shí)例
      this.$emit('input', val)
    }
    //    ,
    //本示例未使用自定義函數(shù),使用了v-mode input函數(shù)來更新value
    //    value: function(val) {
    //      //自定義事件on-change,告知父組件數(shù)字輸入框值有所改變
    //      this.$emit('on-change', 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 {
        //如果輸入的不是數(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開發(fā)數(shù)字輸入框組件,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • Vue實(shí)現(xiàn)瀏覽器端掃碼功能

    Vue實(shí)現(xiàn)瀏覽器端掃碼功能

    本文主要介紹,通過使用基于 vue技術(shù)棧的前端開發(fā)技術(shù),在瀏覽器端調(diào)起攝像頭,并進(jìn)行掃碼識別功能,對識別到的二維碼進(jìn)行跳轉(zhuǎn)或其他操作處理,對vue瀏覽器掃碼功能的實(shí)現(xiàn)代碼感興趣的朋友一起看看吧
    2021-10-10
  • 基于vue2.0的活動倒計(jì)時組件countdown(附源碼下載)

    基于vue2.0的活動倒計(jì)時組件countdown(附源碼下載)

    這是一款基于vue2.0的活動倒計(jì)時組件,可以使用服務(wù)端時間作為當(dāng)前時間,在倒計(jì)時開始和結(jié)束時可以自定義回調(diào)函數(shù)。這篇文章主要介紹了基于vue2.0的活動倒計(jì)時組件countdown,需要的朋友可以參考下
    2018-10-10
  • Vue組件化開發(fā)之通用型彈出框的實(shí)現(xiàn)

    Vue組件化開發(fā)之通用型彈出框的實(shí)現(xiàn)

    這篇文章主要介紹了Vue組件化開發(fā)之通用型彈出框的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • Vue.extend 編程式插入組件的實(shí)現(xiàn)

    Vue.extend 編程式插入組件的實(shí)現(xiàn)

    這篇文章主要介紹了Vue.extend 編程式插入組件的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • Vue中的同步調(diào)用和異步調(diào)用方式

    Vue中的同步調(diào)用和異步調(diào)用方式

    這篇文章主要介紹了Vue中的同步調(diào)用和異步調(diào)用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-01-01
  • 詳解Vuex的屬性

    詳解Vuex的屬性

    Vuex是專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,這篇文章主要介紹了Vuex的屬性,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-08-08
  • Vue修改Dom不生效的解決

    Vue修改Dom不生效的解決

    這篇文章主要介紹了Vue修改Dom不生效的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • vue高級組件之provide與inject使用及說明

    vue高級組件之provide與inject使用及說明

    這篇文章主要介紹了vue高級組件之provide與inject使用及說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • vue-cli3.0.4中webpack的dist路徑如何修改

    vue-cli3.0.4中webpack的dist路徑如何修改

    這篇文章主要介紹了vue-cli3.0.4中webpack的dist路徑如何修改,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • nuxt 路由、過渡特效、中間件的實(shí)現(xiàn)代碼

    nuxt 路由、過渡特效、中間件的實(shí)現(xiàn)代碼

    這篇文章主要介紹了nuxt 路由、過渡特效、中間件的實(shí)現(xiàn)代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11

最新評論