书山有路勤为径,学海无涯苦作舟。 知识改变命运,行动创造未来。

inputnumber计数器

基础使用

要使用它,只需要在el-input-number元素中使用v-model绑定变量即可,变量的初始值即为默认值。

<template>
  <div>
    <el-input-number v-model="inputvalue" :min="1" :max="10"></el-input-number>

  </div>



</template>

<script>
  export default {
    data () {
      return {
        inputvalue: "1"
      };
    }
  }
</script>

<style>

</style>

禁用状态

disabled属性接受一个Boolean,设置为true即可禁用整个组件,如果你只需要控制数值在某一范围内,可以设置min属性和max属性,不设置minmax时,最小值为 0。

步数

设置step属性可以控制步长,接受一个Number

严格步数

step-strictly属性接受一个Boolean。如果这个属性被设置为true,则只能输入步数的倍数。

精度

设置 precision 属性可以控制数值精度,接收一个 Numberprecision 的值必须是一个非负整数,并且不能小于 step 的小数位数。

尺寸

size 额外提供了 mediumsmallmini 三种尺寸的数字输入框

按钮位置

设置 controls-position 属性可以控制按钮位置。

实验代码

<template>
  <div>
    <el-input-number v-model="inputvalue" :min="1" :max="10" :step="3" step-strictly precision="2"></el-input-number>


     <el-input-number size="medium" v-model="inputvalue"></el-input-number>
     <el-input-number size="small" v-model="inputvalue"></el-input-number>
     <el-input-number size="mini" v-model="inputvalue"></el-input-number>



     <div>
       <el-input-number controls-position="right"></el-input-number>
     </div>
  </div>



</template>

<script>
  export default {
    data () {
      return {
        inputvalue: "1"
      };
    }
  }
</script>

<style>

</style>

实验效果

images