基础用法

vue2

vue3

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

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

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

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

默认值

vue2

vue3

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

<template>
  <tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
  column: [
    {
      label: '输入框',
      prop: 'input',
      value: '默认值'
    }
  ]
})
</script>

禁用状态

vue2

vue3

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

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

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

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

最大值最小值

vue2

vue3

如果你只需要控制数值在某一范围内，可以设置`min`属性和`max`属性，不设置`min`和`max`时，最小值为 `0`

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

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

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

步数

vue2

vue3

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

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

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

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

严格步数

vue2

vue3

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

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

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

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

隐藏控制器

vue2

vue3

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

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

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

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

尺寸

vue2

vue3

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

<template>
  <tvue-form :option="option"></tvue-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>

精度

vue2

vue3

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

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

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

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

按钮位置

vue2

vue3

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

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

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

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