在做项目时,经常需要添加标签内容的功能。这是通过标签输入完成的,标签输入是一种收集信息并创建流畅的用户体验的元素。
本文实现一个可重用的 Vue 标签输入组件,而且能够根据你项目的需要进行扩展。
标签输入组件的基本代码
我们需要实现一个单一组件 TagInput.vue,
以下是基本代码:
//TagInput.vue
<template>
<div class='tag-input'>
<div v-for='(tag, index) in tags' :key='tag' class='tag-input__tag'>
<span>x</span>
{{ tag }}
</div>
<input type='text' placeholder="Enter a Tag" class='tag-input__text'/>
</div>
</template>
<script>
export default {
data () {
return {
tags: ['hello', 'world']
}
},
methods: {
}
}
</script>
<style scoped>
.tag-input {
width: 100%;
border: 1px solid #eee;
font-size: 0.9em;
height: 50px;
box-sizing: border-box;
padding: 0 10px;
}
.tag-input__tag {
height: 30px;
float: left;
margin-right: 10px;
background-color: #eee;
margin-top: 10px;
line-height: 30px;
padding: 0 5px;
border-radius: 5px;
}
.tag-input__tag > span {
cursor: pointer;
opacity: 0.75;
}
.tag-input__text {
border: none;
outline: none;
font-size: 0.9em;
line-height: 50px;
background: none;
}
</style>
这个组件骨架的代码有表示所有标记的字符串数组。然后在模板内渲染每个标记,最后需要一个 text input ,以便我们可以将新标签添加到我们的列表中。
代码还包括整个标签输入的样式。不过本文的重点会放在事件处理和数据处理上,不会详细解释 CSS。
下面就是这段代码的效果:
处理功能
现在已经有了基本的东西,接着为标签系统添加一些功能。实际上只需要添加两个功能:
- 将标签添加到列表中
- 从列表中删除标签
将标签添加到列表
首先处理将标签添加到列表中的情况。通过 Vue 的某些 event handler 可以使开发变得轻而易举。对于这个组件,要让逗号和回车键都创建一个标记。
Vue 提供了键盘事件修饰符。我们必须在两个键上侦听 keydown 命令,然后调用 addTag
方法。
需要注意的是 Vue 会将 enter 识别为自己的命令,但不识别逗号。要检测逗号,我们必须使用他的键码:188
。
以下是代码:
//TagInput.vue
<input
type='text'
placeholder="Enter a Tag"
class='tag-input__text'
@keydown.enter='addTag'
@keydown.188='addTag'
/>
接着实现 addTag
方法。由于我们将其用作 event handler,所以它会自动接收具有第一个参数的事件。
//TagInput.vue
addTag (event) {
event.preventDefault()
var val = event.target.value.trim()
if (val.length > 0) {
this.tags.push(val)
event.target.value = ''
}
}
现在看看完成的组件。我们应该能够在输入框中输入一些内容,当输入逗号或回车时,前面的输入会变成一个新的标签。
从列表中删除标签
删除标签也很简单,每个标签上都有“x”。首先写一个 removeTag
方法,它用要删除标签的索引作为参数。
//TagInput.vue
removeTag (index) {
this.tags.splice(index, 1)
}
然后检测用户单击“x”,再调用这个方法并传递索引值。
//TagInput.vue
<span @click='removeTag(index)'>x</span>
现在如果单击x,会看到该标签已从列表中删除。
添加更多高级功能
尽管现在基本功能已经实现,但还能变得更加直观和友好。下面只讨论一个简单的附加组件,但是你自己还能继续添加自己的想法。
用退格键删除元素
下面是要实现的效果,如果你输入的内容为空并且按了退格键,它将删除列表中的最后一个Tag。
只有在没有输入时,退格键才会删除
要添加这个功能,需要添加另一个侦听删除按钮的 keydown
侦听器。然后该事件将调用 removeLastTag
方法。
TagInput.vue<input
type='text'
placeholder="Enter a Tag"
class='tag-input__text'
@keydown.enter='addTag'
@keydown.188='addTag'
@keydown.delete='removeLastTag'
/>
在 removeLastTag
方法中(它也接受一个事件),检查当前 input 是否为空。如果是的话,那么删除标签数组中最后一个元素。
TagInput.vueremoveLastTag(event) {
if (event.target.value.length === 0) {
this.removeTag(this.tags.length - 1)
}
}
运行程序后如果按下退格键,将会删除最后一个标签。
还可以添加其他内容
我们还可以添加更多的功能,例如:
- 自动完成
- 添加或删除标签时的过渡效果
- 标签列表的拖放效果
- 。。。