refine doc

1、use vue-lazy-container lazy render demo

Author: huangshuwei

examples/package.json

@@ -20,6 +20,7 @@
     "nprogress": "^0.2.0",
     "regenerator-runtime": "^0.13.7",
     "theme-switcher-tool": "^1.0.3",
+    "vue-lazy-container": "^1.1.1",
     "vue-router": "^3.2.0",
     "vue-template-compiler": "^2.6.11"
   },

examples/src/comp/demo-block.vue

@@ -5,9 +5,18 @@
         @mouseenter="hovering = true"
         @mouseleave="hovering = false"
     >
-        <div class="source">
-            <slot name="source"></slot>
-        </div>
+        <vue-lazy-container
+            class="source-code-container"
+            tag-name="div"
+            @change="visibilityChange"
+        >
+            <div v-if="isDemoRendered" class="source">
+                <slot name="source"></slot>
+            </div>
+            <div v-else class="source-empty">
+                Loading...
+            </div>
+        </vue-lazy-container>
         <div v-if="$slots.default" class="description">
             <div class="title-container">
                 <span class="title"> {{ demoLangInfo.description }}</span>
@@ -89,7 +98,9 @@ export default {
             hovering: false,
             isExpanded: false,
             fixedControl: false,
-            scrollParent: null
+            scrollParent: null,
+            // 是否示例渲染完成
+            isDemoRendered: false
         };
     },
 
@@ -154,6 +165,16 @@ export default {
     },
 
     methods: {
+        // visibility change
+        visibilityChange(entry, observer, id) {
+            const { isIntersecting } = entry;
+
+            // visibility
+            if (isIntersecting) {
+                this.isDemoRendered = true;
+            }
+        },
+        // scroll handler
         scrollHandler() {
             const {
                 top,
@@ -237,8 +258,20 @@ export default {
         float: right;
     }
 
-    .source {
-        padding: 24px;
+    .source-code-container {
+        min-height: 250px;
+        .source {
+            padding: 24px;
+        }
+        .source-empty {
+            min-height: 250px;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #666;
+        }
     }
 
     .description {

examples/src/main.js

@@ -23,11 +23,16 @@ import Anchor from "@/comp/anchor.vue";
 Vue.component("demo-block", DemoBlock);
 Vue.component("anchor", Anchor);
 
+// 仅用作示例
 import { Switch, Row, Col } from "element-ui";
 Vue.use(Switch);
 Vue.use(Row);
 Vue.use(Col);
 
+// vue-lazy-container
+import VueLazyContainer from "vue-lazy-container";
+Vue.use(VueLazyContainer);
+
 // product
 /* import "../../libs/theme-default/index.css";
 import {

examples/yarn.lock

@@ -5802,6 +5802,11 @@ interpret@^1.2.0:
   resolved "https://registry.npm.taobao.org/interpret/download/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
   integrity sha1-Zlq4vE2iendKQFhOgS4+D6RbGh4=
 
+intersection-observer@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.12.0.tgz#6c84628f67ce8698e5f9ccf857d97718745837aa"
+  integrity sha512-2Vkz8z46Dv401zTWudDGwO7KiGHNDkMv417T5ItcNYfmvHR/1qCTVBO9vwH8zZmQ0WkA/1ARwpysR9bsnop4NQ==
+
 invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.npm.taobao.org/invariant/download/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -11023,6 +11028,13 @@ vue-jest@^3.0.5:
     tsconfig "^7.0.0"
     vue-template-es2015-compiler "^1.6.0"
 
+vue-lazy-container@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/vue-lazy-container/-/vue-lazy-container-1.1.1.tgz#40721df4f15e7967c17d4385ecf23433eeca594a"
+  integrity sha512-tpE0lafi+tPlVyzAvuouYI+dmZ3xbsSWMuRI0FhawVN5gAvwTjgBxNL7m/VsMZ4arfDGBa3NwR63aE36vz1qyA==
+  dependencies:
+    intersection-observer "^0.12.0"
+
 vue-loader@^15.9.2:
   version "15.9.7"
   resolved "https://registry.nlark.com/vue-loader/download/vue-loader-15.9.7.tgz#15b05775c3e0c38407679393c2ce6df673b01044"