vue-tagsinput
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
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
Dependencies
Dependencies
babel-core: ^6.8.0babel-loader: ^6.2.4babel-plugin-transform-runtime: ^6.8.0babel-preset-es2015: ^6.6.0babel-preset-stage-2: ^6.5.0babel-runtime: ^6.0.0css-loader: ^0.23.1eslint: ^3.10.2eslint-plugin-vue: ^1.0.0file-loader: ^0.10.0style-loader: ^0.13.0url-loader: ^0.5.7vue: ^2.1.10vue-hot-reload-api: ^1.2.2vue-html-loader: ^1.0.0vue-loader: ^10.0.1vue-style-loader: ^1.0.0vue-template-compiler: ^2.1.10webpack: ^1.12.9webpack-dev-server: ^1.14.0