vue组件中的TagsInput

这篇文章主要讲解了vue组件中的TagsInput，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

成都创新互联公司专业为企业提供开平网站建设、开平做网站、开平网站设计、开平网站制作等企业网站建设、网页设计与制作、开平企业网站模板建站服务，十多年开平做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

简介

TagsInput 是一种可编辑的输入框，通过回车或者分号来分割每个标签，用回退键删除上一个标签。用 vue 来实现还是比较简单的。

先看效果图，下面会一步一步实现他。

vue组件中的TagsInput

注：以下代码需要vue-cli环境才能执行

（一）伪造一个输入框

因为单行的文本框只能展示纯文本，所以图里面的标签实际上都是 html元素,用vue模板来写的话，是这样的:

（二）监听输入

在伪造好一个输入框之后，我们对输入框的事件进行处理，

回车和逗号会把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()
 }
 },
}

（三）删除标签

前面都是通过键盘来操作标签，鼠标点击标签应该也是可以删除的



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有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。

分享题目：vue组件中的TagsInput
网站网址：http://cqcxhl.cn/article/jegphg.html

重庆分公司，新征程启航

vue组件中的TagsInput

其他资讯