InputNumber計數器

InputNumber 計數器

僅允許輸入標准的數字值，可定義范圍

要使用它，只需要在el-input-number元素中使用v-model綁定變量即可，變量的初始值即為默認值。

<template>
  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num1: 1
      };
    },
    methods: {
      handleChange(value) {
        console.log(value);
      }
    }
  };
</script>

 

禁用狀態

disabled屬性接受一個Boolean，設置為true即可禁用整個組件，如果你只需要控制數值在某一范圍內，可以設置min屬性和max屬性，不設置min和max時，最小值為 0。

<template>
  <el-input-number v-model="num2" :disabled="true"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num2: 1
      }
    }
  };
</script>

 

步數

允許定義遞增遞減的步數控制

設置step屬性可以控制步長，接受一個Number。

<template>
  <el-input-number v-model="num3" :step="2"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num3: 5
      }
    }
  };
</script>

 

尺寸

額外提供了 medium、small、mini 三種尺寸的數字輸入框

<template>
  <el-input-number v-model="num4"></el-input-number>
  <el-input-number size="medium" v-model="num5"></el-input-number>
  <el-input-number size="small" v-model="num6"></el-input-number>
  <el-input-number size="mini" v-model="num7"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num4: 1,
        num5: 1,
        num6: 1,
        num7: 1
      }
    }
  };
</script>

 

按鈕位置

設置 controls-position 屬性可以控制按鈕位置。

<template>
  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num8: 1
      };
    },
    methods: {
      handleChange(value) {
        console.log(value);
      }
    }
  };
</script>

 

Attributes

參數	說明	類型	可選值	默認值
value	綁定值	number	—	—
min	設置計數器允許的最小值	number	—	-Infinity
max	設置計數器允許的最大值	number	—	Infinity
step	計數器步長	number	—	1
size	計數器尺寸	string	large, small	—
disabled	是否禁用計數器	boolean	—	false
controls	是否使用控制按鈕	boolean	—	true
controls-position	控制按鈕位置	string	right	-
name	原生屬性	string	—	—
label	輸入框關聯的label文字	string	—	—

Events

事件名稱	說明	回調參數
change	綁定值被改變時觸發	最后變更的值
blur	在組件 Input 失去焦點時觸發	(event: Event)
focus	在組件 Input 獲得焦點時觸發	(event: Event)

Methods

方法名	說明	參數
focus	使 input 獲取焦點	-