A tags input component based on Vue.js
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist release 2.0.1 Feb 22, 2017
example update README Nov 24, 2016
src compatible with latest vue (2.1.10) Feb 22, 2017
.eslintrc.yml add eslint Nov 18, 2016
.gitignore use vue@2.1 Nov 24, 2016
LICENSE Initial commit May 3, 2016
README.md Update README.md May 25, 2018
anim.gif add a gif May 9, 2016
index.html change interface of input.vue Nov 24, 2016
package.json release 2.0.1 Feb 22, 2017
webpack.config.js compatible with latest vue (2.1.10) Feb 22, 2017

README.md

This Project Is Deprecated

vue-tagsinput

kerboard supported(left, right, backspace, tab).

Requirement

  • vue: ^2.1.0

Usage

<div id="example">
    <tags-input
        :tags="tags"
        @tags-change="handleChange"
    ></tags-input>
</div>

Example

Live example

Props

  • tags(array<{ text: string, readOnly: ?boolean, invalid: ?boolean }>, required): your tags to render
  • placeholder(string): a hint to the user
  • klass(object): override the class name (see below)

Events

  • tags-change: (index: number, text: ?string) => void text will be undefined if the tag was removed
  • focus: (index: number) => void
  • blur: (index: number) => void

Class Names

{
    container: 'tags-input',
    input: 'input',
    placeholder: 'placeholder',
    gap: 'gap',
    tag: 'tag'
}

Migration from 0.x

Because of the two-way props was obsoleted in Vue@2, we should deal with tags by one-way props and onChange callback explicitly. So most states will be handled in your scope. See the full example.

License

MIT