最代碼廣告位
最代碼人間蒸發的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這個頁面下,這個是公共頁面!

       那么他這個是百分百對嗎?或者說可以拿來就用嗎?不是!需要根據咱們的實際情況,具體情況具體修改!

       我寫的跟他的大致相同,但是我們的標簽是通過后臺發起請求返回的數據,而不是前端直接寫死的,所以這里就會出現一個問題,vue生命周期這一點不可避免,你用他的這個直接將你后臺返回數據渲染,會發現渲染失敗,因為他在created中就開始賦值了,而我們請求后臺返回數據的時間已經超過了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喵 LV1611月19日
太陽
youwuzuichen LV611月11日
月亮星星星星
manmi123 LV311月9日
星星星星星星
hhuangh LV411月8日
月亮
s81815345 LV111月8日
星星
最代碼_碼鑫源 LV411月8日
月亮
shanjunkai123 LV211月5日
星星星星
Space LV2911月4日
太陽月亮月亮月亮星星
胖胖來了 LV311月4日
星星星星星星
最代碼廣告位
頂部客服微信二維碼底部
>掃描二維碼關注最代碼為好友掃描二維碼關注最代碼為好友
福彩3d组选020前后关系