InputTag 输标签输入框

提示

3.6.0+

基础用法

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

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

正在加载示例…

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

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

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

默认值

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

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

正在加载示例…

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

禁用状态

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

通过disabled属性指定是否禁用

正在加载示例…

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

可清空

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

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

正在加载示例…

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

</script>

输入长度限制

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

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

正在加载示例…

<template>
  <avue-form :option="option"
             v-model="form"></avue-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>

拖拽

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

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

正在加载示例…

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

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

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