<template> | |
<div class="chat"> | |
<transition-group enter-active-class="fadeIn"> | |
<div v-for="(msg, index) in messages" :key="index" class="messages"> | |
<div :class="index % 2 === 0 ? 'message2' : 'message1'"> | |
<div :class="index % 2 === 0 ? 'msg2' : 'msg1'">{{ msg }}</div> | |
</div> | |
</div> | |
</transition-group> | |
<textarea v-model.trim="message" @keyup.enter="send" cols="30" rows="3"></textarea> | |
<button @click="send">Send</button> | |
</div> | |
</template> | |
<script> | |
export default { | |
name: "ChatRoom", | |
data() { | |
return { | |
message: "", | |
messages: [] | |
}; | |
}, | |
methods: { | |
send() { | |
this.messages.push(this.message); | |
this.message = ""; | |
} | |
} | |
}; | |
</script> | |
<style scoped> | |
.chat { | |
display: flex; | |
flex-direction: column; | |
max-width: 300px; | |
width: 300px; | |
} | |
.message1 { | |
display: flex; | |
justify-content: flex-start; | |
} | |
.message2 { | |
display: flex; | |
justify-content: flex-end; | |
} | |
.msg1 { | |
padding: 5px; | |
margin: 5px 0 5px 0; | |
background-color: crimson; | |
border-radius: 5px; | |
font-size: smaller; | |
color: white; | |
max-width: 80%; | |
} | |
.msg2 { | |
padding: 5px; | |
margin: 5px 0 5px 0; | |
background-color: deepskyblue; | |
border-radius: 5px; | |
font-size: smaller; | |
color: white; | |
max-width: 80%; | |
} | |
.fadeIn { | |
animation-duration: 1s; | |
animation-fill-mode: both; | |
animation-name: fadeIn; | |
} | |
@keyframes fadeIn { | |
from { | |
opacity: 0; | |
} | |
to { | |
opacity: 1; | |
} | |
} | |
</style> |
This comment has been minimized.
This comment has been minimized.
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
messages: [],
},
mutations: {
SEND_MESSAGE(state, message) {
state.messages.push(message);
},
},
actions: {
sendMessage({ commit }, message) {
commit('SEND_MESSAGE', message);
},
},
getters: {
messages: state => state.messages
},
}); |
This comment has been minimized.
This comment has been minimized.
<template>
<div id="app">
<div id="nav">
<router-link to="/">Chat Room</router-link>
</div>
<router-view/>
</div>
</template>
<style lang="scss">
html, body {
height : 100%;
}
#app {
height : 100%;
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
}
</style>
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.