基础用法

vue2

vue3

按 Enter 回车键添加输入内容为标签

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

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

const option = ref({
  column: [
    {
      label: '标签',
      prop: 'tag',
      type: 'tag',
    }
  ]
});
</script>

默认值

vue2

vue3

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

<template>
  <tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
  column: [
    {
      label: '标签',
      prop: 'tag',
      type: 'tag',
      value: [1, 2, 3],
    }
  ]
})
</script>

禁用状态

vue2

vue3

通过`disabled`属性指定是否禁用

<template>
  <tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
  column: [
    {
      label: '标签',
      prop: 'tag',
      type: 'tag',
      disabled: true
    }
  ]
})
</script>

可清空

vue2

vue3

使用`clearable`属性即可得到一个可清空的输入框,默认为`true`

<template>
  <tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
  column: [
    {
      label: '标签',
      prop: 'tag',
      type: 'tag',
      clearable: 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: 'tag',
      type: 'tag',
      size: 'large',
    },
    {
      label: '标签',
      prop: 'tag1',
      type: 'tag',
      size: 'small'
    }
  ]
})

</script>

输入长度限制

vue2

vue3

`maxlength` 和 `minlength` 是原生属性，用来限制输入框的字符长度，其中字符长度是用 `Javascript` 的字符串长度统计的。在使用 `maxlength` 属性限制最大输入长度的同时，可通过设置 `showWordLimit` 属性来展示字数统计

<template>
  <tvue-form :option="option"
             v-model="form"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const form = ref({})
const option = ref({
  column: [
    {
      label: '标签',
      prop: 'tag',
      type: 'tag',
      maxlength: 10,
      showWordLimit: true
    }
  ]
})
</script>

拖拽

vue2

vue3

配置`drag`为`true`即可开启拖拽模式

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

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

const option = ref({
  column: [
    {
      label: '标签',
      prop: 'tag',
      type: 'tag',
      value: [1, 2, 3],
      drag: true
    }
  ]
});
</script>