import Vue from 'vue'
import ChatRoom from 'oh-my-chat'
import 'oh-my-chat/dist/oh-my-chat.css'
Vue.component(ChatRoom.name, ChatRoom)
<template>
<ChatRoom
ref="room"
:avatar-component="avatarComp"
:message-components="messageComps"
:header-components="headerComps"
:footer-components="footerComps"
:widget-components="widgetComps"
/>
</template>
export default {
methods: {
handleAddBubble(type) {
const images = new Array(Math.floor(Math.random() * 9)).fill('')
images.forEach((item, index) => {
images[index] = faker.image.image()
})
this.$refs.room.addMessage({
type,
float: type === 'text-msg' ? 'left' : 'right',
id: Math.random().toString(10).substring(3, 6),
loading: type === 'loading-msg',
pending: type === 'pending-msg',
header: 'nickname',
footer: 'created-at',
data: {
content: this.randomContent(),
src: images,
created_at: faker.date.recent(),
user: {
id: Math.random().toString(10).substring(3, 6),
avatar: faker.image.avatar(),
nickname: faker.name.findName()
}
}
})
}
}
}
export default {
watch: {
next() {
this.next && this.next.then(this.handleNext)
}
},
methods: {
handleNext(data) {
this.users.push(data.user.nickname)
},
resolve() {
this.$emit('resolve')
}
}
}