Vue-Tags
使用
npm install --save vue-tags-simple # 或者 yarn add vue-tags-simple
食用指导
通过一个简单的 5 步教学,让你了解本控件所有功能!
1. 添加
尝试着在输入框中输入 Google
,然后按 Enter 键,即可添加该标签!
2. 删除标签
那个名为 Mini
的标签我也不知道是干嘛的,通过点击该标签右侧的 ✕ 来将其移除。
当前我们的输入框什么都没有,请在输入框中点击一下,让它获得焦点。然后我觉得这个 Google
也没什么用,按下 Backspace 来删除最后一个元素。
3. 自动补全
嗯,我觉得应该加上 Kubernetes
这个标签,让我们先输入 Ku
这两个字符,这个单词太长了,我不想挨个儿输完 (其实是忘了怎么拼写😂 )。
那可以偷个懒,看到了输入框中那个浅蓝色的文字吗?插件已经知道我们要输入什么了,你只需要按下 Tab 键即可瞬间自动补全(也可以鼠标双击输入框),补全后再按 Enter 将其添加进去!
4. 重复提示
好像不对,刚才添加进去的 kubernetes
怎么是小写的!我想要这种效果的:Kubernetes
,那试着再在输入框中输入 Ku
然后自动补全。
完了,怎么自动补全直接就把我刚才的大写 K
换成小写了。。。好吧,手动修改第一个字母为大写!完美!然后按 Enter。
Naive!控件检测到这两个标签除了大小写不同其他都一样,所以拒绝了添加这个控件,并且通过闪动已有标签的方式提醒你:这个标签加过啦!
5. 修改大小写
如果只是大小写不同,控件是会拒绝添加的(因为本来就是一个东西),如果想要修改已有标签的大小写,有一个非常简单的办法:同时按下 Shift 和 Enter,完事儿!
这些便是基础用法,更多功能只有你自己去发现了😼
本地运行 Demo
git clone https://github.com/AielloChan/vue-tags.gitcd vue-tagsnpm installnpm run dev # Then have fun !!
Todo
- 支持多提示
支持无输入框
APIs
Props
/* Datas */// 正在使用的标签所对应的 id 数组,如: [2, 3, 6]UsedTagIds: { type: Array, default() { return []; }},// 所有的标签项目数组,如: {1: {name: "Github", color: "#213123"}}AllTags: { type: Object, default() { return {}; }},// 全局 id 指示器,新增的标签 id 就会使用这个值并且将其自增 1NextTagId: { type: Number, default: null},// 输入框的占位提示文字Placeholder: { type: String, default: '请输入标签名'},// 在输入框中自动补全,会多消耗一丢丢性能AutoComplete: { type: Boolean | String, default: false},// 允许通过粘贴直接添加标签AllowPasteToAdd: { type: Boolean | String, default: true},// 隐藏标签输入框HideInput: { type: Boolean | String, default: false},// 隐藏删除按钮(标签右侧的 x)HideDelete: { type: Boolean | String, default: false}, /* Styles */// 标签输入框中输入超过设定值数量的字符,输入字体颜色将改变WarningLength: { type: Number, default: 18}
Event
/* Events *//** 所有钩子函数都会收到一个对象作为参数** {* allTags:{}* usedTagIds:[]* globalNextId:10* }*/// 在添加标签前调用。返回:标准数据、新被加入标签的 ID、将被加入的标签名@before-add-tag// 在添加标签后调用。返回:标准数据、新被加入标签的 ID@after-add-tag// 在使用标签前调用。返回:标准数据、将被使用的标签 ID@before-UseTag// 在使用标签后调用。返回:标准数据、已被使用的标签 ID@after-use-tag// 在删除标签前调用。返回:标准数据、将被删除的标签 ID@before-delete-tag// 在删除标签后调用。返回:标准数据@after-delete-tag// 在标签列表改变前调用。返回:标准数据、将被修改的标签 ID、新标签名@before-change-used-tag// 在标签列表改变后调用。返回:标准数据、已被修改的标签 ID、新标签名@after-change-used-tag// 在更新标签前调用。返回:标准数据、将被修改的标签 ID、新标签名@before-update-tag-name// 在更新标签后调用。返回:标准数据、已被修改的标签 ID、新标签名@after-update-tag-name// 标签被点击后调用。返回:标准数据、当前标签 ID@after-click-tag