Vue開(kāi)發(fā)聊天界面（一）

最近業(yè)務(wù)里面有個(gè)需求就是開(kāi)發(fā)一個(gè)類似微信的聊天頁(yè)面的H5，不需要像微信那么復(fù)雜，但是得有個(gè)樣子，弄了半天之后終于有了個(gè)樣子。決定寫(xiě)個(gè)博客記一下這個(gè)過(guò)程，希望后續(xù)不會(huì)鴿

組件拆分

1.1.png

拆了3個(gè)，打字的，聊天item，聊天list。大概就這樣了。

其中聊天list 用了一個(gè)better-scroll這個(gè)第三方插件。

首先第一步就是開(kāi)發(fā)這個(gè)聊天item

聊天item 開(kāi)發(fā)

分析一下需求，別人發(fā)過(guò)來(lái)的和我們發(fā)過(guò)去的是兩個(gè)排版和樣式，但是不用單獨(dú)寫(xiě)兩個(gè)，用個(gè)邏輯區(qū)分一下就可以了，也可以動(dòng)態(tài)綁定css什么的差別很小。

<template>
  <div class="record-wrapper">
    
    <!-- 時(shí)間，后續(xù)開(kāi)發(fā) --> 
    <div class="time"></div>
      
    <!-- 消息， msg通用樣式 msg-right/msg-left 區(qū)分排版左右 -->
    <div v-if="from == 1" class="msg msg-right">
       
      <div class="img-wrapper">
        <img class="img" :src="from1" />
      </div>
      
      <!-- 消息框， msg通用樣式 message-wrapper-right/left 區(qū)分聊天框顏色 -->
      <div class="message-wrapper message-wrapper-right">
        <div class="message">{{ message }}</div>
      </div>
      
    </div>
  </div>
</template>

這個(gè)是只有1邊的，邏輯就是在消息那邊加個(gè)v-if，判斷來(lái)源，也可以動(dòng)態(tài)綁定css

弄好以后就這樣

<template>
  <div class="record-wrapper">
    <div class="time"></div>
    <div v-if="from == 1" class="msg msg-right">
      <div class="img-wrapper">
        <img class="img" :src="from1" />
      </div>
      <div class="message-wrapper message-wrapper-right">
        <div class="message">{{ message }}</div>
      </div>
    </div>

    <div v-else class="msg msg-left">
      <div class="img-wrapper">
        <img class="img" :src="from2" />
      </div>
      <div class="message-wrapper message-wrapper-left">
        <div class="message">{{ message }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    from: Number, // 1: 自己    2: 別人
    message: String,
    timestamp: Date,
  },
  data() {
    return {
      from1: require("../../../assets/imgs/from1.jpg"),
      from2: require("../../../assets/imgs/from2.jpg"),
    };
  },
};
</script>

個(gè)人覺(jué)得css還是比較重要的，這里用了sass來(lái)寫(xiě)。主要解決方案就是用一個(gè)display:flex配合上flex-direction: row-reverse讓頭像和消息左右排列

<style lang="scss" scoped>
.record-wrapper {
  margin: 4px;
  padding: 4px;
}
.time {
  text-align: center;
}
.msg {
  display: flex;
  flex-direction: row; 

  .message-wrapper {
    max-width: 220px;

    margin: 0px 10px 0px 10px;

    .message {
      margin: 8px;
      word-wrap: break-word; //英文換行
    }
  }

  .message-wrapper-left {
    background-color: lightslategray;
    border-radius: 0px 12px 12px 12px;
  }

  .message-wrapper-right {
    background-color: powderblue;
    border-radius: 12px 0px 12px 12px;
  }

  .img {
    flex: auto;
    height: 36px;
    width: 36px;
    border-radius: 8px;
  }
}
.msg-right {
  flex-direction: row-reverse;
}
.msg-left {
  flex-direction: row;
}
</style>

這個(gè)是沒(méi)有調(diào)樣式的，只是為了自己嗨弄的，可能會(huì)很丑。
最后大概就是這樣的咯

image.png

下一篇（2）點(diǎn)這里