当前位置：首页 > VUE

vue实现标签云插件

2026-01-23 03:40:57VUE

实现标签云插件的方法

安装依赖

需要安装 vue-tag-cloud 或 vue-wordcloud 等现成插件，或手动实现。以 vue-tag-cloud 为例：

npm install vue-tag-cloud

使用现成插件

在 Vue 组件中引入并配置插件：

vue实现标签云插件

<template>
  <div>
    <tag-cloud 
      :data="tags" 
      :config="config"
    />
  </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: 200,
        maxFont: 30,
        color: '#2c3e50'
      }
    }
  }
}
</script>

手动实现基础标签云

通过 CSS 和计算属性动态生成样式：

vue实现标签云插件

<template>
  <div class="tag-cloud">
    <span 
      v-for="(tag, index) in tags" 
      :key="index"
      :style="{
        fontSize: `${tag.weight * 2 + 10}px`,
        color: `hsl(${index * 30}, 70%, 50%)`,
        transform: `rotate(${Math.random() * 20 - 10}deg)`
      }"
    >
      {{ tag.text }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: [
        { text: 'Vue', weight: 5 },
        { text: 'CSS', weight: 3 },
        { text: 'HTML', weight: 4 }
      ]
    }
  }
}
</script>

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

添加交互效果

通过鼠标事件实现悬浮放大效果：

<template>
  <div class="tag-cloud">
    <span 
      v-for="(tag, index) in tags" 
      :key="index"
      :style="getStyle(tag, index)"
      @mouseover="hoverIndex = index"
      @mouseleave="hoverIndex = null"
    >
      {{ tag.text }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hoverIndex: null,
      tags: [/* 数据同上 */]
    }
  },
  methods: {
    getStyle(tag, index) {
      const isHovered = this.hoverIndex === index
      return {
        fontSize: `${isHovered ? tag.weight * 3 + 15 : tag.weight * 2 + 10}px`,
        color: `hsl(${index * 30}, 70%, ${isHovered ? '60%' : '50%'})`,
        zIndex: isHovered ? 10 : 1
      }
    }
  }
}
</script>

三维球体标签云

使用 Three.js 实现 3D 效果：

<template>
  <div ref="container" class="three-container"></div>
</template>

<script>
import * as THREE from 'three'

export default {
  mounted() {
    const container = this.$refs.container
    const scene = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000)
    const renderer = new THREE.WebGLRenderer({ alpha: true })

    renderer.setSize(container.clientWidth, container.clientHeight)
    container.appendChild(renderer.domElement)

    const tags = ['Vue', 'React', 'Angular']
    const sphere = new THREE.Group()

    tags.forEach((text, i) => {
      const sprite = this.createTextSprite(text)
      const phi = Math.acos(-1 + (2 * i) / tags.length)
      const theta = Math.sqrt(tags.length * Math.PI) * phi
      sprite.position.setFromSphericalCoords(10, phi, theta)
      sphere.add(sprite)
    })

    scene.add(sphere)
    camera.position.z = 25

    const animate = () => {
      requestAnimationFrame(animate)
      sphere.rotation.y += 0.005
      renderer.render(scene, camera)
    }
    animate()
  },
  methods: {
    createTextSprite(text) {
      const canvas = document.createElement('canvas')
      const context = canvas.getContext('2d')
      canvas.width = 256
      canvas.height = 128
      context.fillStyle = 'rgba(100, 100, 255, 0.7)'
      context.font = 'Bold 40px Arial'
      context.fillText(text, 10, 50)

      const texture = new THREE.Texture(canvas)
      texture.needsUpdate = true
      const material = new THREE.SpriteMaterial({ map: texture })
      return new THREE.Sprite(material)
    }
  }
}
</script>

<style>
.three-container {
  width: 100%;
  height: 400px;
}
</style>