聊天佈局的問題----vue

最近筆者在作一個聊天功能的佈局，由於筆者的前端css佈局是半桶水，因此一開始寫這個聊天的佈局，無從下手。

設及到的問題是，若是是本身發送給別人的消息，那麼就把本身頭像居右邊，若是是別人發給本身的消息，別人頭像就靠左。

因此看了一下別人寫的，就是用flex盒子模型的屬性，一會兒就搞定了。

首先要了解到盒子模型的默認配置是：

 

 

其中flex-direction用於設置主軸方向，當主軸爲row時，圖示：

 

其中flex-direction用於設置主軸方向，當主軸爲row-reverse時，圖示：

 

 

其中flex-direction用於設置主軸方向，當主軸爲column時，圖示：

 

 

 

其中flex-direction用於設置主軸方向，當主軸爲column-reverse時，圖示

 

 

 因此解決聊天佈局的問題：

1.首先因爲盒子模型的默認主軸是row,也就是從左到右，因此咱們判斷別人給咱們發消息時就默認盒子模型的本來設置就行了。

2.本身發送給別人的時候，設置主軸方向，橫向反轉就行了。

 2.1可是主軸橫向反轉後你會發現下面這個問

 

 

 

 

 

 

 

 

也就是聊天信息雖然到了右邊，可是信息內容也靠右了，因此這個時候得設置

 

代碼：html,其中self用來判別是不是本身發的信息

<div class="chatItem" v-for="(item,index) in chatContent" :key="index" :class="{self:fromUser=='管理員'}">
      <div class="avatar">
        <img :src="item.img" alt="">「聊天圖片」
        <span>{{item.from_user}}</span>「聊天姓名」
      </div>
      <div class="chatContentItem">
        {{item.contentWord}}這裏是聊天信息
      </div>
    </div>

css:

聊天內容的大div
.chatItem{
      display: flex;
      margin: 5px 10px;
      /* background-color: cyan; */
    }
//設置頭像部分
    .chatItem .avatar ,
    .chatItem .avatar img{
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: coral;
      line-height: 60px;
      text-align: center;
      color: cornsilk;
      margin: 5px;
    }
/* 聊天的對話內容 */
    .chatContentItem{
      margin-top:20px;
      margin-left: 0px;
      background-color: #bbb;
      border-radius: 5px;
      padding: 5px;
      line-height: 30px;
      height: 30px;
      color: 1E1E1E;
      font-size: 15px;
      font-weight: 900;
      position: relative;
      font-family: FZShuTi
      /* margin: 0 0 0 0; */
    }
    /* 聊天框前設置假裝元素用於對話框前的小角 */
    .chatContentItem::before{
      position: absolute;
      display: flex;
      content: '';
      width: 0;
      height: 0;
      border-left: 10px solid #bbbbbb;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      bottom: 0px;
      left: -8px;
    }
此處代碼和上面佈局差很少，只不過是本身發的，就把主軸反轉
    /* 設置聊天角色判別的樣式 */
    /* 若是是本身發的，則調換主軸方向 */
    .self{
      flex-direction: row-reverse;
      /* align-items: flex-end; */
      /* justify-content: flex-end; */
    }
    .self .chatContentItem{
      margin-top:20px;
      margin-right: 0px;
      background-color: #bbb;
      border-radius: 5px;
      padding: 5px;
      line-height: 30px;
      height: 30px;
      color: 1E1E1E;
      font-size: 15px;
      font-weight: 900;
      position: relative;
      font-family: FZShuTi
    }
    .self .chatContentItem::before{
      position: absolute;
      display: flex;
      content: '';
      width: 0;
      height: 0;
      border-left: 10px solid #bbbbbb;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      bottom: 0px;
      right: -8px; left: initial;此處若是不加繼承屬性的話，樣式仍是沒變化，這裏對於我這個小白仍是不太懂！
    }

修改後，圖片仍是對不齊，我就把它去掉了，唉