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>