Number 数字输入框

基础用法

效果预览可直接操作下方示例

通过将type属性的值指定为number

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

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

const option = ref({
  column: [
    {
      label: '数字输入框',
      prop: 'num',
      type: 'number'
    }
  ]
});
</script>

默认值

效果预览可直接操作下方示例

value属性可以提供一个初始化的默认值

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

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

const option = ref({
  column: [
    {
      label: '数字输入框',
      prop: 'num',
      type: 'number',
      value: 2
    }
  ]
})
</script>

禁用状态

效果预览可直接操作下方示例

disabled属性接受一个 Boolean，设置为true即可禁用整个组件

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

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

const option = ref({
  column: [
    {
      label: '数字输入框',
      prop: 'num',
      type: 'number',
      disabled: true
    }
  ]
});
</script>

最大值最小值

效果预览可直接操作下方示例

如果你只需要控制数值在某一范围内，可以设置min属性和max属性，不设置 min 和 max 时，范围是 -Infinity 到 Infinity。

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

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

const option = ref({
  column: [
    {
      label: '数字输入框',
      prop: 'num',
      min: 1,
      max: 2,
      type: 'number'
    }
  ]
});
</script>

步数

效果预览可直接操作下方示例

设置step属性可以控制步长，接受一个Number。

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

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

const option = ref({
  column: [
    {
      label: '数字输入框',
      prop: 'num',
      type: 'number',
      step: 2,
    }
  ]
})
</script>

严格步数

效果预览可直接操作下方示例

stepStrictly属性接受一个Boolean。如果这个属性被设置为true，则只能输入步数的倍数。

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

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

const option = ref({
  column: [
    {
      label: '数字输入框',
      prop: 'num',
      type: 'number',
      step: 2,
      stepStrictly: true,
    }
  ]
})
</script>

隐藏控制器

效果预览可直接操作下方示例

设置controls属性是否使用控制按钮。

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

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

const option = ref({
  column: [
    {
      label: '数字输入框',
      prop: 'num',
      type: 'number',
      controls: false
    }
  ]
});
</script>

尺寸

效果预览可直接操作下方示例

可通过size属性指定输入框的尺寸，还提供了large,small

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

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

const option = ref({
  column: [
    {
      label: '数字输入框',
      prop: 'input',
      type: 'number',
      size: 'large'
    },
    {
      label: '数字输入框',
      prop: 'input1',
      type: 'number',
      size: 'small'
    }
  ]
});
</script>

精度

效果预览可直接操作下方示例

设置precision属性可以控制数值精度，接收一个Number。

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

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

// 使用 ref 创建响应式的数据
const option = ref({
  column: [
    {
      label: '数字输入框',
      prop: 'num',
      type: 'number',
      precision: 2
    }
  ]
});
</script>

按钮位置

效果预览可直接操作下方示例

设置 controlsPosition属性可以控制按钮位置。

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

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

const option = ref({
  column: [
    {
      label: '数字输入框',
      prop: 'num',
      controlsPosition: '',
      type: 'number'
    }
  ]
});
</script>