vue实现聊天框发送表情

【vue实现聊天框发送表情】vue聊天框发送表情以及vue界面发送表情实现的具体代码,供大家参考,具体内容如下
1.在发送消息的时候,判断发送的消息是不是表情,表情的type:3,content:[爱心],这样存储在数据库中
2.在获取聊天记录的时候,判断type===3,处理表情,

vue实现聊天框发送表情
文章图片

1.textElement.vue
.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界面发送表情实现,主要是思路:
@import '../../assets/css/dialogue.css'; #emoji-list {height: 230px; background: #fff; }#emoji-list .cell {line-height: 13vh; border-right: 1rpx solid #ddd; border-bottom: 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; }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    推荐阅读