vue tag实现

在Vue中实现标签（Tag）功能可以通过多种方式完成，以下是常见的实现方法和示例代码：

基础实现

使用Vue的动态组件和v-for指令可以快速实现标签功能：

<template>
  <div>
    <div class="tags">
      <span 
        v-for="(tag, index) in tags" 
        :key="index"
        class="tag"
        @click="selectTag(tag)"
        :class="{ active: selectedTag === tag }"
      >
        {{ tag }}
      </span>
    </div>
    <div class="content">
      {{ selectedTagContent }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: ['Vue', 'React', 'Angular'],
      selectedTag: 'Vue',
      tagContents: {
        Vue: 'Vue.js是一套构建用户界面的渐进式框架',
        React: 'React用于构建用户界面的JavaScript库',
        Angular: 'Angular是一个应用设计框架与开发平台'
      }
    }
  },
  computed: {
    selectedTagContent() {
      return this.tagContents[this.selectedTag]
    }
  },
  methods: {
    selectTag(tag) {
      this.selectedTag = tag
    }
  }
}
</script>

<style>
.tag {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 5px;
  cursor: pointer;
  background: #eee;
}
.tag.active {
  background: #42b983;
  color: white;
}
</style>

可关闭标签实现

需要实现可关闭的标签时，可以添加删除功能：

<template>
  <div>
    <div class="tags">
      <span 
        v-for="(tag, index) in tags" 
        :key="index"
        class="tag"
      >
        {{ tag }}
        <span class="close" @click="removeTag(index)">×</span>
      </span>
      <input 
        v-model="newTag"
        @keyup.enter="addTag"
        placeholder="添加标签"
      >
    </div>
  </div>
</template>

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

<style>
.tag {
  display: inline-block;
  padding: 3px 8px;
  margin-right: 5px;
  background: #e0e0e0;
  border-radius: 3px;
}
.close {
  margin-left: 5px;
  cursor: pointer;
}
input {
  padding: 5px;
  border: 1px solid #ddd;
}
</style>

使用第三方组件库

对于更复杂的标签需求，可以使用现成的UI组件库：

1. Element UI的Tag组件：

   
   <template>
   <div>
    <el-tag
      v-for="tag in tags"
      :key="tag"
      closable
      @close="handleClose(tag)"
    >
      {{ tag }}
    </el-tag>
    <el-input
      v-model="inputValue"
      size="small"
      @keyup.enter.native="handleInputConfirm"
      @blur="handleInputConfirm"
    >
    </el-input>
   </div>
   </template>

export default { data() { return { tags: ['标签一', '标签二'], inputValue: '' } }, methods: { handleClose(tag) { this.tags.splice(this.tags.indexOf(tag), 1) }, handleInputConfirm() { if (this.inputValue) { this.tags.push(this.inputValue) this.inputValue = '' } } } } ```

1. Ant Design Vue的Tag组件：

   <template>
   <a-tag
    v-for="tag in tags"
    :key="tag"
    closable
    @close="() => handleClose(tag)"
   >
    {{ tag }}
   </a-tag>
   <a-input
    v-model="inputValue"
    size="small"
    @keyup.enter="handleInputConfirm"
    @blur="handleInputConfirm"
   />
   </template>

高级功能实现

对于需要拖拽排序、颜色分类等高级功能的标签：

<template>
  <div>
    <draggable v-model="tags" group="tags" @end="onDragEnd">
      <div
        v-for="(tag, index) in tags"
        :key="index"
        class="tag"
        :style="{ backgroundColor: tagColors[index % tagColors.length] }"
      >
        {{ tag }}
        <span class="close" @click="removeTag(index)">×</span>
      </div>
    </draggable>
    <input v-model="newTag" @keyup.enter="addTag">
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      tags: ['重要', '紧急', '普通'],
      newTag: '',
      tagColors: ['#ff7675', '#74b9ff', '#55efc4']
    }
  },
  methods: {
    addTag() {
      if (this.newTag.trim()) {
        this.tags.push(this.newTag.trim())
        this.newTag = ''
      }
    },
    removeTag(index) {
      this.tags.splice(index, 1)
    },
    onDragEnd() {
      console.log('新的标签顺序:', this.tags)
    }
  }
}
</script>

<style>
.tag {
  display: inline-block;
  padding: 5px 10px;
  margin: 5px;
  color: white;
  border-radius: 3px;
  cursor: move;
}
.close {
  margin-left: 5px;
  cursor: pointer;
}
</style>

以上实现方式涵盖了从基础到高级的标签功能，可以根据实际需求选择合适的实现方案。