vue实现聊天框发送表情 vue实现聊天框发送表情

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

文章图片

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; }