vue组件系列之TagsInput详解
(编辑：jimmy 日期: 2024/11/8 浏览：3 次 )
简介
TagsInput 是一种可编辑的输入框，通过回车或者分号来分割每个标签，用回退键删除上一个标签。用 vue 来实现还是比较简单的。
先看效果图，下面会一步一步实现他。
注：以下代码需要vue-cli环境才能执行
（一）伪造一个输入框
因为单行的文本框只能展示纯文本，所以图里面的标签实际上都是 html元素,用vue模板来写的话，是这样的:
<template>
<div class="muli-tags" @click='focus'>
<button class='btn' v-for='(tag, index) in tags' :key='index'>
{{tag}}
</button>
<input type="text" ref='input' v-model='current'>
</div>
</template>
<script>
export default {
name: 'TagsInput',
methods: {
focus () {
this.$refs.input.focus()
},
},
data () {
return {
tags: [],
current: ''
}
}
}
</script>
<style lang='less'>
.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;
}
</style>
（二）监听输入
在伪造好一个输入框之后，我们对输入框的事件进行处理，
- 回车和逗号会把input的值添加到tags数组，然后清空input
- 添加值之前，判断tags数组是否已经包含同名的值
- 按回退键，删除最近的一个标签
// @keydown.188 188代表是是分号键的keyCode
<input type="text"
ref='input'
@keyup.enter="add"
@keydown.delete="del"
@keydown.188='split'
v-model='current'>
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' v-for='(tag, index) in tags' :key='index' @click='delTag(index)'>{{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 () {
return this.value.slice()
}
}
// methods
methods: {
// 删除点击的标签
delTag (index) {
this.tags.splice(index, 1)
this.$emit('input', this.tags)
}
}
（五）完整代码
// TagsInput.vue
<template>
<div class="muli-tags" @click='focus'>
<button class='btn' v-for='(tag, index) in tags' :key='index' @click='delTag(index)'>{{tag}} <span>x</span></button>
<input type="text"
ref='input'
@keyup.enter="add"
@keydown.delete="del"
@keydown.188='split'
v-model='current'>
</div>
</template>
<script>
export default {
props: {
value: Array,
required: true,
default: () => []
},
methods: {
focus () {
this.$refs.input.focus()
},
split (e) {
e.preventDefault()
this.add(e)
},
add (e) {
const val = e.target.value
if (!val) return
if (this.tags.indexOf(val) > -1) return
this.tags.push(val)
this.$emit('input', this.tags)
this.current = ''
},
del (e) {
if (!e.target.value.length) {
this.tags.pop()
this.$emit('input', this.tags)
}
},
delTag (index) {
this.tags.splice(index, 1)
this.$emit('input', this.tags)
}
},
computed: {
tags () {
return this.value.slice()
}
},
data () {
return {
current: ''
}
}
}
</script>
<style lang='less'>
.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;
}
}
</style>
作为组件被调用，这样就可以看到像文章开头那幅图一样的组件了。
// 父组件
<template>
<tags-input v-model='tags'/>
</template>
<script>
import TagsInput from './TagsInput.vue'
export default {
components: {
TagsInput
},
data () {
return {
tags: ['tag1', 'tag2', 'tag3']
}
}
}
</script>
总结
下一篇：ant-design-vue按需加载的坑的解决