Vue中怎么实现3D标签云

这篇文章主要讲解了“Vue中怎么实现3D标签云”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue中怎么实现3D标签云”吧！

预览:

代码:
页面部分:

<template>  <div class="taGCloud-all"       ref="tagcloudall">    <a v-for="item in tagList" :href="item.url" rel="external nofollow"  :>{{item.name}}</a>  </div></template>

CSS部分:

// 标签云.tagcloud-all {  position: relative;  a {    position: absolute;    top: 0px;    left: 0px;    color: #fff;    font-weight: bold;    text-decoration: none;    padding: 3px 6px;    &:hover {      color: #FF0000;      letter-spacing: 2px;    }  }}

js部分:

export default {  name: "tagcloud",  data() {    return {      tagList: [],      radius: 120,      dtr: Math.PI / 180,      d: 300,      mcList: [],      active: false,      lasta: 1,      lastb: 1,      distr: true,      tspeed: 10,      size: 250,      mouseX: 0,      mouseY: 0,      howElliptical: 1,      oList: null,      oA: null,      sa: 0,      ca: 0,      sb: 0,      cb: 0,      sc: 0,      cc: 0    }  },  methods: {    // 生成随机数    getRandomNum() {      return Math.floor(Math.random() * (255 + 1));    },    // 三角函数角度计算    sineCosine(a, b, c) {      this.sa = Math.sin(a * this.dtr);      this.ca = Math.cos(a * this.dtr);      this.sb = Math.sin(b * this.dtr);      this.cb = Math.cos(b * this.dtr);      this.sc = Math.sin(c * this.dtr);      this.cc = Math.cos(c * this.dtr);    },    // 设置初始定位    positionAll() {      this.$nextTick(() => {      // 注意: 所有的在onReady方法中执行的方法都需要$nextTick确保所有的标签都已经渲染        var phi = 0;        var theta = 0;        var max = this.mcList.length;        var aTmp = [];        var oFragment = document.createDocumentFragment();        // 随机排序        for (let i = 0; i < this.tagList.length; i++) {          aTmp.push(this.oA[i]);        }        aTmp.sort(() => {          return Math.random() < 0.5 ? 1 : -1;        });        for (let i = 0; i < aTmp.length; i++) {          oFragment.appendChild(aTmp[i]);        }        this.oList.appendChild(oFragment);        for (let i = 1; i < max + 1; i++) {          if (this.distr) {            phi = Math.acos(-1 + (2 * i - 1) / max);            theta = Math.sqrt(max * Math.PI) * phi;          } else {            phi = Math.random() * (Math.PI);            theta = Math.random() * (2 * Math.PI);          }          // 坐标变换          this.mcList[i - 1].cx = this.radius * Math.cos(theta) * Math.sin(phi);          this.mcList[i - 1].cy = this.radius * Math.sin(theta) * Math.sin(phi);          this.mcList[i - 1].cz = this.radius * Math.cos(phi);          this.oA[i - 1].style.left = this.mcList[i - 1].cx + this.oList.offsetWidth / 2 - this.mcList[i - 1].offsetWidth / 2 + 'px';          this.oA[i - 1].style.top = this.mcList[i - 1].cy + this.oList.offsetHeight / 2 - this.mcList[i - 1].offsetHeight / 2 + 'px';        }      })    },    // 坐标更新 让标签动起来    update() {      this.$nextTick(() => {           // 注意: 所有的在onReady方法中执行的方法都需要$nextTick确保所有的标签都已经渲染        var a;        var b;        if (this.active) {          a = (-Math.min(Math.max(-this.mouseY, -this.size), this.size) / this.radius) * this.tspeed;          b = (Math.min(Math.max(-this.mouseX, -this.size), this.size) / this.radius) * this.tspeed;        } else {          a = this.lasta * 0.98;          b = this.lastb * 0.98;        }        this.lasta = a;        this.lastb = b;        if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {          return        }        var c = 0;        this.sineCosine(a, b, c);        for (var j = 0; j < this.mcList.length; j++) {          var rx1 = this.mcList[j].cx;          var ry1 = this.mcList[j].cy * this.ca + this.mcList[j].cz * (-this.sa);          var rz1 = this.mcList[j].cy * this.sa + this.mcList[j].cz * this.ca;          var rx2 = rx1 * this.cb + rz1 * this.sb;          var ry2 = ry1;          var rz2 = rx1 * (-this.sb) + rz1 * this.cb;          var rx3 = rx2 * this.cc + ry2 * (-this.sc);          var ry3 = rx2 * this.sc + ry2 * this.cc;          var rz3 = rz2;          this.mcList[j].cx = rx3;          this.mcList[j].cy = ry3;          this.mcList[j].cz = rz3;          var per = this.d / (this.d + rz3);          this.mcList[j].x = (this.howElliptical * rx3 * per) - (this.howElliptical * 2);          this.mcList[j].y = ry3 * per;          this.mcList[j].scale = per;          this.mcList[j].alpha = per;          this.mcList[j].alpha = (this.mcList[j].alpha - 0.6) * (10 / 6);        }        this.doPosition();        this.depthSort();      })    },    //    doPosition() {      this.$nextTick(() => {            // 注意: 所有的在onReady方法中执行的方法都需要$nextTick确保所有的标签都已经渲染        var l = this.oList.offsetWidth / 2;        var t = this.oList.offsetHeight / 2;        for (var i = 0; i < this.mcList.length; i++) {          this.oA[i].style.left = this.mcList[i].cx + l - this.mcList[i].offsetWidth / 2 + 'px';          this.oA[i].style.top = this.mcList[i].cy + t - this.mcList[i].offsetHeight / 2 + 'px';          this.oA[i].style.fontSize = Math.ceil(12 * this.mcList[i].scale / 2) + 8 + 'px';          // this.oA[i].style.filter = "alpha(opacity=" + 100 * this.mcList[i].alpha + ")";          this.oA[i].style.opacity = this.mcList[i].alpha;        }      })    },    //    depthSort() {      this.$nextTick(() => {            // 注意: 所有的在onReady方法中执行的方法都需要$nextTick确保所有的标签都已经渲染        var aTmp = [];        for (let i = 0; i < this.oA.length; i++) {          aTmp.push(this.oA[i]);        }        aTmp.sort(function (vItem1, vItem2) {          if (vItem1.cz > vItem2.cz) {            return -1;          } else if (vItem1.cz < vItem2.cz) {            return 1;          } else {            return 0;          }        });        for (let i = 0; i < aTmp.length; i++) {          aTmp[i].style.zIndex = i;        }      })    },    // 网络请求 拿到tagList    query() {      // 假装从接口拿回来的数据      let tagListOrg = [        { name: '标签1', url: 'www.baidu.com' },        { name: '标签2', url: 'www.baidu.com' },        { name: '标签3', url: 'www.baidu.com' },        { name: '标签4', url: 'www.baidu.com' },        { name: '标签5', url: 'www.baidu.com' },        { name: '标签6', url: 'www.baidu.com' },        { name: '标签7', url: 'www.baidu.com' },        { name: '标签8', url: 'www.baidu.com' },        { name: '标签9', url: 'www.baidu.com' },        { name: '标签10', url: 'www.baidu.com' },        { name: '标签11', url: 'www.baidu.com' },        { name: '标签12', url: 'www.baidu.com' },        { name: '标签13', url: 'www.baidu.com' },        { name: '标签14', url: 'www.baidu.com' },        { name: '标签15', url: 'www.baidu.com' },        { name: '标签16', url: 'www.baidu.com' },        { name: '标签16', url: 'www.baidu.com' },        { name: '标签16', url: 'www.baidu.com' },        { name: '标签16', url: 'www.baidu.com' },        { name: '标签16', url: 'www.baidu.com' },        { name: '标签16', url: 'www.baidu.com' },        { name: '标签16', url: 'www.baidu.com' },        { name: '标签16', url: 'www.baidu.com' },        { name: '标签16', url: 'www.baidu.com' },        { name: '标签16', url: 'www.baidu.com' },        { name: '标签16', url: 'www.baidu.com' },        { name: '标签16', url: 'www.baidu.com' },        { name: '标签16', url: 'www.baidu.com' },        { name: '标签16', url: 'www.baidu.com' },        { name: '标签17', url: 'www.baidu.com' }      ];      // 给tagList添加随机颜色      tagListOrg.forEach(item => {        item.color = "rgb(" + this.getRandomNum() + "," + this.getRandomNum() + "," + this.getRandomNum() + ")";      })      this.tagList = tagListOrg;      this.onReady();    },    // 生成标签云    onReady() {      this.$nextTick(() => {        this.oList = this.$refs.tagcloudall;        this.oA = this.oList.getElementsByTagName('a')        var oTag = null;        for (var i = 0; i < this.oA.length; i++) {          oTag = {};          oTag.offsetWidth = this.oA[i].offsetWidth;          oTag.offsetHeight = this.oA[i].offsetHeight;          this.mcList.push(oTag);        }        this.sineCosine(0, 0, 0);        this.positionAll();        this.oList.onmouseover = () => {          this.active = true;        }        this.oList.onmouseout = () => {          this.active = false;        }        this.oList.onmousemove = (event) => {          var oEvent = window.event || event;          this.mouseX = oEvent.clientX - (this.oList.offsetLeft + this.oList.offsetWidth / 2);          this.mouseY = oEvent.clientY - (this.oList.offsetTop + this.oList.offsetHeight / 2);          this.mouseX /= 5;          this.mouseY /= 5;        }        setInterval(() => {          this.update()        }, 30);            // 定时器执行 不能写setInterval(this.update(), 30)      })    }  },  created() {    this.$nextTick(() => {      this.query();    })  }}

感谢各位的阅读，以上就是“Vue中怎么实现3D标签云”的内容了，经过本文的学习后，相信大家对Vue中怎么实现3D标签云这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！