InputTag

Enter an array of tags

Use

Basic Use

When using pro-input-tag, most attribute of type="text" are supported

<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>

Trigger

TIP

Since 1.0.0, The default trigger mode is adjusted to Enter

Input is triggered by the space bar by default, Set trigger="enter" attribute to enable trigger by 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>

Limit max tags

The max number of tags that can be entered can be configured through 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>

Component Size

Set size attribute to change the size of Input and Tag

<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>

Autocomplete

When using pro-autocomplete-tag, most attribute of ElAutocomplete are supported

<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 Props

NameDescriptionTypeOptionsDefault
v-modelbinding valuearray--
triggerthe key to trigger input tagstringspace / enterenter
maxmax number tags that can be enternumber--
sizecomponent sizestringlarge / default /small-
typetag Typestringsuccess / info / warning / danger-
hitwhether Tag has a highlighted borderboolean-false
colorbackground color of the Tagstring--
effectcomponent theme of the Tagstringdark / light / plainlight
maxlengthmaximum Input text lengthnumber--
minlengthminimum Input text lengthnumber--
show-word-limitwhether show word countboolean-false
placeholderplaceholder of Inputstring--
clearablewhether to show clear buttonboolean-false
disabledwhether disabledboolean-false
prefix-iconprefix icon classstring--
suffix-iconsuffix icon classstring--
autocompletesame as autocomplete in native inputstringon / offoff
namesame as name in native inputstring--
readonlysame as readonly in native inputboolean-false
autofocussame as autofocus in native inputboolean-false
formsame as form in native inputstring--
labellabel textstring--
tabindexinput tabindexstring--
validate-eventwhether to trigger form validationboolean-true
input-stylethe style of inputobject--

InputTag Events

NameDescriptionParameters
inputtriggers when the Input value change(value: string)
tag-addtriggers when add a tag(value: string)
tag-removetriggers when close button is clicked(value: string)

AutocompleteTag

Enter an array of tags with some recommended tips

AutocompleteTag Props

NameDescriptionTypeOptionsDefault
v-modelbinding valuearray--
triggerthe key to trigger input tagstringspace / enterenter
maxmax number that can be enternumber--
sizecomponent sizestringlarge / default /small-
typetag Typestringsuccess / info / warning / danger-
hitwhether Tag has a highlighted borderboolean-false
colorbackground color of the Tagstring--
effectcomponent theme of the Tagstringdark / light / plainlight
placeholderplaceholder of Inputstring--
disabledwhether disabledboolean-false
value-keykey name of the input suggestion object for displaystring-value
debouncedebounce delay when typing, in millisecondsnumber-300
placementplacement of the popup menustringtop / top-start / top-end / bottom / bottom-start / bottom-endbottom-start
fetch-suggestionsa method to fetch input suggestions. When suggestions are ready, invoke callback(data:[]) to return them to AutocompleteFunction(queryString, callback)--
popper-classcustom class name for autocomplete’s dropdownstring--
trigger-on-focuswhether show suggestions when input focusboolean-true
namesame as name in native inputstring--
select-when-unmatchedwhether to emit a select event on enter when there is no autocomplete matchboolean-false
labellabel textstring--
prefix-iconprefix icon classstring--
suffix-iconsuffix icon classstring--
hide-loadingwhether to hide the loading icon in remote searchboolean-false
teleportedwhether select dropdown is teleported to the bodyboolean-true
highlight-first-itemwhether to highlight first item in remote search suggestions by defaultboolean-false
fit-input-widthwhether the width of the dropdown is the same as the inputbooleanfalse

AutocompleteTag Events

NameDescriptionParameters
inputtriggers when the Input value change(value: string)
tag-addtriggers when add a tag(value: string)
tag-removetriggers when close button is clicked(value: string)