这篇文章主要为大家详细介绍了vue实现聊天框发送表情，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue聊天框发送表情以及vue界面发送表情实现的具体代码，供大家参考，具体内容如下
1.在发送消息的时候，判断发送的消息是不是表情，表情的type:3,content:[爱心]，这样存储在数据库中
2.在获取聊天记录的时候，判断type===3,处理表情，
1.textElement.vue
<div class="text-element-wrapper"> <div class="text-element"> <div> <p>{{ date }}</p><!-- 文字 --><span>{{ chatItem.content }}</span><span>{{ chatItem.content }}</span><!-- 表情 --></div><div> </div></div></div> .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; }
vue界面发送表情实现，主要是思路：
<div id="emoji-list" class="flex-column"> //首先根据这个来判断发送表情弹窗用不用出现 <div class="flex-cell flex-row"> <div class="flex-cell flex-row cell"> </div></div></div> @import '../../assets/css/dialogue.css'; #emoji-list { height: 230px; background: #fff; } #emoji-list .cell { line-height: 13vh; border-right: 1rpx solid #ddd; border-bottom: <i>本文来源gaodai$ma#com搞$$代**码)网@</i>1rpx solid #ddd; } .flex-row { display: flex; flex-direction: row; justify-content: center; align-items: center; } .flex-column { display: flex; flex-direction: column; justify-content: center; align-items: stretch; } .flex-cell { flex: 1; } .cell img { width: 35px; height: 35px; }
以上就是vue实现聊天框发送表情的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue实现聊天框发送表情
转载请注明原文链接：vue实现聊天框发送表情
