NumberInput 数字输入框

通常用在需要以更友好的交互进行数字的输入的场合。

代码示例

基础用法

直接输入数字，或使用右侧的控件进行加减操作。

Number Input Value:

<template>
  <chi-number-input style="max-width: 300px" v-model:value="value"></chi-number-input>
  <p>Number Input Value: {{ value }}</p>
</template>

<script setup>
import { ref } from 'vue'

const value = ref()
</script>

禁用状态

添加 disabled 属性可以设置禁用状态。

<template>
  <chi-number-input placeholder="正常状态" style="max-width: 300px"></chi-number-input>
  <br />
  <br />
  <chi-number-input disabled placeholder="禁用状态" style="max-width: 300px"></chi-number-input>
</template>

改变尺寸

设置 size 属性的值可以改变输入框的尺寸，目前一共提供了三种尺寸供选择。

<template>
  <chi-number-input
    size="small"
    placeholder="Small size"
    style="max-width: 300px"
  ></chi-number-input>
  <br />
  <br />
  <chi-number-input placeholder="Default / Medium size" style="max-width: 300px"></chi-number-input>
  <br />
  <br />
  <chi-number-input
    size="large"
    placeholder="Large size"
    style="max-width: 300px"
  ></chi-number-input>
</template>

可清空

添加 clearable 属性可以使控件值可清空。

<template>
  <chi-number-input clearable style="max-width: 300px" v-model:value="value"></chi-number-input>
</template>

<script setup>
import { ref } from 'vue'

const value = ref()
</script>

数值范围

通过 min 和 max 属性可以分别设置数值的最小和最大值。

Number Input Value:

<template>
  <chi-number-input
    v-model:value="value"
    :min="0"
    :max="10"
    style="max-width: 300px"
  ></chi-number-input>
  <p>Number Input Value: {{ value }}</p>
</template>

<script setup>
import { ref } from 'vue'

const value = ref()
</script>

不同状态

通过 state 可以设置不同的状态。

<template>
  <chi-number-input style="max-width: 300px"></chi-number-input>
  <br />
  <br />
  <chi-number-input state="success" style="max-width: 300px"></chi-number-input>
  <br />
  <br />
  <chi-number-input state="warning" style="max-width: 300px"></chi-number-input>
  <br />
  <br />
  <chi-number-input state="error" style="max-width: 300px"></chi-number-input>
</template>