InputTag

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

使用

基础用法

使用 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>
显示代码

带输入建议

pro-autocomplete-tag 提供输入建议,支持 autocomplete 的大部分配置

<template>
  <pro-autocomplete-tag
    v-model="inputTags"
    :fetch-suggestions="querySearch"
    placeholder="Please click the space button after input"
  />
</template>

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

export default defineComponent({
  setup() {
    const inputTags = ref([])
    const list = [
      { value: 'Go', tag: 'go' },
      { value: 'JavaScript', tag: 'javascript' },
      { value: 'Python', tag: 'python' },
    ]

    function querySearch(queryString, cb) {
      cb(
        queryString
          ? list.filter((i) => {
              return i.value.indexOf(queryString.toLowerCase()) === 0
            })
          : list
      )
    }

    return {
      inputTags,
      querySearch,
    }
  },
})
</script>
显示代码

InputTag 配置

参数说明类型可选值默认值
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--

InputTag 事件

事件名说明参数
inputInput 值改变时触发(value: string)
tag-add新增 tag 时触发(value: string)
tag-remove关闭 tag 时触发(value: string)

AutocompleteTag

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

AutocompleteTag 配置

参数说明类型可选值默认值
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
placeholder输入框占位文本string--
disabled禁用boolean-false
value-key输入建议对象中用于显示的键名string-value
debounce获取输入建议的去抖延时number-300
placement菜单弹出位置stringtop / top-start / top-end / bottom / bottom-start / bottom-endbottom-start
fetch-suggestions返回输入建议的方法Function(queryString, callback)--
popper-classAutocomplete 下拉列表的类名string--
trigger-on-focus是否在输入框 focus 时显示建议列表boolean-true
name原生属性string--
select-when-unmatched按下回车是否触发 select 事件boolean-false
label输入框关联的 label 文字string--
prefix-icon输入框头部图标string--
suffix-icon输入框尾部图标string--
hide-loading是否隐藏远程加载时的加载图标boolean-false
teleported是否将下拉列表插入至 body 元素boolean-true
highlight-first-item是否默认突出显示远程搜索建议中的第一项boolean-false

AutocompleteTag 事件

事件名说明参数
inputInput 值改变时触发(value: string)
tag-add新增 tag 时触发(value: string)
tag-remove关闭 tag 时触发(value: string)