Tags input

The tags closely resemble the labels and follow the same line of color. With the help of Tag component from Element-ui we created and styled tags along with an input resembling a tag input.

import {Tag} from 'element-ui'

Global usage

Vue.use(Tag)

For local usage

export default {
  components: {
    [Tag.name]: Tag
  }
}

Tags with input

Tag 1 Tag 2 Tag 3 
<template>
 <tags-input v-model="tags"></tags-input>
</template>

<script>
  export default {
    data() {
      return {
         tags: ['Tag 1', 'Tag 2', 'Tag 3'],
      }
    }
  }
</script>
Show Code

Tag type

Tag 1 Tag 2 Tag 3 
<template>
 <tags-input v-model="tags2" tag-type="info"></tags-input>
</template>

<script>
  export default {
    data() {
      return {
         tags2: ['Tag 1', 'Tag 2', 'Tag 3'],
      }
    }
  }
</script>
Show Code

Tags Input Props

Tag events

Name Description Params
input triggers when current input value changes the updated value
change triggers when a tag is added/removed the updated list of tags

←