189 8069 5689
这篇文章主要讲解了vue组件中的TagsInput，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
成都创新互联公司专业为企业提供开平网站建设、开平做网站、开平网站设计、开平网站制作等企业网站建设、网页设计与制作、开平企业网站模板建站服务，十多年开平做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
简介
TagsInput 是一种可编辑的输入框，通过回车或者分号来分割每个标签，用回退键删除上一个标签。用 vue 来实现还是比较简单的。
先看效果图，下面会一步一步实现他。
注：以下代码需要vue-cli环境才能执行
（一）伪造一个输入框
因为单行的文本框只能展示纯文本，所以图里面的标签实际上都是 html元素,用vue模板来写的话，是这样的:
（二）监听输入
在伪造好一个输入框之后，我们对输入框的事件进行处理，
// @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()
}
},
} （三）删除标签
前面都是通过键盘来操作标签，鼠标点击标签应该也是可以删除的
methods: {
// 删除点击的标签
delTag (index) {
this.tags.splice(index, 1)
}
}（四）自定义 v-model
通过上面的步骤，一个 tagsinput 组件就已经做好了，再给他添加自定义的 v-model ,让他可以像input一样响应表单数据。
// props
props: {
value: Array,
required: true,
default: () => []
}
// computed
computed: {
tags () {
return this.value.slice()
}
}
// methods
methods: {
// 删除点击的标签
delTag (index) {
this.tags.splice(index, 1)
this.$emit('input', this.tags)
}
}（五）完整代码
// TagsInput.vue
作为组件被调用，这样就可以看到像文章开头那幅图一样的组件了。
// 父组件
看完上述内容，是不是对vue组件中的TagsInput有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。