coding
最代码人间蒸发的gravatar头像
最代码人间蒸发2019-11-01 20:15:01
沙雕程序员(八)—— vue中使用标签云。

        最近在访问悠哥的博客的时候发现他的标签云很有意思,如下图,于是本着华丽呼哨的原则,我也决定整一个!!!smiley

       在悠哥的博客下,我通过f12知道了他用了tag-cloud,于是我再npm上找了一个类似的,叫3dtag-cloud。使用方法如下。

1. 安装这个插件

npm i -S TagCloud

2.在你要用到标签云的页面,引入!在script下!

const TagCloud = require('TagCloud');

3.在你需要标签云的地方定义一个div

<div id="tagCloud" ></div>

4.在mounted中使用!

let container = document.getElementById('tagCloud')
TagCloud(container, this.tagList, this.tagCloud);

       重点说明一下这里,this.tagList是你的标签,this.tagCloud是你定义3d标签云的属性(默认其实最合适),我使用的是默认的,想要修改配置的小伙伴可以参考作者源码,我给大家贴一下。

 // 计算配置
        self.radius = self.config.radius; // 滚动半径
        self.depth = 2 * self.radius; // 滚动深度
        self.size = 1.5 * self.radius; // 随鼠标滚动变速作用区域
        self.maxSpeed = TagCloud._getMaxSpeed(self.config.maxSpeed); // 滚动最大速度倍数
        self.initSpeed = TagCloud._getInitSpeed(self.config.initSpeed); // 滚动初速度
        self.direction = self.config.direction; // 初始滚动方向
        self.keep = self.config.keep; // 鼠标移出后是否保持之前滚动
// 默认配置
    static _defaultConfig = {
        radius: 100, // 滚动半径, 单位px
        maxSpeed: 'normal', // 滚动最大速度, 取值: slow, normal(默认), fast
        initSpeed: 'normal', // 滚动初速度, 取值: slow, normal(默认), fast
        direction: 135, // 初始滚动方向, 取值角度(顺时针deg): 0 对应 top, 90 对应 left, 135 对应 right-bottom(默认)...
        keep: true, // 鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
    };

       如上配置,这要在return里边设置初始值就可以了!

       这里提个小建议,建议大家把这样的模块拿出来封装一下,便于其他页面也可以使用。

       我们来看一下效果!

       美中不足的是,这个插件的作者没有设置点击事件,所以这个标签云你只能看,不能点击跳转!

       如果小伙伴们觉得想省事一点,不想太多麻烦就使用上边的办法!如果跟我一样是个死心眼,就用下边的办法实现跳转!

       所以我重新百度了一套!vue实现标签云效果,大家可以参考一下!当然大家先得按他的写出这样的效果!值得注意的是,咱们是要在咱们的页面中写,而不是写在app.vue这个页面下,这个是公共页面!

       那么他这个是百分百对吗?或者说可以拿来就用吗?不是!需要根据咱们的实际情况,具体情况具体修改!

       我写的跟他的大致相同,但是我们的标签是通过后台发起请求返回的龙8国际娱乐官方网站,而不是前端直接写死的,所以这里就会出现一个问题,vue生命周期这一点不可避免,你用他的这个直接将你后台返回龙8国际娱乐官方网站渲染,会发现渲染失败,因为他在created中就开始赋值了,而我们请求后台返回龙8国际娱乐官方网站的时间已经超过了created的赋值时间,所以会失败!那么这时候就需要改变一下策略,在我后台请求成功返回的地方来赋值,就不会出现渲染不成功的情况了!代码如下!

listTag () {
  this.$http({
    url: this.$http.adornUrl('/article/searchTag'),
    method: 'get',
    params: this.$http.adornParams()
  }).then(({data}) => {
    if (data && data.status === 0) {
      // this.tagList = data.result.data
      let tags=[];
      for(let i = 0; i < this.tagList.length; i++){
        let tag = {};
        let k = -1 + (2 * (i + 1) - 1) / this.tagList.length;
        let a = Math.acos(k);
        let b = a * Math.sqrt(this.tagList.length * Math.PI)//计算标签相对于球心的角度
        // debugger
        tag.text = this.tagList[i];
        tag.x = this.CX +  this.RADIUS * Math.sin(a) * Math.cos(b);//根据标签角度求出标签的x,y,z坐标
        tag.y = this.CY +  this.RADIUS * Math.sin(a) * Math.sin(b);
        tag.z = this.RADIUS * Math.cos(a);
        tag.href = '/articles/search'+ '?keywords=' + tag.text;//给标签添加链接
        tags.push(tag);
      }
      this.tagList = tags;//让vue替我们完成视图更新
    }
  })

此时运行就完美无缺了!

这里我就不解释他的代码了,作为一个后端,我还是会用就可以了!

效果如下图!

这里有个bug,就是鼠标移除速度不会变回原始速度!有牛牛感兴趣可以解决一下,如能解决,群里私我,必然答谢!

至此全文结束,拜了个拜

 

 


打赏

已有1人打赏

最代码官方的gravatar头像

分享到:

最近浏览
coding喵 LV162小时前
太阳
youwuzuichen LV611月11日
月亮星星星星
manmi123 LV311月9日
星星星星星星
hhuangh LV411月8日
月亮
s81815345 LV111月8日
星星
最代码_码鑫源 LV411月8日
月亮
shanjunkai123 LV211月5日
星星星星
Space LV2911月4日
太阳月亮月亮月亮星星
胖胖来了 LV311月4日
星星星星星星
1225086246 LV311月4日
星星星星星星
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友

龙8国际娱乐pt老虎机