Skip to content

Instantly share code, notes, and snippets.

@hd9 hd9/Vue-ChatRoom.js
Created Jan 24, 2019

Embed
What would you like to do?
A simple chatroom to demo how simple and elegant Vue.Js is
// Vue-ChatRoom.js: A simple chatroom to demo how simple and elegant Vue.Js is
// By: Bruno Hildenbrand
// Source: https://github.com/hd9/vue-chatroom
// blog post available at: blog.hildenco.com
const app = new Vue({
el: '#chat',
data: {
name: 'Bruno',
msg: '',
color: getRandomColor(),
messages: [
{ name: '[System Bot]', msg: initialMsg, tm: (new Date()).toLocaleTimeString() },
],
participants: [
// { name: 'Bruno', class: 'label label-success' },
]
},
methods: {
send(){
if (this.msg.length > 0){
this.messages.push({name: this.name, msg: this.msg, tm: (new Date()).toLocaleTimeString(), color: this.color})
this.msg = '';
this.scrollBottom();
}
},
quit() {
if (confirm('Are you sure you want to quit?')){
window.close();
}
},
scrollBottom(){
Vue.nextTick(function () {
var div = document.getElementById("chat-content");
div.scrollTop = div.scrollHeight;
});
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.