本文實例講述了vue實現標簽云效果的方法。分享給大家供大家參考，具體如下：

閑扯兩句

最近想給自己的博客上加上一個3D標簽云的效果，用來表示自己博客文章的分組，網上找到了canvas實現的，還有a元素實現的解析3D標簽云，我想讓標簽可以選擇和點擊，又不想在標簽數量較多時操作a標簽導致性能問題，于是svg就成了一個不錯的選擇。

標簽初始化

這里實現的核心主要是參考了前面的那篇解析3D標簽云的文章，作者給出了源碼，講解也比較通俗易懂。大體來說，整個代碼分三步：

貼上代碼:

  <div id='app' >    <svg :width='width' :height='height' @mousemove='listener($event)'>      <a :href="tag.href" rel="external nofollow" v-for='tag in tags'>        <text :x='tag.x' :y='tag.y' :font-size='20 * (600/(600-tag.z))' :fill-opacity='((400+tag.z)/600)'>{{tag.text}}</text>      </a>    </svg>  </div>

在模板中，借用指令v-for來渲染標簽，每個標簽上綁定了x,y,font-size(用來表現z軸),fill-opacity(都是與z坐標有關的表達式，用來表現z軸),及text;

 data: {   width:700,//svg寬度   height:700,//svg高度   tagsNum:20,//標簽數量   RADIUS:200,//球的半徑   speedX:Math.PI/360,//球一幀繞x軸旋轉的角度   speedY:Math.PI/360,//球-幀繞y軸旋轉的角度   tags: [] } computed:{   CX(){//球心x坐標     return this.width/2;   },   CY(){//球心y坐標     return this.height/2;   } },

做好了上面的基礎，下面我們來初始化標簽數據：

 created(){//初始化標簽位置   let tags=[];   for(let i = 0; i < this.tagsNum; i++){     let tag = {};     let k = -1 + (2 * (i + 1) - 1) / this.tagsNum;     let a = Math.acos(k);     let b = a * Math.sqrt(this.tagsNum * Math.PI)//計算標簽相對于球心的角度     tag.text = i + 'tag';     tag.x = this.CX + this.RADIUS * Math.sin(a) * Math.cos(b);//根據標簽角度求出標簽的x,y,z坐標     tag.y = this.CY + this.RADIUS * Math.sin(a) * Math.sin(b);      tag.z = this.RADIUS * Math.cos(a);     tag.;//給標簽添加鏈接     tags.push(tag);   }   this.tags = tags;//讓vue替我們完成視圖更新 },

到了這里，我們就算了算坐標，vue完成了視圖更新的工作，這時基本上就可以得到一副靜態的圖像了：