当前位置：首页 > VUE

vue实现tag

2026-01-12 18:05:53VUE

Vue 实现 Tag 组件的方法

使用 Vue 实现 Tag 组件可以通过多种方式完成，以下是常见的实现方案：

基础实现方案

创建 Vue 组件文件 Tag.vue，定义基本的 Tag 样式和功能：

<template>
  <span class="tag" :class="{ 'tag-closable': closable }" @click="handleClick">
    <slot></slot>
    <span v-if="closable" class="tag-close" @click.stop="handleClose">×</span>
  </span>
</template>

<script>
export default {
  name: 'Tag',
  props: {
    closable: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    },
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #f0f0f0;
  margin-right: 8px;
  cursor: default;
}

.tag-closable {
  padding-right: 20px;
  position: relative;
}

.tag-close {
  position: absolute;
  right: 8px;
  cursor: pointer;
}
</style>

动态标签组实现

实现可动态添加和删除的标签组：

<template>
  <div class="tag-group">
    <tag
      v-for="(tag, index) in tags"
      :key="index"
      :closable="true"
      @close="removeTag(index)"
    >
      {{ tag }}
    </tag>
    <input
      v-model="newTag"
      @keyup.enter="addTag"
      placeholder="添加标签"
    />
  </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.push(this.newTag.trim())
        this.newTag = ''
      }
    },
    removeTag(index) {
      this.tags.splice(index, 1)
    }
  }
}
</script>

使用第三方库

Element UI 提供了现成的 Tag 组件：

<template>
  <el-tag
    v-for="tag in tags"
    :key="tag"
    closable
    @close="handleClose(tag)"
  >
    {{ tag }}
  </el-tag>
</template>

<script>
export default {
  data() {
    return {
      tags: ['标签一', '标签二', '标签三']
    }
  },
  methods: {
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1)
    }
  }
}
</script>

高级功能扩展

实现可选择和可过滤的标签：

<template>
  <div>
    <div class="tag-container">
      <span
        v-for="tag in selectedTags"
        :key="tag"
        class="tag"
        @click="removeTag(tag)"
      >
        {{ tag }}
      </span>
    </div>
    <div class="tag-options">
      <span
        v-for="tag in availableTags"
        v-if="!selectedTags.includes(tag)"
        :key="tag"
        class="tag-option"
        @click="selectTag(tag)"
      >
        {{ tag }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      availableTags: ['HTML', 'CSS', 'JavaScript', 'Vue', 'React'],
      selectedTags: []
    }
  },
  methods: {
    selectTag(tag) {
      this.selectedTags.push(tag)
    },
    removeTag(tag) {
      this.selectedTags = this.selectedTags.filter(t => t !== tag)
    }
  }
}
</script>

这些实现方案可以根据具体需求进行调整和组合，Vue 的响应式特性使得标签组件的状态管理变得简单高效。

vue实现tag