TagsInput 是一种可编辑的输入框，通过回车或者分号来分割每个标签，用回退键删除上一个标签。这篇文章主要介绍了vue组件TagsInput的相关知识,需要的朋友可以参考下
简介
TagsInput 是一种可编辑的输入框，通过回车或者分号来分割每个标签，用回退键删除上一个标签。用 vue 来实现还是比较简单的。
先看效果图，下面会一步一步实现他。
注：以下代码需要vue-cli环境才能执行
（一）伪造一个输入框
因为单行的文本框只能展示纯文本，所以图里面的标签实际上都是 html元素,用vue模板来写的话，是这样的:
<div class="muli-tags"> <button class='btn'> {{tag}} </button></div> .muli-tags{ padding: 5px 10px; display: block; border: 1px solid #ccc; input{ background: transparent; } } .btn{ margin: 0 5px 3px 0; padding: 4px 5px; background: #fff; border: 1px solid #eee; box-shadow: 0 0 4px; }
（二）监听输入
在伪造好一个输入框之后，我们对输入框的事件进行处理，
- 回车和逗号会把input的值添加到tags数组，然后清空input
- 添加值之前，判断tags数组是否已经包含同名的值
- 按回退键，删除最近的一个标签
// @keydown.188 188代表是是分号键的keyCode methods: { // 按下分号键的时候，需要阻止默认事件，否则会出现分号 split (e) { e.preventDefault() this.add(e) }, add (e) { const val = e.target.value if (!val) return // 如果已经存在相同tag，不再添加 if (this.tags.indexOf(val) > -1) return // 把输入值添加到tag，并清空文本框 this.tags.push(val) this.current = '' }, del (e) { // 当文本框内没有值，再按回退键，则删除最后一个tag if (!e.target.value.length) { this.tags.pop() } }, }
（三）删除标签
前面都是通过键盘来操作标签，鼠标点击标签应该也是可以删除的
<button class='btn'>{{tag}} <span>x</span></button> methods: { // 删除点击的标签 delTag (index) { this.tags.splice(index, 1) } }
（四）自定义 v-model
通过上面的步骤，一个 tagsinput 组件就已经做好了，再给他添加自定义的 v-model ,让他可以像input一样响应表单数据。
// props props: { value: Array, required: true, default: () => [] } // computed computed: { tags (<em style="color:transparent">本文来源gao.dai.ma.com搞@代*码#网</em>) { return this.value.slice() } } // methods methods: { // 删除点击的标签 delTag (index) { this.tags.splice(index, 1) this.$emit('input', this.tags) } }
（五）完整代码
// TagsInput.vue <div class="muli-tags"> <button class='btn'>{{tag}} <span>x</span></button></div> .muli-tags{ padding: 5px 10px; display: block; border: 1px solid #ccc; input{ background: transparent; } .btn{ margin: 0 5px 3px 0; padding: 4px 5px; background: #fff; border: 1px solid #eee; box-shadow: 0 0 4px; } }
作为组件被调用，这样就可以看到像文章开头那幅图一样的组件了。
// 父组件
总结
到此这篇关于vue组件TagsInput的文章就介绍到这了,更多相关vue组件TagsInput内容请搜索gaodaima搞代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持gaodaima搞代码网！
以上就是vue组件系列之TagsInput详解的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue组件系列之TagsInput详解
转载请注明原文链接：vue组件系列之TagsInput详解
