欢迎大家进群，一起探讨学习

微信公众号，每天给大家提供技术干货

vue实现标签云，让你的标签动起来

npm包地址 `https://www.npmjs.com/package/bright-tag`

项目介绍

Vue标签云UI组件

安装教程

npm i bright-tag
在main.js中

import tagCloud from 'bright-tag'
Vue.use(tagCloud)

使用说明

props

data

Object数组。name属性是显示的标签名，其他自行扩展。

config

Object对象，配置项。有下面几个参数：

参数	默认值	说明
radius	120	滚动半径，Number，单位px
maxFont	24	最大字体大小
color	null	字体颜色。为null时随机
rotateAngleXbase	600	X方向旋转速度基数，数越小速度越快
rotateAngleYbase	600	Y方向旋转速度基数，数越小速度越快

方法

方法名	参数	说明
clickTag	tag	点击标签的方法。返回整个标签

调用用例

<!-- template -->
<tag-cloud :data="hotTag" @clickTag="clickTagItem"></tag-cloud>

// Vue实例
export default {data () {return {hotTag: [{"id":"05023f8da31c4b4187cc6899e2a3aec2","name":"镇远县"},{"id":"0ef028e5278f4f5ca31f99f1bd22b1cc","name":"剑河县"},{"id":"1a32ef04d3c548eaa6777abb46da32f2","name":"台江县"},{"id":"2c26488325bd493687d16315fe0e5fdd","name":"岑巩县"},{"id":"3a786111828a4b9f89ae9da25753eedd","name":"黎平"},{"id":"4ed593eed91b4244969995237f5c96c5","name":"丹寨县"},{"id":"615d2c178f1a47cb8d473823e74f5386","name":"凯里市"},{"id":"76f652df03db43349272a9aff492b065","name":"榕江县"},{"id":"8ff29d0d35e548feb945063b34ed9c9b","name":"黄平县"},{"id":"a8ac2170008746fdadc05ea461bc5e37","name":"雷山县"}]}},methods: {clickTagItem (tag) {// TODO}}
}

以下是源码解析

<template><div class="tag-wall"        <div class="tag-cloud" ref="wrapper"><pv-for="(item, index) in data":key="index"ref="tag"@click="clickTag(item)"@dblclick="dbclickTag(item)">{{ item.name }}</p></div></div>
</template><script>export default {data() {return {data: [{ id: "05023f8da31c4b4187cc6899e2a3aec2", name: "镇远县" },{ id: "0ef028e5278f4f5ca31f99f1bd22b1cc", name: "剑河县" },{ id: "1a32ef04d3c548eaa6777abb46da32f2", name: "台江县" },{ id: "2c26488325bd493687d16315fe0e5fdd", name: "岑巩县" },{ id: "3a786111828a4b9f89ae9da25753eedd", name: "黎平" },{ id: "4ed593eed91b4244969995237f5c96c5", name: "丹寨县" },{ id: "615d2c178f1a47cb8d473823e74f5386", name: "凯里市" },{ id: "76f652df03db43349272a9aff492b065", name: "榕江县" },{ id: "8ff29d0d35e548feb945063b34ed9c9b", name: "黄平县" },{ id: "a8ac2170008746fdadc05ea461bc5e37", name: "雷山县" },],option: {radius: 140, // 滚动半径，单位pxmaxFont: 24, // 最大字体大小color: null, // 字体颜色。为空时随机rotateAngleXbase: 600, // 默认旋转速度基数，数越小速度越快rotateAngleYbase: 600,},tagList: [],};},beforeDestroy() {if (this.timer) {clearInterval(this.timer);this.timer = null;}},watch: {data() {this.$nextTick(() => {this._initTags();});},},mounted() {this._initTags();},created() {this.listTag();if (this.config != null) {this.option = Object.assign({}, this.option, this.config);}},methods: {_initTags() {this.rotateAngleX = Math.PI / this.option.rotateAngleXbase;this.rotateAngleY = Math.PI / this.option.rotateAngleYbase;for (var i = 0, length = this.data.length; i < length; i++) {// 获取球面上均匀的点的经纬度 θ = arccos( ((2*num)-1)/all - 1); Φ = θ*sqrt(all * π);let angleX = Math.acos((2 * (i + 1) - 1) / length - 1);let angleY = angleX * Math.sqrt(length * Math.PI);// 根据经纬度获取点的坐标，球中心的点坐标是 (0,0,0) x=r*sinθ*cosΦ   y=r*sinθ*sinΦ   z=r*cosθ;const x = this.option.radius * Math.sin(angleX) * Math.cos(angleY);const y = this.option.radius * Math.sin(angleX) * Math.sin(angleY);const z = this.option.radius * Math.cos(angleX);if (this.option.color) {this.$refs.tag[i].style.color = this.option.color;} else {// 随机颜色this.$refs.tag[i].style.color ="rgb(" +Math.round(255 * Math.random()) +"," +Math.round(255 * Math.random()) +"," +Math.round(255 * Math.random()) +")";}// 每个标签对象都有四对值var tag = {x: x,y: y,z: z,ele: this.$refs.tag[i],};this.tagList.push(tag);}const _self = this;const datas = _self.tagList;this.timer = setInterval(function () {for (var i = 0; i < datas.length; i++) {_self.rotateX(datas[i]);_self.rotateY(datas[i]);_self.setPosition(datas[i],_self.option.radius,_self.option.maxFont);}}, 20);},setPosition(tag, r, maxFont) {// 设置每个标签的坐标位置和字体大小以及透明度if (this.$refs.wrapper) {tag.ele.style.transform ="translate(" +(tag.x +this.$refs.wrapper.offsetWidth / 2 -tag.ele.offsetWidth / 2) +"px," +(tag.y +this.$refs.wrapper.offsetHeight / 2 -tag.ele.offsetHeight / 2) +"px)";tag.ele.style.opacity = tag.z / r / 2 + 0.7;tag.ele.style.fontSize = (tag.z / r / 2 + 0.5) * maxFont + "px";}},rotateX(tag) {var cos = Math.cos(this.rotateAngleX);var sin = Math.sin(this.rotateAngleX);var y1 = tag.y * cos - tag.z * sin;var z1 = tag.y * sin + tag.z * cos;tag.y = y1;tag.z = z1;},rotateY(tag) {var cos = Math.cos(this.rotateAngleY);var sin = Math.sin(this.rotateAngleY);var x1 = tag.z * sin + tag.x * cos;var z1 = tag.z * cos - tag.x * sin;tag.x = x1;tag.z = z1;},dbclickTag() {if (this.timer) {clearInterval(this.timer);this.timer = null;} else {const _self = this;this.timer = setInterval(function () {for (var i = 0; i < _self.tagList.length; i++) {_self.rotateX(_self.tagList[i]);_self.rotateY(_self.tagList[i]);_self.setPosition(_self.tagList[i],_self.option.radius,_self.option.maxFont);}}, 20);}},clickTag(item) {this.$emit("clickTag", item);},},
};
</script><style scoped>
.tag-cloud {width: 300px;height: 300px;position: relative;color: #333;margin: 0 auto;text-align: center;
}.tag-cloud p {position: absolute;top: 0px;left: 0px;color: #333;font-family: Arial;text-decoration: none;margin: 0 10px 15px 0;line-height: 18px;text-align: center;font-size: 16px;padding: 4px 9px;display: inline-block;border-radius: 3px;
}
.tag-cloud p:hover {cursor: pointer;
}
</style>

各位老板关注下

vue实现标签云，让你的标签动起来相关推荐

java 标签云_javascript实现动态标签云
今天上学校的图书馆,看到了一个好玩的东西,特意百度了下,发现叫做"标签球",效果图为: 直接代码如下: CSS: #div1 {position:relative; width:3 ...
建站分享：调整WordPress自带标签云参数
▣ 博主主站地址:微笑涛声 [www.cztcms.cn] ▣ 博主其他平台: CSDN 简书开源中国思否华为云博客 WordPress 自带的标签云是一个很实用的小工具.站长可以通过标签对具有 ...
重组标签云-标签聚类及其评价研究
重组标签云-标签聚类及其评价研究 AlbertoPérez García-Plaza a*, Arkaitz Zubiaga b, Víctor Fresnoa,Raquel Martínez a a ...
php tagcloud,WordPress函数:wp_tag_cloud(标签云)详解和举例
wp_tag_cloud() 函数的作用是用来标签云的,可以根据每个标签所关联的文章次数来定义字体大小.标签排序等属性.从 2.8 版本开始,添加了分类法(taxonomy)参数,这就意味着,除了 ...
（翻译）标签云（Tag Cloud）
问题概述用户想以可视化的方式来浏览不同人气的内容[1]. 示例用途用于当网站用户可以自行添加内容和标签时: 用于当网站中的标签数量超过10~20个时,标签具有的权值与其被引用的次数相关[2] ...
3D标签云的简单实现
3D标签云的实现最近在做一些小Demo,看到了3D标签云觉得很酷炫,就学着做了一下.虽然看起来有点难,但是分解了看其实还是很普通的js运动的实现. 效果预览https://chestnut647.g ...
wordpress主题怎样在标签云效果中显示每个标签的文章数？
tag标签是wordpress程序所独特的一个模块,在国产的CMS程序(如:织梦)就很难见到它的踪迹.而标签以标签云来展示更是wordpress主题开发的一个常态.变化多样的标签云展示,给wordpr ...
MFC OpenGL标签云（转）
初识标签云是在去年年末,一看到这个应用我就特别感兴趣.还记得08年在北京做Mobile应用的时候就在想,是不是可以通过某种方式做界面扩展,让相对狭小的手机屏幕只显示有效部分,而扩展部分可以在屏幕以外, ...
vue实现标签云效果
闲扯两句最近想给自己的博客上加上一个3D标签云的效果,用来表示自己博客文章的分组,网上找到了canvas实现的,还有a元素实现的解析3D标签云,我想让标签可以选择和点击,又不想在标签数量较多时操作a ...

vue实现标签云，让你的标签动起来

欢迎大家进群，一起探讨学习

微信公众号，每天给大家提供技术干货

博主技术笔记

博主网站地址1

博主网站地址2

博主开源微服架构前后端分离技术博客项目源码地址，欢迎各位star

vue实现标签云，让你的标签动起来

npm包地址 `https://www.npmjs.com/package/bright-tag`

项目介绍

安装教程

使用说明

以下是源码解析

各位老板关注下

vue实现标签云，让你的标签动起来相关推荐

最新文章

热门文章

vue实现标签云，让你的标签动起来

欢迎大家进群，一起探讨学习

微信公众号，每天给大家提供技术干货

博主技术笔记

博主网站地址1

博主网站地址2

博主开源微服架构前后端分离技术博客项目源码地址，欢迎各位star

vue实现标签云，让你的标签动起来

npm包地址 https://www.npmjs.com/package/bright-tag

项目介绍

安装教程

使用说明

以下是源码解析

各位老板关注下

vue实现标签云，让你的标签动起来相关推荐

最新文章

热门文章

npm包地址 `https://www.npmjs.com/package/bright-tag`