https://github.com/Ginhing/vue-tagsinput

A tags input component based on Vue.js
https://github.com/Ginhing/vue-tagsinput

tagsinput vue

Last synced: 3 months ago
JSON representation

A tags input component based on Vue.js

• Host: GitHub
• URL: https://github.com/Ginhing/vue-tagsinput
• Owner: Ginhing
• License: mit
• Archived: true
• Created: 2016-05-03T07:50:19.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-05-25T05:49:39.000Z (over 6 years ago)
• Last Synced: 2024-09-19T08:19:17.873Z (4 months ago)
• Topics: tagsinput, vue
• Language: Vue
• Homepage: https://vue-tagsinput.surge.sh/
• Size: 213 KB
• Stars: 76
• Watchers: 4
• Forks: 20
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue-cn - vue-tagsinput
• awesome-vue - vue-tagsinput - tagsinput?style=social) - 基于VueJS的标签组件 (UI组件)
• awesome-github-vue - vue-tagsinput - 基于VueJS的标签组件 (UI组件)
• awesome-github-vue - vue-tagsinput - 基于VueJS的标签组件 (UI组件)
• awesome - vue-tagsinput - 基于VueJS的标签组件 (UI组件)

README

        
>## This Project Is Deprecated

# vue-tagsinput

[![][npm-image]][npm-url]

[npm-image]: https://img.shields.io/npm/v/vue-tagsinput.svg

[npm-url]: https://npmjs.org/package/vue-tagsinput

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

![](anim.gif)

## Requirement

- vue: `^2.1.0`

## Usage

```html



    



```


## Example

[Live example](http://www.webpackbin.com/Vyc_H61fG)

## 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

```javascript

{

    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](./example/full.vue).

## License

[MIT](LICENSE)