SuitInputNumber 数字输入框

说明

基于elementUi Input输入框封装的数字输入框，支持整数、负数、小数等功能

基本示例

numberType设置为number，可以限制输入只能为整数，numberType默认为number

<template>
    <div style="width:200px">
        <suit-input-number v-model="number" placeholder="请输入"/>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        number: null
      }
    }
  }
</script>

Expand Copy Copy

限制只能输入正整数

通过设置containsZero为false，可以限制输入0

<template>
    <div style="width:200px">
        <suit-input-number 
            v-model="number" 
            :containsZero="false" 
            :minus="false" 
            placeholder="请输入"
        />
    </div>
</template>
<script>
  export default {
    data() {
      return {
        number: null
      }
    }
  }
</script>

Expand Copy Copy

设置能输入小数

numberType设置为float，设置输入框可以为小数

<template>
    <div style="width:200px">
        <suit-input-number 
            number-type="float"
            v-model="number" 
            placeholder="请输入"
        />
    </div>
</template>
<script>
  export default {
    data() {
      return {
        number: null
      }
    }
  }
</script>

Expand Copy Copy

限制整数以及小数位数

设置numberLength可以限制整数位数，设置floatLength可以限制小数位数

<template>
    <div style="width:200px">
        <suit-input-number 
            number-type="float"
            v-model="number" 
            :numberLength="12"
            :floatLength="2"
            placeholder="请输入"
        />
    </div>
</template>
<script>
  export default {
    data() {
      return {
        number: null
      }
    }
  }
</script>

Expand Copy Copy

限制数字大小

设置max可以限制数字最大值，设置min可以限制数字最小值

<template>
    <div style="width:200px">
        <suit-input-number 
            number-type="number"
            v-model="number" 
            :max="10"
            :min="1"
            placeholder="请输入"
        />
    </div>
</template>
<script>
  export default {
    data() {
      return {
        number: null
      }
    }
  }
</script>

Expand Copy Copy

参数说明

支持elementUi Input的参数

额外新增props

参数	说明	类型	可选值	默认值
numberType	输入框类型	string	number、float、replaceNumber	number
minus	是否可以为负数	boolean	—	true
containsZero	是否包含0	boolean	—	true
numberLength	整数最大位数	Number	—	10
floatLength	小数最大位数	Number	—	10
replaceList	正则匹配列表	Array	—	['num+']
max	输入最大值	Number	—	—
min	输入最小值	Number	—	—