[Doc] optimize document site (#1013)

docs/demos/common.js

@@ -3,31 +3,28 @@
  */
 
 import Vue from 'vue';
-import i18n from 'packages/mixins/i18n';
-import { Locale, Toast, Dialog } from 'packages';
-import { DemoBlock, DemoSection } from 'vant-doc';
-import { camelize } from 'packages/utils';
+import progress from 'nprogress';
+import i18n from '../../packages/mixins/i18n';
+import Vant, { Lazyload } from '../../packages';
+import VantDoc, { DemoBlock, DemoSection } from 'vant-doc';
+import VueRouter from 'vue-router';
+import { Locale, Toast, Dialog } from '../../packages';
+import { camelize } from '../../packages/utils';
 
-const demoBaseMixin = {
-  beforeCreate() {
-    const { name, i18n } = this.$options;
-    if (name && i18n) {
-      const formattedI18n = {};
-      const camelizedName = camelize(name);
-      Object.keys(i18n).forEach(key => {
-        formattedI18n[key] = { [camelizedName]: i18n[key] };
-      });
-      Locale.add(formattedI18n);
-    }
-  }
-};
+Vue
+  .use(Vant)
+  .use(VantDoc)
+  .use(VueRouter)
+  .use(Lazyload, {
+    lazyComponent: true
+  });
+
+Vue.component('demo-block', DemoBlock);
+Vue.component('demo-section', DemoSection);
 
 window.Toast = Toast;
 window.Dialog = Dialog;
 Vue.mixin(i18n);
-Vue.mixin(demoBaseMixin);
-Vue.component('demo-block', DemoBlock);
-Vue.component('demo-section', DemoSection);
 
 Locale.add({
   'zh-CN': {
@@ -85,3 +82,30 @@ Locale.add({
     passwordPlaceholder: 'Password'
   }
 });
+
+export function asyncWrapper(component) {
+  return function(r) {
+    progress.start();
+    component(r).then(() => {
+      progress.done();
+    }).catch(() => {
+      progress.done();
+    });
+  };
+}
+
+export function componentWrapper(component, name) {
+  component = component.default;
+  name = 'demo-' + name;
+  component.name = name;
+  const { i18n } = component;
+  if (i18n) {
+    const formattedI18n = {};
+    const camelizedName = camelize(name);
+    Object.keys(i18n).forEach(key => {
+      formattedI18n[key] = { [camelizedName]: i18n[key] };
+    });
+    Locale.add(formattedI18n);
+  }
+  return component;
+}