vue聊天框发送表情

vue聊天框发送表情

1.在发送消息的时候，判断发送的消息是不是表情，表情的type:3,content:[爱心]，这样存储在数据库中
2.在获取聊天记录的时候，判断type===3,处理表情，

<img v-else-if="chatItem.type === 3" :src="emojiUrl + emojiMap[chatItem.content]" style="width:25px;height:25px" />

1.textElement.vue

<template>
  <div class="text-element-wrapper" >
    <div class="text-element">
      <div :class="isMine ? 'element-send' : 'element-received'">
        <p>{{ date }}</p>
        <!-- 文字 -->
        <span>{{ chatItem.content }}</span>
        <span v-if="chatItem.type === 1">{{ chatItem.content }}</span>
        <!-- 表情 -->
        <img v-else-if="chatItem.type === 3" :src="emojiUrl + emojiMap[chatItem.content]" style="width:25px;height:25px" />
      </div>
      <div :class="isMine ? 'send-img' : 'received-img'">
        <img :src="chatItem.from_headimg" width="40px" height="40px"/>
      </div>
    </div>
  </div>
</template>

<script>
  // import decodeText from '../../../untils/decodeText'
  import { getFullDate } from '../../../untils/common'
  import {emojiMap, emojiUrl} from '../../../untils/emojiMap'

  export default {
    name: 'TextElement',
    props: ['chatItem', 'isMine'],
    data() {
      return {
        emojiMap: emojiMap,
        emojiUrl: emojiUrl,
      }
    },
    computed: {
      // contentList() {
      //   return decodeText(this.chatItem)
      // },
      // 时间戳处理
      date () {
        return getFullDate(new Date(this.chatItem.time * 1000))
      },
    }
  }
</script>

<style scoped>
  .text-element-wrapper {
    position: relative;
    max-width: 360px;
    border-radius: 3px;
    word-break: break-word;
    border: 1px solid rgb(235, 235, 235);
  }

  .text-element {
    padding: 6px;
  }

  .element-received {
    max-width: 280px;
    background-color: #fff;
    float: right;
  }
  .received-img {
    float: left;
    padding-right: 6px;
  }

  .element-send {
    max-width: 280px;
    background: rgb(5, 185, 240);
    float: left;
  }
  .send-img {
    float: right;
  }
</style>