vue界面自动生成(Vue中实现3D标签云的详细代码)
类别:编程学习 浏览量:779
时间:2021-10-02 01:09:05 vue界面自动生成
Vue中实现3D标签云的详细代码预览:
代码:
页面部分:
<template> <li class="tagcloud-all" ref="tagcloudall"> <a v-for="item in tagList" :href="item.url" rel="external nofollow" :style="'color:' + item.color + ';top: 0;left: 0;filter:none;'">{{item.name}}</a> </li> </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标签云内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue做个人页面(vue简易记事本开发详解)
- vue3封装table组件(Vue封装通用table组件的完整步骤记录)
- vue实现商品详情讲解(京东 Vue3 组件库支持小程序开发的详细流程)
- vue 中后台管理系统(Vue实现学生管理功能)
- vue封装一个功能函数(vue中利用mqtt服务端实现即时通讯的步骤记录)
- vue自定义组件定义事件(基于Vue实现自定义组件的方式引入图标)
- vuex怎么使用数据(vuex的辅助函数该如何使用)
- vue element 权限管理(Vue Element前端应用开发之功能点管理及权限控制)
- vue-router的两种模式(vue-route路由管理的安装与配置方法)
- vue代码和element用法(Vue Element前端应用开发之整合ABP框架的前端登录)
- vue如何在tab标签页循环加定时器(vue实现tab标签标签超出自动滚动)
- vueaxios使用教程交流(Vue使用axios图片上传遇到的问题)
- vue组件轮播(vue+rem自定义轮播图效果)
- vue本地图片切换(vue动态加载本地图片的处理方法)
- vue加element ui弹窗(Vue中ElementUI分页组件Pagination的使用方法)
- vue中的mapgetter优势(vuex 中辅助函数mapGetters的基本用法详解)
- 岳云鹏跟凤凰传奇谈心,说出了人生中最重要的三个人,这才成功(岳云鹏跟凤凰传奇谈心)
- 爱情可以当饭吃吗(爱情能当饭吃吗)
- Top 3 JSHS《运动与健康科学 英文 》跻身SCI体育学期刊世界前三(Top3JSHS运动与健康科学)
- 体坛传媒LOGO全新升级,多元发展迈出坚实步伐(体坛传媒LOGO全新升级)
- 超撩人治愈的绝美水彩,原来出自她之手 一笔一画令无数人沉醉(超撩人治愈的绝美水彩)
- 新手的勾线(新手的勾线)
热门推荐
- python整型可以用什么表示(实例介绍Python中整型)
- angular路由树(详解Angular路由之子路由)
- python字符串分析总结(Python 存储字符串时节省空间的方法)
- 网站怎么样选服务器(网站服务器怎么选?)
- vue-router起步教程交流(vue3使用vue-router的完整步骤记录)
- laravel框架如何查询空的信息(Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法)
- 网页打开serviceunavailable(503 service unavailable错误解决方案讲解)
- python中mat文件怎么读(Python第三方库h5py_读取mat文件并显示值的方法)
- php7.4类型属性实例详解(PHP 7.4中使用预加载的方法详解)
- sqlserver索引实例(SQL Server索引的原理深入解析)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9