https://github.com/simoebenhida/vue-tags

https://github.com/simoebenhida/vue-tags

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/simoebenhida/vue-tags
• Owner: simoebenhida
• Created: 2018-02-23T00:35:57.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T01:16:03.000Z (about 2 years ago)
• Last Synced: 2024-10-27T07:02:44.660Z (about 2 months ago)
• Language: Vue
• Size: 657 KB
• Stars: 12
• Watchers: 2
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

• awesome-morocco - Vuejs Tags - tags.svg?style=social)](https://github.com/simoebenhida/vue-tags/stargazers) - A Flexible Vue.js 2 input Tag component where you can edit wathever you like related to HTML/CSS. By [@simoebenhida](https://github.com/simoebenhida) (Uncategorized / Uncategorized)

README

        
# Vue-Tags

A Flexible Vue.js 2 input Tag component where you can edit wathever you like related to HTML/CSS.

## Installation :

```javascript

npm install vue-tags

```

## Getting Started

In your script entry point:

```html



  

    


            

              {{ tag }}

              ×

             

            

            

          

   




window.Vue = require("vue");

import VueTags from "vue-tags";

//Vue.component("input-tags", VueTags); If you want a global Component

const app = new Vue({

  el: "#app",

  components: {

    VueTags

  },

  data: {

    tags: ['Laravel','Vuejs'],

  }

});

```

## Usage

Just add the tags as a v-model and follow the code above just don't change the vuejs attributes and the others is your choice do wathever you want with them.

### Props

By Default The tag is `added` when you click the `Enter Key` but you can customize it by adding `addKey` prop with array of KeyCodes of your choice.

You can have it here.

For Example `['188','13']` for Comma `,` and `Enter Key`

```html



  

    


            

              {{ tag }}

              ×

             

            

            

          

   




const app = new Vue({

  el: "#app",

  components: {

    VueTags

  },

  data: {

    tags: ['Laravel','Vuejs'],

  }

});

```

By Default The tag is `deleted` when you click `delete Key` but you can customize it by adding `deleteKey` prop with array of KeyCodes of your choice.

You can have it here.

For Example `['13']` for `Enter key`

Now When we click `Enter` we delete the tag

```html



  

    


            

              {{ tag }}

              ×

             

            

            

          

   




const app = new Vue({

  el: "#app",

  components: {

    VueTags

  },

  data: {

    tags: ['Laravel','Vuejs'],

  }

});

```

## Contributing

You are more than welcome to contribute to this repo with anything you think is useful. fixes are more than welcome.