Update demos

Author: tangbc

demos/common/Corner.vue

@@ -0,0 +1,30 @@
+<template>
+<a v-bind:href="url" class="github-corner" aria-label="View source on GitHub">
+    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0; z-index: 1000;" aria-hidden="true">
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
+    </svg>
+</a>
+</template>
+
+<script>
+export default {
+    name: 'github-corner',
+
+    props: {
+        path: String
+    },
+
+    computed: {
+        url () {
+            return `https://github.com/tangbc/vue-virtual-scroll-list/tree/master/demos` + (this.path || '')
+        }
+    }
+}
+</script>
+
+
+<style>
+.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
+</style>

demos/common/Item.vue

@@ -3,12 +3,14 @@
     <div class="index">#{{ index }}</div>
     <div class="card">
         <div class="card-avatar">
-            <img class="card-avatar-img" v-bind:src="info.avatar" alt="AVATAR">
+            {{ info.name.substr(0, 2) }}
+            <!-- <img class="card-avatar-img" v-bind:src="info.avatar" alt="AVATAR"> -->
         </div>
         <div class="card-info">
             <div class="card-info-item name">Name: {{ info.name }}</div>
             <div class="card-info-item email">Email: {{ info.email }}</div>
         </div>
+        <div class="card-height">{{ this.height }}px</div>
     </div>
 </div>
 </template>
@@ -42,18 +44,29 @@ export default {
 .item {
     box-sizing: border-box;
     display: flex;
+    // &:hover {
+    //     .card-height {
+    //         visibility: visible;
+    //     }
+    // }
     .index {
         flex: 1;
         text-align: center;
     }
     .card {
+        position: relative;
         flex: 4;
         display: flex;
         align-items: center;
         border-bottom: 1px dashed #a9a9a9;
         &-avatar {
             width: 40px;
             height: 40px;
+            background: #ff6347;
+            border-radius: 50%;
+            text-align: center;
+            line-height: 40px;
+            color: #ffffff;
             &-img {
                 display: block;
                 width: 100%;
@@ -84,6 +97,13 @@ export default {
                 }
             }
         }
+        &-height {
+            // visibility: hidden;
+            position: absolute;
+            right: 30px;
+            font-style: italic;
+            color: #d8bfd8;
+        }
     }
 }
 </style>

demos/common/base.less renamed to demos/common/app.less

@@ -1,3 +1,7 @@
+* {
+    margin: 0;
+    padding: 0;
+}
 html,body {
     height: 100%;
     overflow: hidden;
@@ -6,6 +10,9 @@ html,body {
 }
 header {
     font-family: monospace;
+    h1 {
+        padding: 20px 0;
+    }
     p {
         font-size: 14px;
         background: #f7f7f7;
@@ -17,6 +24,7 @@ header {
 .app {
     height: 100%;
     position: relative;
+    z-index: 1;
 }
 .container {
     width: 520px;

demos/common/createApp.js

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import GithubCorner from '../common/Corner.vue'
+
+export default function (App) {
+    Vue.config.devtools = false
+    Vue.config.productionTip = false
+
+    Vue.component('GithubCorner', GithubCorner)
+
+    new Vue({
+        render: (h) => h(App)
+    }).$mount('#app')
+}

demos/frag-mode/App.vue

@@ -1,5 +1,6 @@
 <template>
 <div class="app">
+    <GithubCorner path="/frag-mode" />
     <div class="container">
         <header>
             <h1>frag-mode</h1>
@@ -9,7 +10,6 @@
             <virtual-list class="list"
                 :size="size"
                 :remain="remain"
-                :bench="bench"
             >
                 <item
                     v-for="item in items"
@@ -30,9 +30,8 @@ import VirtualList from 'vue-virtual-scroll-list'
 import { getRandomUser } from '../common/util'
 
 const remain = 6
-const bench = remain
 const itemSize = 80
-const itemCount = 1000 * 100
+const itemCount = 1000 * 10
 
 let itemList = []
 for (let idx = 0; idx < itemCount; idx++) {
@@ -53,28 +52,14 @@ export default {
 
     data () {
         return {
-            bench,
             remain,
             size: itemSize,
             items: itemList
         }
-    },
-
-    methods: {
-        getItemProps (itemIndex) {
-            const props = {
-                height: itemSize,
-                index: itemIndex,
-                ...getRandomUser()
-            }
-            return {
-                props
-            }
-        }
     }
 }
 </script>
 
 <style lang="less">
-@import '../common/base.less';
+@import '../common/app.less';
 </style>