feat(demo): test chat

Author: Guillaume Chau

docs-src/src/App.vue

@@ -8,6 +8,7 @@
       <router-link :to="{ name: 'home' }" exact>Home</router-link>
       <router-link :to="{ name: 'recycle' }">Recycle scroller demo</router-link>
       <router-link :to="{ name: 'dynamic' }">Dynamic scroller demo</router-link>
+      <router-link :to="{ name: 'test-chat' }">Chat demo</router-link>
     </nav>
     <router-view class="page"/>
   </div>

docs-src/src/components/TestChat.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="hello">
+    <div>
+      <button @click="addItems()">
+        Add item
+      </button>
+      <button @click="addItems(5)">
+        Add 5 items
+      </button>
+      <button @click="addItems(10)">
+        Add 10 items
+      </button>
+    </div>
+
+    <DynamicScroller
+      ref="scroller"
+      :items="items"
+      :min-item-height="24"
+      class="scroller"
+      @resize="scrollToBottom()"
+    >
+      <DynamicScrollerItem
+        slot-scope="{ item, index, active }"
+        :item="item"
+        :active="active"
+        :data-index="index"
+      >
+        <div
+          class="message"
+          :style="{
+            height: `${item.size}px`,
+          }"
+        >
+          {{ item.text }}
+        </div>
+      </DynamicScrollerItem>
+    </DynamicScroller>
+  </div>
+</template>
+
+<script>
+import faker from 'faker'
+
+export default {
+  name: 'TestChat',
+
+  data () {
+    return {
+      items: [],
+    }
+  },
+
+  methods: {
+    addItems (count = 1) {
+      for (let i = 0; i < count; i++) {
+        this.items.push({
+          text: faker.lorem.sentence(),
+          id: this.items.length + 1,
+          size: Math.random() * 120 + 40,
+        })
+      }
+      this.scrollToBottom()
+    },
+
+    scrollToBottom () {
+      this.$refs.scroller.scrollToBottom()
+    },
+  },
+}
+</script>
+
+<style scoped>
+h1,
+h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+
+.scroller {
+  height: 500px;
+  border: 2px solid #ddd;
+}
+
+.message {
+  padding: 10px 10px 9px;
+  border-bottom: solid 1px #eee;
+}
+</style>

docs-src/src/router.js

@@ -4,6 +4,7 @@ import VueRouter from 'vue-router'
 import Home from './components/Home.vue'
 import Recycle from './components/RecycleScrollerDemo.vue'
 import Dynamic from './components/DynamicScrollerDemo.vue'
+import TestChat from './components/TestChat.vue'
 
 Vue.use(VueRouter)
 
@@ -12,5 +13,6 @@ export default new VueRouter({
     { path: '/', name: 'home', component: Home },
     { path: '/recycle', name: 'recycle', component: Recycle },
     { path: '/dynamic', name: 'dynamic', component: Dynamic },
+    { path: '/test-chat', name: 'test-chat', component: TestChat },
   ],
 })