ElementPlus InputNumber 計(jì)數(shù)器

InputNumber 計(jì)數(shù)器

僅允許輸入標(biāo)準(zhǔn)的數(shù)字值，可定義范圍

基礎(chǔ)用法

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

<template>
  <el-input-number
    v-model="num"
    @change="handleChange"
    :min="1"
    :max="10"
    label="描述文字"
  ></el-input-number>
</template>

<script>
  export default {
    data() {
      return {
        num: 1,
      }
    },
    methods: {
      handleChange(value) {
        console.log(value)
      },
    },
  }
</script>

禁用狀態(tài)

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

<template>
  <el-input-number v-model="num" :disabled="true"></el-input-number>
</template>

<script>
  export default {
    data() {
      return {
        num: 1,
      }
    },
  }
</script>

步數(shù)

允許定義遞增遞減的步數(shù)控制

設(shè)置step屬性可以控制步長(zhǎng)，接受一個(gè)Number。

<template>
  <el-input-number v-model="num" :step="2"></el-input-number>
</template>

<script>
  export default {
    data() {
      return {
        num: 5,
      }
    },
  }
</script>

嚴(yán)格步數(shù)

step-strictly屬性接受一個(gè)Boolean。如果這個(gè)屬性被設(shè)置為true，則只能輸入步數(shù)的倍數(shù)。

<template>
  <el-input-number v-model="num" :step="2" step-strictly></el-input-number>
</template>

<script>
  export default {
    data() {
      return {
        num: 2,
      }
    },
  }
</script>

精度

設(shè)置 precision 屬性可以控制數(shù)值精度，接收一個(gè) Number。

<template>
  <el-input-number
    v-model="num"
    :precision="2"
    :step="0.1"
    :max="10"
  ></el-input-number>
</template>

<script>
  export default {
    data() {
      return {
        num: 1,
      }
    },
  }
</script>

尺寸

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

<template>
  <el-input-number v-model="num1"></el-input-number>
  <el-input-number size="medium" v-model="num2"></el-input-number>
  <el-input-number size="small" v-model="num3"></el-input-number>
  <el-input-number size="mini" v-model="num4"></el-input-number>
</template>

<script>
  export default {
    data() {
      return {
        num1: 1,
        num2: 1,
        num3: 1,
        num4: 1,
      }
    },
  }
</script>

按鈕位置

設(shè)置 controls-position 屬性可以控制按鈕位置。

<template>
  <el-input-number
    v-model="num"
    controls-position="right"
    @change="handleChange"
    :min="1"
    :max="10"
  ></el-input-number>
</template>

<script>
  export default {
    data() {
      return {
        num: 1,
      }
    },
    methods: {
      handleChange(value) {
        console.log(value)
      },
    },
  }
</script>

Attributes

Events

Methods