forked from theomessin/vue-chat-scroll
-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
59 lines (54 loc) · 1.83 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE 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@2.5.0/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- New Version then Old Version-->
<!-- <script src="https://rawgit.com/theomessin/vue-chat-scroll/8f654fd7acd88f0647ee904a8516d795762a71d7/dist/vue-chat-scroll.js"></script> -->
<script src="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
axios.get('http://faker.hook.io/?property=lorem.sentence').then(function (response) {
for (let i = 0 ; i < 500 ; i++)
self.messages.push(response.data)
})
},
methods: {
send: function() {
this.messages.push(this.message)
this.message = ""
}
}
})
</script>
</body>
</html>