vue实现云标签

Vue 实现云标签（标签云）的方法

使用第三方库（如 vue-tag-cloud）

安装 vue-tag-cloud 库：

npm install vue-tag-cloud

在组件中引入并使用：

<template>
  <div>
    <tag-cloud
      :data="tags"
      :config="config"
      @clickTag="handleTagClick"
    />
  </div>
</template>

<script>
import { TagCloud } from 'vue-tag-cloud'

export default {
  components: { TagCloud },
  data() {
    return {
      tags: [
        { text: 'Vue', weight: 10 },
        { text: 'React', weight: 7 },
        { text: 'JavaScript', weight: 15 }
      ],
      config: {
        radius: 150,
        maxFont: 30,
        color: '#3498db'
      }
    }
  },
  methods: {
    handleTagClick(text) {
      console.log('Clicked tag:', text)
    }
  }
}
</script>

手动实现基础标签云

通过 CSS 和计算属性动态调整标签样式：

<template>
  <div class="tag-cloud">
    <span
      v-for="tag in weightedTags"
      :key="tag.text"
      :style="{
        fontSize: `${tag.size}px`,
        color: tag.color,
        opacity: tag.opacity
      }"
      @click="$emit('tag-click', tag.text)"
    >
      {{ tag.text }}
    </span>
  </div>
</template>

<script>
export default {
  props: {
    tags: {
      type: Array,
      required: true
    }
  },
  computed: {
    weightedTags() {
      const maxWeight = Math.max(...this.tags.map(t => t.weight))
      return this.tags.map(tag => ({
        ...tag,
        size: 10 + (tag.weight / maxWeight) * 20,
        color: `hsl(${Math.random() * 360}, 70%, 60%)`,
        opacity: 0.5 + (tag.weight / maxWeight) * 0.5
      }))
    }
  }
}
</script>

<style>
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 20px;
}
.tag-cloud span {
  cursor: pointer;
  transition: all 0.3s ease;
}
.tag-cloud span:hover {
  transform: scale(1.1);
}
</style>

添加交互动画效果

结合 Vue 的过渡系统和随机位置生成：

<template>
  <div class="tag-cloud-container">
    <transition-group name="tag" tag="div" class="tag-cloud">
      <span
        v-for="tag in animatedTags"
        :key="tag.text"
        :style="tag.style"
        @mouseenter="hoverTag(tag)"
        @mouseleave="resetTag(tag)"
      >
        {{ tag.text }}
      </span>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: [
        { text: 'HTML', weight: 8 },
        { text: 'CSS', weight: 6 },
        { text: 'TypeScript', weight: 12 }
      ],
      animatedTags: []
    }
  },
  mounted() {
    this.generatePositions()
  },
  methods: {
    generatePositions() {
      const containerWidth = 500
      const containerHeight = 300

      this.animatedTags = this.tags.map(tag => {
        const size = 10 + tag.weight
        return {
          ...tag,
          style: {
            fontSize: `${size}px`,
            left: `${Math.random() * (containerWidth - size)}px`,
            top: `${Math.random() * (containerHeight - size)}px`,
            color: `hsl(${Math.random() * 360}, 80%, 60%)`,
            position: 'absolute'
          }
        }
      })
    },
    hoverTag(tag) {
      tag.style.transform = 'scale(1.2)'
      tag.style.zIndex = '10'
    },
    resetTag(tag) {
      tag.style.transform = ''
      tag.style.zIndex = ''
    }
  }
}
</script>

<style>
.tag-cloud-container {
  position: relative;
  width: 500px;
  height: 300px;
  margin: 0 auto;
}
.tag-cloud {
  position: relative;
  width: 100%;
  height: 100%;
}
.tag-cloud span {
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block;
}
.tag-move {
  transition: all 0.5s ease;
}
</style>

响应式标签云

结合窗口大小调整的响应式实现：

<template>
  <div ref="container" class="tag-cloud">
    <span
      v-for="tag in responsiveTags"
      :key="tag.text"
      :style="tag.style"
    >
      {{ tag.text }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: [
        { text: 'Node.js', weight: 9 },
        { text: 'Python', weight: 7 },
        { text: 'Java', weight: 5 }
      ],
      windowWidth: 0
    }
  },
  mounted() {
    this.windowWidth = window.innerWidth
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  computed: {
    responsiveTags() {
      const baseSize = this.windowWidth < 768 ? 8 : 12
      return this.tags.map(tag => ({
        ...tag,
        style: {
          fontSize: `${baseSize + tag.weight}px`,
          margin: `${baseSize / 2}px`,
          display: 'inline-block'
        }
      }))
    }
  },
  methods: {
    handleResize() {
      this.windowWidth = window.innerWidth
    }
  }
}
</script>

<style>
.tag-cloud {
  text-align: center;
  padding: 20px;
}
.tag-cloud span {
  transition: all 0.3s ease;
}
</style>

以上方法提供了从简单到复杂的多种实现方案，可根据项目需求选择合适的实现方式。第三方库方案适合快速集成，手动实现方案则提供更高的定制灵活性。