• 我們的項(xiàng)目基本功能基本都開(kāi)發(fā)完了，下面就是優(yōu)化項(xiàng)目的一些細(xì)節(jié)了
• 第一個(gè)細(xì)節(jié)生巡，我們來(lái)實(shí)現(xiàn)【在線頭像變正常冗栗，不在線頭像變灰色，并且可以實(shí)時(shí)變化】

image.png

• 目前是正常的顏色宵凌，但是他們都沒(méi)在線鞋囊，所以要先改成默認(rèn)灰色
• 打開(kāi)代碼src/views/home/index.vue
• 找到頭像設(shè)置變灰樣式filter: grayscale(100%);

.avatar {
   ::v-deep img {
     filter: grayscale(100%);
   }
}

• 這樣頭像就變灰了

image.png

• 如果想要變成有顏色的頭像，直接將filter: grayscale(100%);設(shè)置成filter: grayscale(0%);即可
• 這里要用到動(dòng)態(tài)綁定class
• 來(lái)測(cè)試下瞎惫，判斷索引讓第一個(gè)好友頭像變亮
• 找到頭像溜腐，動(dòng)態(tài)綁定class，如下

image.png

 :class="(index==0?'color':'')"

• 然后在設(shè)置css樣式

 .color{
          ::v-deep img {
            filter: grayscale(0%);
          }
        }

• 這樣第一個(gè)好友頭像就會(huì)變亮

image.png

• 邏輯我們已經(jīng)知道了瓜喇，那怎么去真實(shí)判斷好友在線不在線呢挺益？
• 其實(shí)在我們剛鏈接wocketIo服務(wù)器的時(shí)候，服務(wù)端給我們發(fā)送了一個(gè)在線好友的事件乘寒，我們只需監(jiān)聽(tīng)下這個(gè)事件望众，拿到在線好友的id，然后去和你好友列表的好友id做對(duì)比就可以了

image.png

• 可以看到伞辛，服務(wù)端推送了一個(gè)users事件烂翰，下面是在線好友的對(duì)象
• 第一步，我們先來(lái)監(jiān)聽(tīng)users事件蚤氏，在當(dāng)前頁(yè)面使用sockets方法函數(shù)

 sockets: {
    users: function (data) {
      console.log(data)
    },
  },

image.png

• 這樣就打印出來(lái)了刽酱，在線好友的對(duì)象，下面是處理邏輯瞧捌，【取對(duì)象的keys組成在線好友id數(shù)組】棵里，使用到Object.keys()語(yǔ)法

sockets: {
    users: function (data) {
      console.log(data)
      console.log(Object.keys(data))
    }
  },

image.png

• id數(shù)組拿到了，就對(duì)比下你的好友列表姐呐，如果id相等殿怜，就賦值你好友列表的那個(gè)人的的對(duì)象，改變isZaixian的值曙砂，比如isZaixian=1头谜，判斷條件再改成item.isZaixian ==1?'color':''

:class="item.isZaixian == 1 ? 'color' : ''"

• 下面是處理邏輯，判斷好友在線把isZaixian改成1

 sockets: {
    users: function (data) {
      console.log(data)
      console.log(Object.keys(data))
      this.isZaixianArr = Object.keys(data)
    }
  },

 data() {
    return {
        isZaixianArr:[]
    }
}

• 然后在獲取好友列表的方法了鸠澈，在then回調(diào)后柱告，去處理邏輯

async getMyfriendsFun() {
      try {
        const res = await getMyfriends()
        let arr = res.data
        const idSet = new Set(this.isZaixianArr)
        //https://blog.csdn.net/yiyueqinghui/article/details/107773347
        const res1 = arr.map(o => ({ ...o, isZaixian: idSet.has(o._id) ? 1 : o.isZaixian }))
        this.list = res1
      } catch (error) {
        console.log(error)
      }
    },

• 在好友上線的時(shí)候截驮，刷新你的好友列表

sockets: {
    users: function (data) {
      // console.log(data)
      // console.log(Object.keys(data))
      this.isZaixianArr = Object.keys(data)
      this.getMyfriendsFun()
    }
  },

image.png

• 這樣就變亮了，但是還要處理下排序际度，在線的在上面

 async getMyfriendsFun() {
      try {
        const res = await getMyfriends()
        let arr = res.data
        console.log(this.isZaixianArr);
        const idSet = new Set(this.isZaixianArr)
        // https://blog.csdn.net/yiyueqinghui/article/details/107773347
        console.log(idSet);
        const res1 = arr.map(o => ({ ...o, isZaixian: idSet.has(o._id) ? 1 : o.isZaixian }))
        this.list = res1.sort(function (a, b) {
            return b.isZaixian - a.isZaixian
          })
      } catch (error) {
        console.log(error)
      }
    },