El Input Tag

A tag input editor component for Vue 2 and Element UI.

This package targets Vue 2 + Element UI. A Vue 3 / Element Plus version is not planned because Element Plus already provides its own input tag component.

中文 README

Install

npm i el-input-tag --save

Usage

Register globally:

import Vue from 'vue'
import ElementUI from 'element-ui'
import ElInputTag from 'el-input-tag'

Vue.use(ElementUI)
Vue.use(ElInputTag)

Register locally:

import { ElInputTag } from 'el-input-tag'

export default {
  components: { ElInputTag }
}

Use with v-model:

<el-form :model="form" ref="form">
  <el-form-item>
    <el-input-tag v-model="form.tags" placeholder="Add a tag" />
  </el-form-item>
</el-form>

export default {
  data () {
    return {
      form: {
        tags: []
      }
    }
  }
}

Props

| Attribute | Description | Type | Accepted Values | Default | | --------- | ----------- | ---- | --------------- | ------- | | value / v-model | Tag list | array | | [] | | size | Input size | string | mini / small / medium | | | read-only | Whether input is readonly | boolean | | false | | placeholder | Input placeholder | string | | | | add-tag-on-keys | Key codes that add the current tag | array | | [13, 188, 9] | | transform-tag | Function used to transform a normalized string before saving | function | | tag => tag | | validate-tag | Function used to validate a normalized string before saving | function | | () => true |

Element UI tag attributes such as type, hit, color, and effect are passed through to the internal el-tag.

Events

| Event | Description | Parameters | | ----- | ----------- | ---------- | | input | Emitted for v-model updates | tags | | invalid | Emitted when validate-tag rejects a tag or transform-tag returns null / undefined | tag |

Examples

Custom keys

By default, Enter, comma, and Tab add the current tag. You can customize this with add-tag-on-keys:

<el-input-tag v-model="tags" :add-tag-on-keys="[13]" />

Number arrays

Use validate-tag and transform-tag when you need a number array instead of a string array:

<el-input-tag
  v-model="ids"
  :validate-tag="tag => /^\d+$/.test(tag)"
  :transform-tag="tag => Number(tag)"
/>

Typing 1,2,3 will emit [1, 2, 3].

Notes

This component wraps Element UI's el-tag, so Element UI must be installed and registered before using this component.