10 分钟内构建自定义 Vuejs 标签输入 (tag input)

1个月前 115次点击 来自 前端

标签: Vuejs

原文链接: Build a Custom VueJS Tag Input in Under 10 Minutes

使用标签输入来帮助组织内容的网站示例

到本教程结束时,我们将拥有一个可用的、可重用的VueJS 标签输入组件,您可以根据项目的需要对其进行扩展。

这是我们将要制作的内容的快速浏览:

tag input预览

开始撸代码 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>

将标签添加到列表中

Vue 为我们提供了键盘事件修饰符。我们必须在我们的两个键上监听 keydown 命令并调用我们的addTag方法。

需要注意的一件事是 Vue 将 enter 识别为它自己的命令,而不是逗号。要检测逗号,我们必须使用其键码 : 188。

<input 
      type='text' 
      placeholder="Enter a Tag" 
      class='tag-input__text' 
      @keydown.enter='addTag' 
      @keydown.188='addTag'
/>

实现该addTag方法。由于我们将其用作事件处理程序,因此它会自动接收具有第一个参数的事件。

addTag (event) {
      event.preventDefault()
      var val = event.target.value.trim()
      if (val.length > 0) {
        this.tags.push(val)
        event.target.value = ''
      }
}

现在让我们检查一下我们的组件。我们应该能够在我们的输入中输入一些东西,当我们输入commaenter,我们输入的任何东西都会变成一个新标签!

响应标签输入事件

从列表中删除标签

检测用户何时点击了“X”,并添加onclick响应事件。

<span @click='removeTag(index)'>x</span>

事件响应

removeTag (index) {
      this.tags.splice(index, 1)
}

使用退格键删除元素

这是大多数标签输入允许您执行的操作 - 如果您的输入为空并且您按退格键,它将删除列表中的最后一个标签。

响应退格键事件

要添加此功能,我们需要添加另一个侦听删除按钮的 keydown 侦听器。这个事件然后将调用removeLastTag方法。

<input 
      type='text' 
      placeholder="Enter a Tag" 
      class='tag-input__text' 
      @keydown.enter='addTag' 
      @keydown.188='addTag' 
      @keydown.delete='removeLastTag'
  />

removeLastTag方法

removeLastTag(event) {
      if (event.target.value.length === 0) {
        this.removeTag(this.tags.length - 1)
      }
}

到现在为止,这已经是一个可用的 Vuejs 标签输入系统。

这是一个相当简单的组件,但它也是在Vuejs如何处理数据和输入的良好实践。

Card image cap
开发者雷

尘世间一个小小的开发者,每天增加一些无聊的知识,就不会无聊了

要加油~~~

技术文档 >> 系列应用 >>
热推应用
Let'sLearnSwift
学习Swift的入门教程
PyPie
Python is as good as Pie
标签