vue表情包,vue 表情组件
这篇文章主要为大家详细介绍了某视频剪辑软件实现聊天框发送表情，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
某视频剪辑软件聊天框发送表情以及某视频剪辑软件界面发送表情实现的具体代码，供大家参考，具体内容如下
1.在发送消息的时候，判断发送的消息是不是表情，表情的类型：3,内容：[爱心],这样存储在数据库中
2.在获取聊天记录的时候，判断type===3，处理表情，
img v-else-if=聊天项目。 type===3 :src= emojiUrl emojiMap[聊天项目。content] style= width:25px；高度：25px /
textElement.vue
模板
div class=text-element-wrapper
div class=text-element
div :class=isMine？元素-发送:元素-接收
p{{ date }}/p
！-文字-
span{{ chatItem.content }}/span
span v-if=聊天项目。type===1"{聊天项目。content } }/span
！-表情-
img v-else-if=聊天项目。 type===3 :src= emojiUrl emojiMap[聊天项目。content] style= width:25px；高度：25px /
/div
div :class=isMine？"发送-即时消息":"接收-即时消息"
img:src=聊天项目。from _ head img width= 40px height= 40px /
/div
/div
/div
/模板
脚本
//从导入解码文本./././untils/decodeText
从导入{ getFullDate }./././untils/common
从导入{emojiMap，emojiUrl}./././untils/emojiMap
导出默认值{
名称："文本元素",
道具：[chatItem ， isMine]，
data() {
返回{
emojiMap: emojiMap，
emojiUrl: emojiUrl，
}
},
计算值：{
//contentList() {
//返回decodeText(this.chatItem)
//},
//时间戳处理
日期(){
返回getFullDate(新日期(this.chatItem.time * 1000))
},
}
}
/脚本
样式范围。文本元素包装器{
位置：相对；
最大宽度：360像素；
边框半径：3px
断字：断字；
边框：1px纯色rgb(235，235，235)；
}。文本元素{
填充：6px
}。元素-已接收{
最大宽度：280像素；
背景色：# fff
浮动：对；
}。接收-img {
浮动：左；
填充-右：6px
}。元素-发送{
最大宽度：280像素；
背景：rgb(5，185，240)；
浮动：左；
}。发送即时消息{
浮动：对；
}
/风格
某视频剪辑软件界面发送表情实现，主要是思路：
模板
section class= dialog-section clear fix
提示信息中的div class= row clear fix v-for=(item，index):key=index
img :src=item.uid==myInfo.uid？我的信息。头像：其他信息。 avatar :class= item。uid==myinfo。uid？headerleft : headerright
p :class=item.uid==myInfo.uid？ text left : text right v-html=自定义莫吉(item。内容)/p
/div
/部分
div id= e莫吉-list class= flex-column v-if= e莫吉显示//首先根据这个来判断发送表情弹窗用不用出现
div class= flex-cell flex-row v-for= imgs中的列表
列表中的 v-for= item @ click=输入莫吉(item)
img :src=“”./emoji/ item .png
/div
/div
/div
/模板
脚本
从" @/ws "导入{发送邮件}；//是一个长连接
从"洛达什"导入；//这个是射流研究…一个很强大的库
从@/eventBus//导入事件总线这是一个子父传递的公共文件
console.log(表情符号)
导出默认值{
data() {
this.imgs=_ .组块(表情符号，6) //这个是调用洛达什库的矮胖的人或物方法把六个元素分成一个数组只不过是绘文字这个数组中的二维数组
返回{
emojiShow: false //刚开始默认不显示点击按钮显示点击的按钮上可以写@click=emojiShow=emojiShow 这种写法
};
},
方法：{
自定义莫吉(文本){//这个函数就是服务器端把传过来的名称转化为图片的
返回文本。替换(/\[([A-Za-z0-9 _])\]/g， img src= ./e莫吉/$ 1。png style= width:30px；高度：30px )
},
输入莫吉(pic){
this.content=`[${pic}]`//传过来的名字转为图片
}
};
/脚本
样式范围
@导入././资产/CSS/对话。CSS ；
#表情符号-列表{
高度：230像素
背景：# fff
}
#表情符号-列表。单元格{
行高：13vh
border-right:1r px solid # DDD；
border-bottom:1r px solid # DDD；
}。flex-row {
显示器：flex
弯曲方向：行；
对齐-内容：居中；
对齐-项目：居中；
}。柔性柱{
显示器：flex
伸缩方向：列；
对齐-内容：居中；
对齐项目：拉伸；
}。柔性电池{
flex:1；
}。单元格图像{
宽度：35px
高度：35px
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。