[Doc] enhance demo preview (#967)

docs/src/App.vue

@@ -1,5 +1,9 @@
 <template>
-  <van-doc :config="config" simulator="./preview.html" active="小程序组件">
+  <van-doc
+    active="小程序组件"
+    :config="config"
+    :simulator="simulator"
+  >
     <router-view />
   </van-doc>
 </template>
@@ -7,10 +11,37 @@
 <script>
 import docConfig from './doc.config';
 
+const UNSHARED = [
+  'common',
+  'quickstart',
+  'changelog',
+  'intro',
+  'transition',
+  'col'
+];
+
+const MAPPER = {
+  'action-sheet': 'actionsheet'
+};
+
 export default {
   computed: {
     config() {
       return docConfig;
+    },
+
+    simulator() {
+      let { path } = this.$route.meta;
+
+      if (!UNSHARED.includes(path)) {
+        if (MAPPER[path]) {
+          path = MAPPER[path];
+        }
+
+        return `https://youzan.github.io/vant/mobile.html?hide_nav=1#/zh-CN/${path}`;
+      }
+
+      return `./preview.html#${path}`;
     }
   }
 };

docs/src/Preview.vue

@@ -14,66 +14,16 @@
 const PREFIX = 'https://img.yzcdn.cn/vant-weapp/';
 const MAP = {
   index: 'index-201808121630.png',
-  'action-sheet': 'action-sheet-201809071648.png',
-  area: 'area-20181015.png',
-  badge: 'badge-201808092138.png',
-  button: 'button-20181015.png',
-  card: 'card-201808092138.png',
   col: 'layout-201808092138.png',
-  cell: 'cell-20181114.jpeg',
+  transition: 'transition-20180821.png'
-  dialog: 'dialog-201809071648.png',
-  'datetime-picker': 'datetime-picker-201811102.png',
-  field: 'field-201808092138.png',
-  'goods-action': 'goods-action-20181015.png',
-  icon: 'icon-201808092138.png',
-  loading: 'loading-201808092138.png',
-  'nav-bar': 'nav-bar-201808110751.png',
-  'notice-bar': 'notice-bar-20181015.png',
-  notify: 'notify-201808112050.png',
-  panel: 'panel-201808092138.png',
-  popup: 'popup-201808092138.png',
-  progress: 'progress-201808232055.png',
-  radio: 'radio-20181110.jpeg',
-  slider: 'slider-201808221024.png',
-  stepper: 'stepper-201808092138.png',
-  search: 'search-201808092138.png',
-  steps: 'steps-20181015.png',
-  switch: 'switch-20181110.jpeg',
-  'switch-cell': 'switch-cell-201808221124.png',
-  'swipe-cell': 'swipe-cell-20181110.jpeg',
-  'submit-bar': 'submit-bar-a-201809271357.png',
-  tab: 'tab-20181015.png',
-  tag: 'tag-20181019.jpeg',
-  tabbar: 'tabbar-201808160922.png',
-  toast: 'toast-201808191046.png',
-  transition: 'transition-20180821.png',
-  'tree-select': 'tree-select-201808092138.png',
-  checkbox: 'checkbox-20181110.jpeg',
-  rate: 'rate-20181120-1.png',
-  collapse: 'collapse-20181123.png'
 };
 
 export default {
-  data() {
-    return {
-      currentPage: null
-    };
-  },
-
   computed: {
     image() {
-      if (this.currentPage === null) {
+      const hash = location.hash.slice(1);
-        return '';
+      return PREFIX + (MAP[hash] || MAP.index);
-      }
-      return PREFIX + (MAP[this.currentPage] || MAP.index);
     }
-  },
-
-  created() {
-    window.switchImage = path => {
-      path = path.replace('/', '');
-      this.currentPage = path;
-    };
   }
 };
 </script>

docs/src/index.js

@@ -20,7 +20,6 @@ router.beforeEach((route, redirect, next) => {
 router.afterEach(() => {
   progress.done();
   window.scrollTo(0, 0);
-  syncPath(router.history.current.path);
 });
 
 Vue.config.productionTip = false;