input-number 数字输入框

基础用法

html

<template>
  <dk-input-number></dk-input-number>
</template>
<script>
  import { defineComponent, ref } from 'vue'
  export default defineComponent({
    setup() {
      const value = ref(0)
      return {
        value
      }
    }
  })
</script>

展开

禁用状态

disabled 属性设置为 true 时，数字输入框为禁用状态。

html

<template>
  <dk-input-number v-model="value" disabled></dk-input-number>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue'
  export default defineComponent({
    setup() {
      const value = ref(0)
      return {
        value
      }
    }
  })
</script>

展开

尺寸

size 属性用于控制数字输入框组件的尺寸，可选值为 large、medium、small(默认)和 mini。

html

<template>
  <dk-input-number size="large"></dk-input-number>
  <dk-input-number size="medium"></dk-input-number>
  <dk-input-number size="small"></dk-input-number>
  <dk-input-number size="mini"></dk-input-number>
</template>

展开

最大值与最小值

max 属性用于设置数字输入框的最大值，min 属性用于设置数字输入框的最小值。

html

<template>
  <dk-input-number :max="10" :min="0"></dk-input-number>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue'
  export default defineComponent({
    setup() {
      const value = ref(0)
      return {
        value
      }
    }
  })
</script>

展开

步长

step 属性用于设置数字输入框的步长，默认为 1。

html

<template>
  <dk-input-number :step="2"></dk-input-number>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue'
  export default defineComponent({
    setup() {
      const value = ref(0)
      return {
        value
      }
    }
  })
</script>

展开

精度

precision 属性用于设置数字输入框的精度，默认为 0。

html

<template>
  <dk-input-number :precision="2"></dk-input-number>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue'
  export default defineComponent({
    setup() {
      const value = ref(0)
      return {
        value
      }
    }
  })
</script>

展开

严格模式

strict 属性用于设置数字输入框的严格模式，当 strict 属性为 true 时，输入框的值只能输入设置好的步长值。

html

<template>
  <dk-input-number :step="2" strict></dk-input-number>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue'
  export default defineComponent({
    setup() {
      const value = ref(0)
      return {
        value
      }
    }
  })
</script>

展开

位置

position 属性用于设置数字输入框的位置，可选值为 left、right。

html

<template>
  <dk-input-number position="left"></dk-input-number>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue'
  export default defineComponent({
    setup() {
      const value = ref(0)
      return {
        value
      }
    }
  })
</script>

展开

属性

参数	说明	类型	可选值	默认值
`v-model`	绑定值	`number`	—	—
`size`	输入框尺寸	`string`	`large` `medium` `small` `mini`	`small`
`disabled`	是否禁用状态	`boolean`	—	`false`
`max`	设置最大值	`number`	—	`Infinity`
`min`	设置最小值	`number`	—	`-Infinity`
`step`	设置步长	`number`	—	`1`
`precision`	数值精度	`number`	—	`0`
`strict`	是否严格模式，严格模式下，输入框的值只能输入设置好的步长值	`boolean`	—	`false`
`placeholder`	占位文本	`string`	—	—
`position`	按钮位置	`string`	`left` `right`	`right`

事件

事件名称	说明	回调参数
`change`	绑定值变化时触发	`value`

input-number 数字输入框 ​

input-number 数字输入框