这篇文章主要为大家详细介绍了Vue实现聊天界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue实现聊天界面展示的具体代码，供大家参考，具体内容如下
1.功能需求
根据索引选择跟不同的人进行聊天
2.代码展示
mock.js：
import Mock from 'mockjs' Mock.mock("/chatchild",{ 'result':[ { id:"001", imgurl:"/static/image/10.jpg-600", name:"XKDK", date:"09:23", words:"哈哈，好哒" }, // ... ... ] }); export default Mock
userinfo.js：
let usermsg={ id:"122", imgurl:"/static/image/8.jpg-600", words:"是的！", data:{ id:"1529", imgurl:"/static/image/7.jpg-600", name:"易安居士", words:[ {info:"在吗？"}, {info:"不在"}, {info:"你把草稿交了没有"}, {info:"我今天中午吃完饭 就一直看剧了"}, {info:"我发现我真的是宅女"}, {info:"哈哈哈"}, {info:"有空找你约顿饭"}, {info:"嗯嗯"}, {info:"反正影响不大"} ] } } export default usermsg
index.js：
import Vue from 'vue' import Router from 'vue-router' import Chat from '../components/Chat.vue' import ChatDetail from '../components/Pages/ChatDetail.vue' Vue.use(Router) export default new Router({ routes: [ { path: '/Chat ', component: Chat }, { path:'/ChatDetail', component:ChatDetail } ] }) // 解决路由报错的代码 const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }
Chat.vue：
<div id="chat"> <header /><div class="chat_alluser"> <div class="chatuser"> </div></div></div> #chat { width: 100%; .chat_alluser { margin-bottom: 7.5rem; .chatuser { position: relative; top: 3.5rem; padding: 0.3rem 0; } } }
父组件使用子组件里的属性和方法：
在父组件中的子组件上定义ref属性，通过 this.$ refs.name.属性或this.$refs.name.方法
ChatChild.vue：
<div id="chatchild"> <div class="photo"> </div><div class="content"> <div> <span class="content_nickname">{{nickname}}</span><span class="content_time">{{time}}</span></div><span class="content_word">{{word}}</span></div></div> #chatchild { width: 100%; height: 5rem; display: flex; flex-direction: row; box-sizing: border-box; .photo { flex: 1; height: 5rem; img{ object-fit: cover; width: 4rem; height: 4rem; border-radius: 5px; display: block; margin: 0 auto; margin-top: 0.5rem; margin-left: 1rem; } } .content { flex: 4; height: 5rem; border-bottom: 0.5px solid rgb(240, 240, 240); padding-left: 0.5rem; padding-top: 0.5rem; box-sizing: border-box; div{ .content_nickname{ display: inline-block; font-size: 1.1rem; margin-top: 0.3rem; } .content_time{ float: right; margin-right: 1rem; color: rgb(209, 206, 206); font-size: 0.8rem; } } .content_word{ color: rgb(209, 206, 206); font-size: 0.8rem; display: block; margin-top: 0.5rem; } } }
ChatDetail.vue：
<div id="chatdetail"> <div class="chattop"> <div class="chattop_back"> </div><div class="chattop_name">{{name}}</div><div class="chattop_more"> </div></div><div class="chatcontent"> </div><div class="chatfooter"> <div> </div><div> </div><div> </div><div> </div></div></div> #chatdetail { position: relative; background-color: rgb(238, 212, 238); .chattop { position: fixed; top: 0; left: 0; z-index: 10; width: 100%; height: 3.5rem; line-height: 3.5rem; background-color: rgb(240, 240, 240) !important; display: flex; flex-direction: row; .chattop_back { flex: 1; margin-left: 1rem; } .chattop_name { flex: 20; text-align: center; } .chattop_more { flex: 1; margin-right: 1rem; } } .chatcontent { width: 100%; height: 100%; } .chatfooter { position: fixed; left: 0; bottom: 0; z-index: 10; width: 100%; height: 3.5rem; line-height: 3.5rem; text-align: center; background-color: rgb(240, 240, 240) !important; display: flex; flex-direction: row; div:nth-child(1), div:nth-child(3), div:nth-child(4) { flex: 1; svg { font-s<div style="color:transparent">本文来源gaodai.ma#com搞##代!^码@网*</div>ize: 1.5rem; margin-top: 0.9rem; } } div:nth-child(2) { flex: 5; input { width: 100%; height: 2.5rem; outline: none; padding-left: 0.5rem; box-sizing: border-box; height: 2.5rem; margin-top: 0.5rem; border-style: none; font-size: 0.9rem; border-radius: 4px; background-color: #fff; color: #000; } } } }
ChatMsg.vue：
<div id="chatmsg"> <!-- 动态创建 --><div> <div class="user"> <div> <div class="bubble"> <span>{{item.word}}</span></div></div></div><div class="touser"> <div> <div class="tobubble"> <span>{{item.word}}</span></div></div></div></div></div> #chatmsg { position: relative; top: 3.5rem; width: 100%; min-height: 44rem; background-color: rgb(238, 212, 238); margin-bottom: 3.5rem; overflow-x: hidden; overflow-y: auto; .user { position: relative; width: 100%; overflow: hidden; margin: 0.8rem 0; img { object-fit: cover; width: 3rem; height: 3rem; border-radius: 3px; float: right; margin-right: 1rem; } .bubble { position: relative; float: right; margin-right: 1rem; padding: 0.8rem; box-sizing: border-box; border-radius: 3px; max-width: 65%; background-color: rgb(116, 228, 116); span { height: 1.25rem; line-height: 1.25rem; } } .bubble::after { position: absolute; right: -1.3rem; top: 0.8rem; content: ""; width: 0; height: 0; border: 0.7rem solid; border-color: transparent transparent transparent rgb(116, 228, 116); } } .touser { position: relative; width: 100%; overflow: hidden; margin: 0.8rem 0; img { object-fit: cover; width: 3rem; height: 3rem; border-radius: 3px; float: left; margin-left: 1rem; } .tobubble { position: relative; float: left; margin-left: 1rem; padding: 0 0.7rem; box-sizing: border-box; border-radius: 3px; max-width: 65%; background-color: rgb(116, 228, 116); line-height: 3rem; } .tobubble::after { position: absolute; left: -1.3rem; top: 0.8rem; content: ""; width: 0; height: 0; border: 0.7rem solid; border-color: transparent rgb(116, 228, 116) transparent transparent; } } }
3.目录结构
以上就是Vue实现聊天界面的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue实现聊天界面
转载请注明原文链接：Vue实现聊天界面
