简介
TagsInput 是一种可编辑的输入框,通过回车或者分号来分割每个标签,用回退键删除上一个标签。用 vue 来实现还是比较简单的。
先看效果图,下面会一步一步实现他。
注:以下代码需要vue-cli环境才能执行
(一)伪造一个输入框
因为单行的文本框只能展示纯文本,所以图里面的标签实际上都是 html元素,用vue模板来写的话,是这样的:
export default {
name: 'TagsInput',
methods: {
focus () {
this.$refs.input.focus()
},
},
data () {
return {
tags: [],
current: ''
}
}
}
.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
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()
}
},
}
(三)删除标签
前面都是通过键盘来操作标签,鼠标点击标签应该也是可以删除的
{{tag}} x
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
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: ''
}
}
}
.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;
}
}
作为组件被调用,这样就可以看到像文章开头那幅图一样的组件了。
// 父组件
import TagsInput from './TagsInput.vue'
export default {
components: {
TagsInput
},
data () {
return {
tags: ['tag1', 'tag2', 'tag3']
}
}
}