VEUI

VEUI on GitHub
Play!EnglishEN
⌘ K | 全文搜索…

NumberInput 数字输入

示例

尺寸

可供选用的尺寸 ui 属性值：xs / s / m。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-number-input v-model="value"/>
  </section>
  <section>
    <veui-number-input
      v-model="value"
      ui="s"
    />
  </section>
  <section>
    <veui-number-input
      v-model="value"
      ui="xs"
    />
  </section>
</article>
</template>

<script>
import { NumberInput } from 'veui'

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

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}
</style>

只读状态

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

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-checkbox v-model="readonly">
      只读
    </veui-checkbox>
  </section>
  <section>
    <veui-number-input
      v-model="value"
      :readonly="readonly"
    />
  </section>
  <section>
    <veui-number-input
      v-model="value"
      :readonly="readonly"
      ui="s"
    />
  </section>
  <section>
    <veui-number-input
      v-model="value"
      :readonly="readonly"
      ui="xs"
    />
  </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>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

禁用状态

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

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-checkbox v-model="disabled">
      禁用
    </veui-checkbox>
  </section>
  <section>
    <veui-number-input
      v-model="value"
      :disabled="disabled"
    />
  </section>
  <section>
    <veui-number-input
      v-model="value"
      :disabled="disabled"
      ui="s"
    />
  </section>
  <section>
    <veui-number-input
      v-model="value"
      :disabled="disabled"
      ui="xs"
    />
  </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>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}
</style>

精度位数和递增/递减

设置 decimal-place 来指定数值的小数精度位数。

设置 step 来指定每次递增/减的数值。

精确2位小数,递增0.01

精确2位小数,递增0.1

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <h4>精确2位小数,递增0.01</h4>
    <veui-number-input
      :decimal-place="2"
      :step="0.01"
    />
  </section>
  <section>
    <h4>精确2位小数,递增0.1</h4>
    <veui-number-input
      :decimal-place="2"
      :step="0.1"
    />
  </section>
</article>
</template>

<script>
import { NumberInput } from 'veui'

export default {
  components: {
    'veui-number-input': NumberInput
  }
}
</script>

API

属性

名称类型默认值描述
uistring-

预设样式。

值描述
xs超小尺寸样式。
s小尺寸样式。
m中尺寸样式。
valuenumber-

v-model

数字输入框的值。

readonlybooleanfalse数字输入框是否为只读状态。
disabledbooleanfalse数字输入框是否为禁用状态。
placeholderstring-输入占位符。
autofocusbooleanfalse数字输入框是否自动聚焦。
select-on-focusbooleanfalse聚焦时是否自动选中数字输入框文本。
maxnumber-允许的最大值。
minnumber-允许的最小值。
decimal-placenumber0数值的小数精度位数，默认精确到整数位，-1 表示不处理精度。
stepnumber1每次递增/递减的数值。
format(val: number, defaultFormattedValue: string) => string-自定义数字格式化。
parse(val: string) => number-自定义将输入的值解析成数字。

插槽

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

事件

名称描述
change

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

名称类型描述
valuenumber数字输入框的值。
eventEvent原生事件对象。
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减少按钮。
在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2024