vue聊天框发送表情
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/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>
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)