matiastucci / vue-input-tag

:bookmark: Vue.js 2.0 Input Tag Component
https://tucci.me/vue-input-tag
MIT License
537 stars 130 forks source link
input tags vue vuejs vuejs-components vuejs2

vue-input-tag

A Vue.js 2.0 input tag component inspired in react-tagsinput

Codeship Status for matiastucci/vue-input-tag Coverage Status Version License Monthly Downloads

Logo

Installation

NPM / Yarn

npm install vue-input-tag --save
yarn add vue-input-tag

Then you need to import and register it:

import InputTag from 'vue-input-tag'
Vue.component('input-tag', InputTag)

CDN

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-input-tag"></script>

Then you need to register it:

Vue.component('input-tag', vueInputTag.default)

Usage

<input-tag v-model="tags"></input-tag>

Props

Name Type Default Description
value Array [] Tags to be render in the input
placeholder String "" Placeholder to be shown when no tags
read-only Boolean false Set input to readonly
add-tag-on-blur Boolean false Add tag on input blur
limit String or Number -1 (none) Set a limit for the amount of tags
validate String or Function (allows async) or Object "" Apply certain validator for user input. Choose from email, url, text, digits or isodate. Or pass a function or a RegExp object for custom validation
add-tag-on-keys Array [ 13 (return), 188 (comma), 9 (tab) ] Keys that are going to add the new tag
allow-duplicates Boolean false Allow duplicate tags
before-adding Function null Function (allows async) to normalize tag before adding. E.g (tag) => tag.toUpperCase()

Events

Name Arguments Description
input Array with tags Emitted when a tag is added (after successful validation) and when a tag is removed
update:tags Array with tags Same as input event