时间： 分类：   字数： 1139 字 阅读： 3分钟
标签：

在做项目时，经常需要添加标签内容的功能。这是通过标签输入完成的，标签输入是一种收集信息并创建流畅的用户体验的元素。

最终效果

本文实现一个可重用的 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。

下面就是这段代码的效果：

代码效果

处理功能

现在已经有了基本的东西，接着为标签系统添加一些功能。实际上只需要添加两个功能：

  1. 将标签添加到列表中
  2. 从列表中删除标签

将标签添加到列表

首先处理将标签添加到列表中的情况。通过 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。

删除列表中的最后一个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)
      }
}

运行程序后如果按下退格键，将会删除最后一个标签。

还可以添加其他内容

我们还可以添加更多的功能，例如：

  • 自动完成
  • 添加或删除标签时的过渡效果
  • 标签列表的拖放效果
  • 。。。
0%