No description, website, or topics provided.
Switch branches/tags
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist the begin Feb 23, 2018
src Tiny fix Oct 24, 2018
.babelrc the begin Feb 23, 2018
.gitignore remove DS Store Feb 23, 2018
demo.gif the begin Feb 23, 2018
package.json 1.0.4 Feb 23, 2018
readme.md Update documentation Oct 24, 2018
webpack.config.js the begin Feb 23, 2018
yarn.lock the begin Feb 23, 2018

readme.md

Vue-Tags

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

Logo

Demo

Demo

Installation :

npm install vue-tags

Getting Started

In your script entry point:

<div id="app">

  <input-tags v-model="tags">
    <div class="tags-input"
            slot-scope="{tag,removeTag,inputEventHandlers,inputBindings }">
            <span v-for="tag in tags"
              class="tags-input-tag">
              <span>{{ tag }}</span>
              <button type="button" class="tags-input-remove"
                v-on:click="removeTag(tag)"
              >&times;
             </button>
            </span>
            <input
              class="tags-input-text"  placeholder="Add tag..."
              v-on="inputEventHandlers"
              v-bind="inputBindings"
            >
          </div>
   </input-tags>

</div>

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

<div id="app">

  <input-tags v-model="tags" add-key="['188','13']">
    <div class="tags-input"
            slot-scope="{tag,removeTag,inputEventHandlers,inputBindings }">
            <span v-for="tag in tags"
              class="tags-input-tag">
              <span>{{ tag }}</span>
              <button type="button" class="tags-input-remove"
                v-on:click="removeTag(tag)"
              >&times;
             </button>
            </span>
            <input
              class="tags-input-text"  placeholder="Add tag..."
              v-on="inputEventHandlers"
              v-bind="inputBindings"
            >
          </div>
   </input-tags>

</div>

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

<div id="app">

  <input-tags v-model="tags" delete-key="['13']">
    <div class="tags-input"
            slot-scope="{tag,removeTag,inputEventHandlers,inputBindings }">
            <span v-for="tag in tags"
              class="tags-input-tag">
              <span>{{ tag }}</span>
              <button type="button" class="tags-input-remove"
                v-on:click="removeTag(tag)"
              >&times;
             </button>
            </span>
            <input
              class="tags-input-text"  placeholder="Add tag..."
              v-on="inputEventHandlers"
              v-bind="inputBindings"
            >
          </div>
   </input-tags>

</div>

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.