标签云实现vue

使用 vue-wordcloud 库实现标签云

vue-wordcloud 是一个基于 Vue.js 的标签云组件，使用简单且功能丰富。

安装依赖：

npm install vue-wordcloud d3-cloud

基本用法示例：

<template>
  <div>
    <word-cloud
      :data="words"
      nameKey="text"
      valueKey="value"
      :color="colors"
      :showTooltip="true"
    />
  </div>
</template>

<script>
import WordCloud from 'vue-wordcloud'

export default {
  components: { WordCloud },
  data() {
    return {
      words: [
        { text: 'Vue', value: 100 },
        { text: 'React', value: 80 },
        { text: 'Angular', value: 60 }
      ],
      colors: ['#1f77b4', '#ff7f0e', '#2ca02c']
    }
  }
}
</script>

自定义 SVG 标签云实现

对于需要高度自定义的场景，可以使用 SVG 手动实现。

<template>
  <svg :width="width" :height="height" class="word-cloud">
    <g :transform="`translate(${width/2},${height/2})`">
      <text
        v-for="(word, index) in cloudWords"
        :key="index"
        :transform="`translate(${word.x}, ${word.y}) rotate(${word.rotate})`"
        :font-size="word.size"
        :fill="colors[index % colors.length]"
        text-anchor="middle"
      >
        {{ word.text }}
      </text>
    </g>
  </svg>
</template>

<script>
import cloud from 'd3-cloud'

export default {
  props: {
    words: Array,
    width: { type: Number, default: 600 },
    height: { type: Number, default: 400 }
  },
  data() {
    return {
      colors: ['#4285F4', '#EA4335', '#FBBC05', '#34A853'],
      cloudWords: []
    }
  },
  mounted() {
    this.generateCloud()
  },
  methods: {
    generateCloud() {
      const layout = cloud()
        .size([this.width, this.height])
        .words(this.words.map(d => ({
          text: d.text,
          size: d.value * 2
        })))
        .padding(5)
        .rotate(() => (Math.random() * 2 - 1) * 30)
        .font('Impact')
        .fontSize(d => d.size)
        .on('end', words => {
          this.cloudWords = words
        })

      layout.start()
    }
  }
}
</script>

<style>
.word-cloud {
  font-family: 'Impact';
}
</style>

响应式标签云实现

结合 Vue 的响应式特性，实现动态更新的标签云。

<template>
  <div>
    <input v-model="newTag" @keyup.enter="addTag">
    <word-cloud :data="tags" nameKey="name" valueKey="count"/>
  </div>
</template>

<script>
import WordCloud from 'vue-wordcloud'

export default {
  components: { WordCloud },
  data() {
    return {
      newTag: '',
      tags: [
        { name: 'JavaScript', count: 50 },
        { name: 'Vue', count: 40 },
        { name: 'React', count: 30 }
      ]
    }
  },
  methods: {
    addTag() {
      if (this.newTag.trim()) {
        const existing = this.tags.find(t => t.name === this.newTag)
        if (existing) {
          existing.count++
        } else {
          this.tags.push({ name: this.newTag, count: 1 })
        }
        this.newTag = ''
      }
    }
  }
}
</script>

3D 标签云效果实现

使用 CSS 3D 变换创建更生动的视觉效果。

<template>
  <div class="cloud-container">
    <div 
      v-for="(word, index) in words"
      :key="index"
      class="tag"
      :style="{
        transform: `rotateY(${index * (360 / words.length)}deg) 
                   translateZ(${word.value * 2}px)`,
        fontSize: `${word.value}px`,
        color: getColor(index)
      }"
    >
      {{ word.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      words: [
        { text: 'HTML', value: 24 },
        { text: 'CSS', value: 28 },
        { text: 'JavaScript', value: 32 }
      ],
      colors: ['#E44D26', '#264DE4', '#F0DB4F']
    }
  },
  methods: {
    getColor(index) {
      return this.colors[index % this.colors.length]
    }
  }
}
</script>

<style>
.cloud-container {
  width: 300px;
  height: 300px;
  position: relative;
  perspective: 1000px;
  margin: 0 auto;
  transform-style: preserve-3d;
  animation: rotate 20s infinite linear;
}

.tag {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  white-space: nowrap;
  font-weight: bold;
}

@keyframes rotate {
  from { transform: rotateY(0); }
  to { transform: rotateY(360deg); }
}
</style>