vue实现标签云
<template>
<div class="tagcloud-all" ref="tagcloudall" @click="infClick">
<a
v-for="(item, index) in tagList"
:key="index"
class = "judge"
rel="external nofollow"
:style="'color:' + item.color + ';top: 0;left: 0;filter:none;'"
>{
{
item.name }}</a
>
</div>
</template>
<script>
import {
getClour} from '@/api/campus/index.js'
export default {
mounted(){
},
data() {
return {
tagList: [],
radius: 250,
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: {
infClick(e){
if(e.target.className == "judge"){
this.$emit('custom',e.target.innerHTML)
}
},
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(() => {
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)