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>

Props

Name	Description	Type	Options	Default
v-model	binding value	array	-	-
trigger	the key to trigger input tag	string	space / enter	enter
max	max number tags that can be enter	number	-	-
size	component size	string	large / default /small	-
type	tag Type	string	success / info / warning / danger	-
hit	whether Tag has a highlighted border	boolean	-	false
color	background color of the Tag	string	-	-
effect	component theme of the Tag	string	dark / light / plain	light
maxlength	maximum Input text length	number	-	-
minlength	minimum Input text length	number	-	-
show-word-limit	whether show word count	boolean	-	false
placeholder	placeholder of Input	string	-	-
clearable	whether to show clear button	boolean	-	false
disabled	whether disabled	boolean	-	false
prefix-icon	prefix icon class	string	-	-
suffix-icon	suffix icon class	string	-	-
autocomplete	same as autocomplete in native input	string	on / off	off
name	same as name in native input	string	-	-
readonly	same as readonly in native input	boolean	-	false
autofocus	same as autofocus in native input	boolean	-	false
form	same as form in native input	string	-	-
label	label text	string	-	-
tabindex	input tabindex	string	-	-
validate-event	whether to trigger form validation	boolean	-	true
input-style	the style of input	object	-	-

Events

Name	Description	Parameters
input	triggers when the Input value change	(value: string)
tag-add	triggers when add a tag	(value: string)
tag-remove	triggers when close button is clicked	(value: string)

InputTag #

Use #

Basic Use #

Trigger #

Limit max tags #

Component Size #

Props #

Events #