Vue中实现3D标签云的详细代码

  <div class="tagcloud-all"> {{item.name}}</div>

 // 标签云 .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; } } } 

 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  { return Math.random() <0.5 ? 1 : -1; }); for (let i = 0; i  {           // 注意: 所有的在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  {            // 注意: 所有的在onReady方法中执行的方法都需要$nextTick确保所有的标签都已经渲染 var l = this.oList.offsetWidth / 2; var t = this.oList.offsetHeight / 2; for (var i = 0; i  {            // 注意: 所有的在onReady方法中执行的方法都需要$nextTick确保所有的标签都已经渲染 var aTmp = []; for (let i = 0; i  vItem2.cz) { return -1; } else if (vItem1.cz  { this.oList = this.$refs.tagcloudall; this.oA = this.oList.get<a>本文来源gao($daima.com搞@代@#码(网</a>ElementsByTagName('a') var oTag = null; for (var i = 0; i  { 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(); }) } }