vue 实现tag标签

Vue 实现 Tag 标签的方法

基础实现

创建一个基础的 Tag 组件，包含标签文本和关闭按钮。可以使用 Vue 的单文件组件（SFC）方式实现。

<template>
  <div class="tag">
    <span>{{ text }}</span>
    <button @click="$emit('close')">×</button>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      required: true
    }
  }
}
</script>

<style scoped>
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  margin-right: 4px;
}
.tag button {
  margin-left: 4px;
  cursor: pointer;
  background: none;
  border: none;
}
</style>

动态标签列表

实现一个可以动态添加和删除标签的组件，通常用于标签输入场景。

<template>
  <div>
    <input v-model="newTag" @keyup.enter="addTag" placeholder="输入标签后按回车">
    <div class="tags-container">
      <tag
        v-for="(tag, index) in tags"
        :key="index"
        :text="tag"
        @close="removeTag(index)"
      />
    </div>
  </div>
</template>

<script>
import Tag from './Tag.vue'

export default {
  components: { Tag },
  data() {
    return {
      tags: ['Vue', 'JavaScript', '前端'],
      newTag: ''
    }
  },
  methods: {
    addTag() {
      if (this.newTag.trim() && !this.tags.includes(this.newTag.trim())) {
        this.tags.push(this.newTag.trim())
        this.newTag = ''
      }
    },
    removeTag(index) {
      this.tags.splice(index, 1)
    }
  }
}
</script>

可编辑标签

实现一个可以点击编辑的标签组件，适合需要修改标签内容的场景。

<template>
  <div class="editable-tag">
    <span v-if="!isEditing" @click="startEditing">{{ text }}</span>
    <input
      v-else
      ref="input"
      v-model="editedText"
      @blur="finishEditing"
      @keyup.enter="finishEditing"
    >
    <button @click="$emit('close')">×</button>
  </div>
</template>

<script>
export default {
  props: {
    text: String
  },
  data() {
    return {
      isEditing: false,
      editedText: this.text
    }
  },
  methods: {
    startEditing() {
      this.isEditing = true
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
    },
    finishEditing() {
      this.isEditing = false
      if (this.editedText !== this.text) {
        this.$emit('update', this.editedText)
      }
    }
  }
}
</script>

带颜色的标签

为标签添加颜色属性，支持不同颜色的标签显示。

<template>
  <div class="colored-tag" :style="{ backgroundColor: color }">
    <span>{{ text }}</span>
    <button @click="$emit('close')">×</button>
  </div>
</template>

<script>
export default {
  props: {
    text: String,
    color: {
      type: String,
      default: '#f0f0f0'
    }
  }
}
</script>

<style scoped>
.colored-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: 4px;
  color: white;
}
.colored-tag button {
  margin-left: 4px;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}
</style>

标签输入框增强

实现一个更完善的标签输入框，支持键盘操作和更好的用户体验。

<template>
  <div class="tag-input">
    <div class="tags-container">
      <tag
        v-for="(tag, index) in tags"
        :key="index"
        :text="tag"
        @close="removeTag(index)"
      />
      <input
        v-model="newTag"
        @keydown.delete="handleDelete"
        @keyup.enter="addTag"
        @blur="addTag"
        placeholder="添加标签..."
      >
    </div>
  </div>
</template>

<script>
import Tag from './Tag.vue'

export default {
  components: { Tag },
  data() {
    return {
      tags: [],
      newTag: ''
    }
  },
  methods: {
    addTag() {
      const tag = this.newTag.trim()
      if (tag && !this.tags.includes(tag)) {
        this.tags.push(tag)
        this.newTag = ''
      }
    },
    removeTag(index) {
      this.tags.splice(index, 1)
    },
    handleDelete(e) {
      if (e.target.value === '' && this.tags.length > 0) {
        this.removeTag(this.tags.length - 1)
      }
    }
  }
}
</script>

<style scoped>
.tag-input {
  border: 1px solid #ddd;
  padding: 4px;
  border-radius: 4px;
}
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tag-input input {
  border: none;
  outline: none;
  padding: 4px;
  min-width: 100px;
}
</style>

这些方法涵盖了 Vue 中实现 Tag 标签的常见场景，可以根据实际需求选择或组合使用。