Vue实现聊天界面

本文实例为大家分享了Vue实现聊天界面展示的具体代码，供大家参考，具体内容如下

1.功能需求

根据索引选择跟不同的人进行聊天

2.代码展示

mock.js：

import Mock from 'mockjs'
Mock.mock("/chatchild",{
    'result':[
        {
            id:"001",
            imgurl:"/static/image/10.jpg",
            name:"XKDK",
            date:"09:23",
            words:"哈哈，好哒"
        },
        // ... ...
    ]
});
export default Mock

userinfo.js：

let usermsg={
    id:"122",
    imgurl:"/static/image/8.jpg",
    words:"是的！",
    data:{
        id:"1529",
        imgurl:"/static/image/7.jpg",
        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：

父组件使用子组件里的属性和方法：
在父组件中的子组件上定义ref属性，通过 this.$ refs.name.属性或this.$refs.name.方法

ChatChild.vue：

ChatDetail.vue：

ChatMsg.vue：

3.目录结构

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