vue-tag-fields

operable input box with tag in vue
1,386
tag tag-input tag-fields vue-tag-input
Install
npm install vue-tag-fields
Latest Version:1.2.2
Vue:2
License:MIT
Last Updated:Feb 21, 2020
Links: GitHub  ·  npm
Maintainer: mayness

vue-tag-fields

NPM version build status Test coverage

简介

带tag标签的可增删改的vue input输入框样式的组件

使用

NPM

// Vue.use引入
import TagFields from 'vue-tag-fields';
Vue.use(TagFields);

// 组件自定义引入
import { TagFields } from 'vue-tag-fields';

<tag-fields v-model="data"></tag-fields>

操作

新增tag：输入完成后回车增加
修改tag：点击tag出现输入框，修改完成后回车确定修改。

API

属性

属性 说明 类型 默认值
v-model 双向绑定的值，数组中的值需要为String类型 Array []
placeholder 占位文本 String -
disabled 是否禁用 Boolean false
ready-only 给定的初始值仅可读，不能修改或删除 Boolean false
allow-duplicates 是否允许出现重复的值，如果重复则无法添加 Boolean true
onblur-append 输入框失去焦点时，是否添加当前输入字符 Boolean false
max-tag-length tag最多可以有多少个 Number -
before-change 用于数据添加前的钩子函数，返回添加的value和index，该函数应该返回true或false，表示是否应用添加。当删除元素的时候，value值为undefined。用于自定义校验时，不要设置ready-only或max-tag-length属性 Function -

方法

方法名 说明 返回值
change 数据改变时触发 操作的值value、下标index、当前值data

Related Packages

vue-input-tag

Vue.js input tag editor component

168,005 532
tag input inputtag vueinputtag
@aspectus/vue-utils

Vue related utilities that makes development easier.

3,549
tag aspectus component functional vue
@aspectus/vue-tag

Component for custom tag usage inside components. It's used to replace vue built...

3,061
tag aspectus component functional vue
el-input-tag

A input tag editor component of Element UI

15,451 33
tag component element input inputtag vue
vuepress-plugin-tags

tags plugin for vuepress

3,505 12
tag documentation generator tags vue vuepress

Version History

Version Released Vue License
1.2.2 2.x MIT
1.2.1 2.x MIT
1.2.0 2.x MIT
1.1.2 2.x MIT
1.1.1 2.x MIT