Vue-tag-editor-set NPM

vue-tag-editor-set

A Vue.js component for creating tag editor. Easy to use by providing simple api. And you can customize the style of this component by css.

Installation

Install the npm package.

$ npm install vue-tag-editor-set --save

import { VueTagEditor, VueTagEditorBulma } from 'vue-tag-editor'  #if you want to use bulma design component, include VueTagEditorBulma

Vue.component('tag-editor', VueTagEditor)
Vue.component('tag-editor-bulma', VueTagEditorBulma)

Demo

You can see the demo for quickly understand how to use this package.

$ git clone git@github.com:yukihirop/vue-tag-editor.git
$ cd vue-tag-editor
$ npm install
$ npm run demo

Check the code from ./demo/index.html and ./demo/App.vue.

Support Component

VueTagEditor
VueTagEditorBulma

Usage

Basic Usage (Case When VueTagEditor)

<!-- when type is label -->
<tag-editor
  :tags="tagLabels"
  :type="'label'"
  @handler-after-input-tag="handlerAfterInputTag"
  @handler-after-delete-tag="handlerAfterDeleteTag"
/>

<!-- when type is link -->
<!-- handler-after-click-tag is effective only when type is 'link' -->
<tag-editor
  :tags="tagLinks"
  :type="'link'"
  @handler-after-click-tag="handlerAfterClickTag"
  @handler-after-input-tag="handlerAfterInputTag"
  @handler-after-delete-tag="handlerAfterDeleteTag"
/>

Example

<template>
  <tag-editor
    :tags="tags"
    :type="'link'"
    @handler-after-click-tag="handlerAfterClickTag"
    @handler-after-input-tag="handlerAfterInputTag"
    @handler-after-delete-tag="handlerAfterDeleteTag"
  />
</template>

<script>
export default {
  data(){
    return {
      tags: ['javascript', 'ruby']
    }
  },
  methods: {
    // Only one argument
    handlerAfterClickTag(tag){
      alert(tag + ' is click!')
    },
    // Only two argument
    handlerAfterInputTag(tag, isAddTag){
      if (isAddTag === true) {
        console.log(tag + ' is added!')
      } else {
        console.log(tag + ' isn\'t added')
      }
    },
    // Only one argument
    handlerAfterDeleteTag(tag){
      console.log(tag + ' is deleted!')
    }
  }
}
</script>

Props

There is no required props. all optional.

Name	Type	Description	Remarks
`tags`	`Array`	tags to display. default is `[]`.
`type`	`String`	type of tag. default is `label`.	`label` or `link`.
`tag-area-class`	`String`	CSS class name for tag `span`.	`Only VueTagEditor`
`tag-content-class`	`String`	CSS class name for tag `label` (when type is label) or `a` (when type is link).	`Only VueTagEditor`
`delete-area-class`	`String`	CSS class name for tag delete `button`.	`Only VueTagEditor`
`delete-content-class`	`String`	CSS class name for tag delete button `text`.	`Only VueTagEditor`
`input-content-class`	`String`	CSS class name for tag `input`.
`tag-custom-class`	`String`	CSS class name for tag `span`.When you want to overwrite css of `VueTagEditorBulma` and so on.
`placeholder`	`String`	Input placeholer message. default is `Add tags...`.
@handler-after-click-tag	`Function`	The method to call when tag clicked. Use clicked `tagname` as parameter.	`Only effective when type is link`
@handler-after-input-tag	`Function`	The method to call when tag inputed. Use inputed `tagname` and `success or failure` as parameter.
@handler-after-delete-tag	`Function`	The method to call when tag deleted. Use deleted `tagname` as parameter.

Note

Please use /deep/ when CSS is not reflected properly.

For the place where tagAreaClass, tagContentClass, deleteAreaClass, deleteContentClass, inputContentClass, tagCustomClass is set, look at:

- [tag-editor_type-label.html](https://github.com/yukihirop/vue-tag-editor/blob/master/docs/tag-editor_type-label.html)
- [tag-editor_type-link.html](https://github.com/yukihirop/vue-tag-editor/blob/master/docs/tag-editor_type-link.html)

vue tag editor tag input

bulma vue

@infinitebrahmanuniverse/nolb-vue-ta @everything-registry/sub-chunk-3093

5 years ago

5 years ago

5 years ago

5 years ago