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.
Install the npm package.
$ npm install vue-tag-editor-set --save
Register the component.
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)
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
.
- VueTagEditor
- VueTagEditorBulma
<!-- 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"
/>
<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>
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. |
-
Please use
/deep/
when CSS is not reflected properly. -
For the place where
tagAreaClass
,tagContentClass
,deleteAreaClass
,deleteContentClass
,inputContentClass
,tagCustomClass
is set, look at: