gd-ui-vite

Input-Number数字输入框

基础用法 

<template>
  <GInputNumber placeholder="请输入大小" />
</template>

控制按钮

controls属性用于控制是否显示控制按钮，默认显示

<template>
  <GInputNumber placeholder="请输入大小" :controls="false" />
</template>

禁用状态

disabled属性用于控制输入，禁止用户操作
<template>
  <GInputNumber placeholder="请输入" disabled v-model="count" />
</template>

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

步长

通过设置step属性为整数，可以控制步长.

count: 1step: 2
<template>
  <span class="count">count: {{ count }}</span>
  <span class="count">step: {{ step }}</span>
  <GButton @click="step++" class="count" size="small">step++</GButton>
  <GInputNumber placeholder="大小" :step="step" v-model="count" />
</template>

<script>
export default {
  data() {
    return {
      count: 1,
      step: 2
    }
  }
}
</script>

尺寸

三种尺寸可供选择

指定size为small、medium(默认)、large，可以修改数字输入框的大小
<template>
  <GInputNumber placeholder="small尺寸" size="small" />
  <GInputNumber placeholder="medium(默认)尺寸" size="medium" />
  <GInputNumber placeholder="large尺寸" size="large" />
</template>

min/max限制

通过min、max属性可控制输入的数值范围大小

初始值: 1count值: 1
当输入的数字超过范围大小，会自动限制到范围许可中，默认min(-Infinity)、max(Infinity)，当数值等于范围边界值时，对应的控制按钮会被禁用. 并且，初始化时会执行一次范围限制.
<template>
  <span class="count">初始值: {{ initCount }}</span>
  <span class="count">count值: {{ count }}</span>
  <GInputNumber
    v-model="count"
    :max="10"
    :min="3"
    :step="3"
  />
</template>

<script>
export default {
  data() {
    const initCount = 1;
    return {
      initCount,
      count: initCount
    }
  }
}
</script>

API

参数说明类型可选值默认值
v-model绑定值number————————
placeholder数字输入框占位文本string————请输入
disabled禁用数字输入框boolean————false
size尺寸stringsmall/medium/largemedium
controls是否使用控制按钮boolean————true
step计数器步长number————1
min最小值number————-Infinity
max最大值number————Infinity