Vue开发聊天界面（一）

最近业务里面有个需求就是开发一个类似微信的聊天页面的H5，不需要像微信那么复杂，但是得有个样子，弄了半天之后终于有了个样子。决定写个博客记一下这个过程，希望后续不会鸽

组件拆分

1.1.png

拆了3个，打字的，聊天item，聊天list。大概就这样了。

其中聊天list 用了一个better-scroll这个第三方插件。

首先第一步就是开发这个聊天item

聊天item 开发

分析一下需求，别人发过来的和我们发过去的是两个排版和样式，但是不用单独写两个，用个逻辑区分一下就可以了，也可以动态绑定css什么的差别很小。

<template>
  <div class="record-wrapper">
    
    <!-- 时间，后续开发 --> 
    <div class="time"></div>
      
    <!-- 消息， msg通用样式 msg-right/msg-left 区分排版左右 -->
    <div v-if="from == 1" class="msg msg-right">
       
      <div class="img-wrapper">
        <img class="img" :src="from1" />
      </div>
      
      <!-- 消息框， msg通用样式 message-wrapper-right/left 区分聊天框颜色 -->
      <div class="message-wrapper message-wrapper-right">
        <div class="message">{{ message }}</div>
      </div>
      
    </div>
  </div>
</template>

这个是只有1边的，逻辑就是在消息那边加个v-if，判断来源，也可以动态绑定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>

个人觉得css还是比较重要的，这里用了sass来写。主要解决方案就是用一个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>

这个是没有调样式的，只是为了自己嗨弄的，可能会很丑。
最后大概就是这样的咯

image.png

下一篇（2）点这里