标签列表(vTagList)

单组件引入

import <name> from ‘vucc/tag-list’;

示例


结果:





代码 V

<v-tag-list :data="tagList" :placeholder="'请填写内容'" :on-before-add="onBeforeAdd" :is-delete-able="true"></v-tag-list>
<v-tag-list :data="tagList2" :on-before-add="onBeforeAdd" :is-delete-able="true" :as-content="'tags'"></v-tag-list>


data() {
    return {
        tagList: [{
            content: '内容'
        }],
        tagList2: [{
            tags: '内容'
        }]
    }
},
methods: {
    onBeforeAdd(next) {
        console.log('before add function is trigger!');
        next();
    }
}



属性

参数 说明 类型 可选值 默认值
size 组件的大小 Number normal/large/small normal
isDeleteAble 展示列表是否有删除按钮 Boolean - false
placeholder 占位符 String - ‘增加标签’
asContent content别名,传入值不是content时,可以用这个传入 String - -
data 渲染数据 Array - -
isShowInput 是否展示 Boolean - false

方法

方法名 说明 类型 参数 默认值
onAdd 标签列表增加时的回调函数 Function item,当前增加的组件item -
onDelete 标签列表删除时的回调函数 Function item,当前增加的组件item -
onBeforeAdd addItem之前调用,如有传入,则会将addItem作为回调函数传入,同时回调函数支持自定义传入item Function item,当前增加的组件item -
← 步骤条(vSteps) 时间轴(vTimeLine) →