NumberInput 数字输入

示例

尺寸

可选的 ui 属性值：large/small/tiny/micro。

<template>
<article>
  <div>
    <veui-number-input
      v-model="value"
      ui="large"
    />
  </div>
  <div><veui-number-input v-model="value"/></div>
  <div>
    <veui-number-input
      v-model="value"
      ui="small"
    />
  </div>
  <div>
    <veui-number-input
      v-model="value"
      ui="tiny"
    />
  </div>
  <div>
    <veui-number-input
      v-model="value"
      ui="micro"
    />
  </div>
</article>
</template>

<script>
import { NumberInput } from 'veui'

export default {
  components: {
    'veui-number-input': NumberInput
  },
  data () {
    return {
      value: 0
    }
  }
}
</script>

只读状态

设置 readonly 来使数字输入框处于只读状态。

只读

<template>
<article>
  <section>
    <veui-checkbox v-model="readonly">
      只读
    </veui-checkbox>
  </section>
  <section>
    <div>
      <veui-number-input
        v-model="value"
        :readonly="readonly"
        ui="large"
      />
    </div>
    <div>
      <veui-number-input
        v-model="value"
        :readonly="readonly"
      />
    </div>
    <div>
      <veui-number-input
        v-model="value"
        :readonly="readonly"
        ui="small"
      />
    </div>
    <div>
      <veui-number-input
        v-model="value"
        :readonly="readonly"
        ui="tiny"
      />
    </div>
    <div>
      <veui-number-input
        v-model="value"
        :readonly="readonly"
        ui="micro"
      />
    </div>
  </section>
</article>
</template>

<script>
import { NumberInput, Checkbox } from 'veui'

export default {
  components: {
    'veui-number-input': NumberInput,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      readonly: true,
      value: 0
    }
  }
}
</script>

禁用状态

设置 disabled 来使数字输入框处于禁用状态。

禁用

<template>
<article>
  <section>
    <veui-checkbox v-model="disabled">
      禁用
    </veui-checkbox>
  </section>
  <section>
    <div>
      <veui-number-input
        v-model="value"
        :disabled="disabled"
        ui="large"
      />
    </div>
    <div>
      <veui-number-input
        v-model="value"
        :disabled="disabled"
      />
    </div>
    <div>
      <veui-number-input
        v-model="value"
        :disabled="disabled"
        ui="small"
      />
    </div>
    <div>
      <veui-number-input
        v-model="value"
        :disabled="disabled"
        ui="tiny"
      />
    </div>
    <div>
      <veui-number-input
        v-model="value"
        :disabled="disabled"
        ui="micro"
      />
    </div>
  </section>
</article>
</template>

<script>
import { NumberInput, Checkbox } from 'veui'

export default {
  components: {
    'veui-number-input': NumberInput,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      disabled: true,
      value: 0
    }
  }
}
</script>

API

属性

名称类型默认值描述

ui

string

预设样式。

值	描述
`large`	大尺寸样式。
`small`	小尺寸样式。
`tiny`	特小尺寸样式。
`micro`	微型样式。

value

number

v-model

数字输入框的值。

readonly boolean false 数字输入框是否为只读状态。

disabled boolean false 数字输入框是否为禁用状态。

placeholder string - 输入占位符。

select-on-focus boolean false 聚焦时是否自动选中数字输入框文本。

max number - 允许的最大值。

min number - 允许的最小值。

decimalPlace number 0 数值的小数精度位数，默认精确到整数位，-1 表示不处理精度。

插槽

名称	描述
`before`	数字输入框前置内容。
`after`	数字输入框后置内容。位于增减按钮之后。

注意，插槽宽度会挤压输入框宽度。

事件

名称描述

change

原生 change 事件，回调参数为 (value, event)。

名称	类型	描述
`value`	`number`	数字输入框的值。
`event`	`Event`	原生事件对象。

input

v-model

有效输入时触发，受数字格式化影响，若当前值格式化为无效值，则不触发。回调参数为 (value: string)，value 为数字输入框的 value 值。

此外，NumberInput 支持如下的原生事件：

auxclick、click、contextmenu、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseover、mouseout、mouseup、select、wheel、keydown、keypress、keyup、focus、blur、focusin、focusout。

回调函数的参数都为原生事件对象。

图标

名称	描述
`increase`	增加按钮。
`decrease`	减少按钮。