InputTag

基于 ElTag ElInput 的输入多个标签的输入框

提示

你也可以选择 ElInputTag 替代这个组件

使用

基础用法

使用 pro-input-tag 支持 type=“text” 的大部分配置

<template>
  <pro-input-tag
    v-model="inputTags"
    placeholder="Please click the Enter button after input"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const inputTags = ref([])

    return {
      inputTags,
    }
  },
})
</script>

触发方式

提示

自 1.0.0 起，默认触发方式调整为 enter

通过 trigger 配置触发方式，支持 space enter

<template>
  <pro-input-tag
    v-model="inputTags"
    trigger="space"
    placeholder="Please click the space button after input"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const inputTags = ref([])

    return {
      inputTags,
    }
  },
})
</script>

限制输入数量

通过 max 可以配置可以输入标签的最大数量

<template>
  <pro-input-tag
    v-model="inputTags"
    :max="3"
    placeholder="Enter up to 3 tags"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const inputTags = ref([])

    return {
      inputTags,
    }
  },
})
</script>

尺寸

可通过 size 属性指定输入框和标签的尺寸

<template>
  <pro-input-tag
    v-for="item in sizeList"
    :key="item"
    v-model="inputTags"
    :size="item"
    placeholder="Please click the Enter button after input"
    class="input-tag-size"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const inputTags = ref([])
    const sizeList = ['large', 'default', 'small']

    return {
      inputTags,
      sizeList,
    }
  },
})
</script>

<style>
.input-tag-size {
  margin-bottom: 10px;
}
.input-tag-size:last-child {
  margin-bottom: 0;
}
</style>

配置

参数说明类型可选值默认值
v-model绑定值array--
trigger触发输入按键stringspace / enterenter
max可输入的最大数量number--
size尺寸stringlarge / default /small-
typetag 类型stringsuccess / info / warning / danger-
hittag 是否有边框描边boolean-false
colortag 背景色string--
effecttag 主题stringdark / light / plainlight
maxlength原生属性，最大输入长度number--
minlength原生属性，最小输入长度number--
show-word-limit是否显示输入字数统计boolean-false
placeholder输入框占位文本string--
clearable是否可清空boolean-false
disabled禁用boolean-false
prefix-icon输入框头部图标string--
suffix-icon输入框尾部图标string--
autocomplete原生属性，自动补全stringon / offoff
name原生属性string--
readonly原生属性，是否只读boolean-false
autofocus原生属性，自动获取焦点boolean-false
form原生属性string--
label输入框关联的 label 文字string--
tabindex输入框的 tabindexstring--
validate-event输入时是否触发表单的校验boolean-true
input-styleinput 元素的样式object--

事件

事件名说明类型
inputInput 值改变时触发(value: string) => void
tag-add新增 tag 时触发(value: string) => void
tag-remove关闭 tag 时触发(value: string) => void