vue3-chat-scroll-next
Version:
Automatic, yet conditional, scroll-to-bottom directive for Vue.js 3.0
59 lines (53 loc) • 1.8 kB
HTML
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>vue-chat-scroll</title>
<!-- Stylesheet -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.js"></script>
<!-- Vue-Chat-Scroll-->
<script src="https://cdn.jsdelivr.net/npm/vue-chat-scroll/dist/vue-chat-scroll.js"></script>
<style>
li {
background-color: #ffffff;
border: 1px solid black;
list-style: none;
padding: .75rem;
margin: 10px 0 10px 0;
}
</style>
</head>
<body>
<div class="flex h-screen flex-col justify-center items-center h-screen w-screen" id="app">
<ul v-chat-scroll class="w-1/2 bg-grey-lightest border border-grey m-0 px-8 py-4 overflow-x-auto" style="height: 50vh;">
<li v-for="message in messages">{{ message }}</li>
</ul>
<input v-model="message" class="mt-2 w-1/2 px-3 py-2 border border-grey" type="text" placeholder="Type your message" @keydown.enter="send"/>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: "",
messages: []
},
mounted: function() {
const self = this
for (let i = 0 ; i < 15 ; i++)
axios.get('https://baconipsum.com/api/?type=meat-and-filler&sentences=1&start-with-lorem=1').then(function (response) {
response.data.forEach(e => self.messages.push(e))
})
},
methods: {
send: function() {
this.messages.push(this.message)
this.message = ""
}
}
})
</script>
</body>
</html>