vue实现一个聊天对话框,vue聊天框架
这篇文章主要为大家详细介绍了某视频剪辑软件实现聊天界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现聊天界面展示的具体代码，供大家参考，具体内容如下
1.功能需求
根据索引选择跟不同的人进行聊天
2.代码展示
mock.js:
从“莫克杰”导入模拟
Mock.mock(/chatchild ，{
结果:[
{
id:“001”，
imgurl:"/static/image/10。jpg”，
名称： XKDK ，
日期："09:23",
单词：哈哈，好哒
},
//.
]
});
导出默认模拟
userinfo.js:
let usermsg={
id:“122”，
imgurl:"/static/image/8。jpg”，
单词：是的!,
数据：{
id:“1529”，
imgurl:"/static/image/7。jpg”，
名称：易安居士，
单词：[
{信息：在吗？},
{信息：不在},
{信息：你把草稿交了没有},
{信息：我今天中午吃完饭就一直看剧了},
{信息：我发现我真的是宅女},
{信息：哈哈哈},
{信息：有空找你约顿饭},
{信息：嗯嗯},
{信息：反正影响不大}
]
}
}
导出默认用户消息
index.js:
从“vue”导入某视频剪辑软件
从“vue路由器"导入路由器
导入聊天来源./components/Chat.vue
导入聊天详细信息自./组件/页面/聊天详细信息。vue
Vue.use(路由器)
导出默认新路由器({
路线：[
{
路径："/聊天"，
组件：聊天
},
{
路径："/ChatDetail "，
组件：聊天详细信息
}
]
})
//解决路由报错的代码
const原始推送=路由器。原型。推
路由器.原型.推送=功能推送（位置){
返回originalPush.call(此处，位置).接住(错误=错误)
}
Chat.vue:
模板
div id=聊天
底部/
Header :name=msg /
div class=chat_alluser
div ref=聊天用户 @ click= check child(index) class=聊天用户 v-for=(item，index) in chat :key=index
聊天子对象：img src= item。 imgurl :昵称= item。 name :time= item。 date :word= item。单词/
/div
/div
/div
/模板
脚本
从底部导入./组件/菜单/底部；
导入标题自./组件/菜单/标题；
从导入聊天孩子./组件/页面/聊天子对象；
导出默认值{
姓名："聊天",
组件：{
底部：底部，
表头：表头，
聊天小孩：聊天小孩
},
data() {
返回{
消息： 微信，
聊天：空，
名称：空
};
},
已安装(){
这个. axios.get(/chatchild ).然后(res={
这个。聊天=研究数据。结果；
});
},
方法：{
checkChild(index) {
这个参考文献。聊天用户[索引]。风格。背景色= RGB(240，240，240)；
//动态数字正射影像图元素渲染完成之后，跳转到另一个界面（聊天详情)
//获取动态名字
让用户名=this.chat[index].姓名；
这个. nextTick(()={
这个. router.push({
路径："/ChatDetail "，
查询：{姓名：用户名}
});
});
}
}
};
/脚本
样式lang=scss 范围
#聊天{
宽度：100%;chat_alluser {
边距-底部：7.5雷姆；chatuser {
位置：相对；
顶部：3.5雷姆；
填充：0.3雷姆0；
}
}
}
/风格
父组件使用子组件里的属性和方法：
在父组件中的子组件上定义裁判员属性，通过这个. refs.name属性或这个. refs.name方法
ChatChild.vue:
模板
div id=chatchild
div class=照片
img :src=imgsrc alt /
/div
div class=内容
差异
span class= content _ nickname“{ nickname } }/span
span class= content _ time { time } }/span
/div
span class= content _ word { word } }/span
/div
/div
/模板
脚本
导出默认值{
姓名：聊天孩子，
道具：{
imgsrc :字符串，
昵称：字符串，
时间:字符串，
单词:字符串
}
};
/脚本
样式lang=scss 范围
#聊天孩子{
宽度：100%;
身高：5雷姆；
显示器：flex
弯曲方向：行；
框大小：边框-框；照片{
flex:1；
身高：5雷姆；
img{
对象适合：封面；
宽度：4个项目
身高：4雷姆；
边框半径：5px
显示：块；
边距：0自动；
边距-顶部：0.5雷姆；
左边距：1。
}
}。内容{
flex:4；
身高：5雷姆；
下边框：0.5像素纯色rgb(240，240，240)；
左填充：0.5雷姆；
填充顶部：0.5雷姆；
框大小：边框-框；
部门{。内容_昵称{
显示：内嵌-块；
字体大小：1.1红色；
边距-顶部：0.3雷姆；
}。内容_时间{
浮动：对；
右边距：1。
颜色：rgb(209，206，206)；
字体大小：0.8雷姆；
}
}。content_word{
颜色：rgb(209，206，206)；
字体大小：0.8雷姆；
显示：块；
边距-顶部：0.5雷姆；
}
}
}
/风格
ChatDetail.vue:
模板
div id=chatdetail
div class=chattop
div @ click=返回 class= chattop _ back
icon-svg icon-class=后推_上一步_左兼头_上一页/
/div
div class= chat top _ name“{ name } }/div
div class=chattop_more
icon-svg icon-class=耿铎/
/div
/div
div class="聊天内容"
ChatMsg ref=chatmsg /
/div
div class=聊天页脚
div @click=changeSound
icon-svg :icon-class=issound /
/div
差异
input ref= send content @ keypress= sendmsg :type= istype :value= is value /
/div
差异
icon-svg icon-class=biaoqing /
/div
差异
icon-svg icon-class=del /
/div
/div
/div
/模板
脚本
从导入ChatMsg ./ChatMsg ；
导出默认值{
姓名：聊天详细信息，
data() {
返回{
名称：null，
声音："小西同志",
istype:文本，
存在值： ,
isshow:假，
tomsg: ，
msgchild: null
};
},
组件：{
ChatMsg: ChatMsg
},
已安装(){
this.name=this .$ route。查询。姓名；
this.msgchild=this .$ refs.chatmsg
},
方法：{
//进行返回操作
goback() {
这个1000美元路由器。go(-1)；
},
//切换投入的类型
changeSound() {
//在数据中定义一个变量isshow:假，利用这是一场秀与！这是一场秀进行切换
如果(!this.isshow) {
this.isshow=true
this.issound=余音；
this.istype=按钮
this.isvalue=按住说话；
}否则{
this.isshow=false
this.issound=小溪同志；
this.istype= text
这个。is value=
}
},
//发送消息
sendmsg(e) {
//1、用裁判员定义输入回复内容的投入文本框，定义发送内容变量接收其价值值（输入的内容)
让发送内容=this .$参考文献。发送内容。价值；
if(e . key code===13发送内容。拆分(“”).联接("")。长度！==0) {
//2、将聊天细节（父)组件中的发送内容（文本框输入的值)先用tomsg接收
this.tomsg=sendcontent
//3、用裁判员定义聊天消息（子)组件，并在安装好的中使用$参考文献获取，即this.msgchild
//4、调子组件里的方法，并将tomsg传到聊天消息（子)组件（具体的聊天内容)中
这个。msg子。保存味精(这个。tomsg)；
//5、发送完一条信息之后，需清空文本框
这个参考文献。发送内容。值=" "；
//回车时，调用子组件的随机消息的方法
这个。msg子。randommsg()；
}
}
}
};
/脚本
样式lang=scss 范围
#聊天详情{
位置：相对；
背景色：rgb(238，212，238)；chattop {
位置：固定；
top:0；
左：0;
z指数：10;
宽度：100%;
身高：3.5雷姆；
行高：3.5雷姆；
背景色：rgb(240，240，240)！重要；
显示器：flex
弯曲方向：行；chattop_back {
flex:1；
左边距：1。
}。chattop_name {
flex:20；
文本对齐：居中；
}。chattop_more {
flex:1；
右边距：1。
}
}。聊天内容{
宽度：100%;
身高：100%;
}。聊天页脚{
位置：固定；
左：0;
底部：0;
z指数：10;
宽度：100%;
身高：3.5雷姆；
行高：3.5雷姆；
文本对齐：居中；
背景色：rgb(240，240，240)！重要；
显示器：flex
弯曲方向：行；
div:第n个孩子(1),
div:第n个孩子(3),
div:n-child(4){
flex:1；
svg {
字体大小：1.5雷姆；
边距-顶部：0.9雷姆；
}
}
div:n-child(2){
flex:5；
输入{
宽度：100%;
身高：2.5雷姆；
大纲：无；
左填充：0.5雷姆；
框大小：边框-框；
身高：2.5雷姆；
边距-顶部：0.5雷姆；
边框样式：无；
字体大小：0.9雷姆；
边框-半径：4px
背景色：# fff
颜色：# 000;
}
}
}
}
/风格
ChatMsg.vue:
模板
div id=chatmsg ref=msg
！-动态创建-
div v-for=(item，index) in lists :key=index
div v-if= item。id==122 class= user
分区垂直滚动
img :src=item.face alt /
div class=泡泡
span{{item.word}}/span
/div
/div
/div
div v-if= item。id==1529 class= touser
分区垂直滚动
img :src=item.face alt /
div class=tobubble
span{{item.word}}/span
/div
/div
/div
/div
/div
/模板
脚本
从导入用户信息./userinfo ；
导出默认值{
名称： ChatMsg ，
data() {
返回{
用户信息： ,
列表：[]
};
},
已安装(){
这个。userid=userinfoid；
这个。user img=userinfo。imgurl
},
//vue自动滚动到底部
指令：{
滚动：{
已插入(el) {
埃尔。scrollintoview()；
}
}
},
方法：{
saveMsg(tomsg) {
this.lists.push({
id: this.userid，
face: this.userimg，
单词：tomsg
});
},
randomMsg() {
let touserdata=userinfo.data
this.lists.push({
id: touserdata.id，
face: touserdata.imgurl，
单词：
用户数据。单词【数学。地板(数学。random()* touser数据。文字。长度)]。信息
});
}
}
};
/脚本
样式lang=scss 范围
#chatmsg {
位置：相对；
顶部：3.5雷姆；
宽度：100%;
最小高度：44rem
背景色：rgb(238，212，238)；
边距-底部：3.5雷姆；
溢出-x:隐藏；
溢出-y:自动；用户{
位置：相对；
宽度：100%;
溢出：隐藏；
保证金：0.8雷姆0；
img {
对象适合：封面；
宽度：3个元素
身高：3雷姆；
边框半径：3px
浮动：对；
右边距：1。
}。气泡{
位置：相对；
浮动：对；
右边距：1。
填充：0.8雷姆；
框大小：边框-框；
边框半径：3px
最大宽度：65%;
背景色：rgb(116，228，116)；
跨度{
身高：1.25雷姆；
行高：1.25雷姆；
}
}。气泡：在{
位置：绝对；
右：-1.3人民币；
顶部：0.8雷姆；
内容："";
宽度：0;
高度：0;
边框：0.7雷姆实心；
边框-颜色：透明透明透明rgb(116，228，116)；
}
}。用户{
位置：相对；
宽度：100%;
溢出：隐藏；
保证金：0.8雷姆0；
img {
对象适合：封面；
宽度：3个元素
身高：3雷姆；
边框半径：3px
浮动：左；
左边距：1。
}。托布布尔
位置：相对；
浮动：左；
左边距：1。
填充：0 0.7雷姆；
框大小：边框-框；
边框半径：3px
最大宽度：65%;
背景色：rgb(116，228，116)；
行高：3个元素
}。tobubble:在{
位置：绝对；
左：-1.3雷姆；
顶部：0.8雷姆；
内容："";
宽度：0;
高度：0;
边框：0.7雷姆实心；
边框颜色：透明rgb(116，228，116)透明透明；
}
}
}
/风格
3.目录结构
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。