[Doc] support image preview

docs/src/Preview.vue

@@ -7,14 +7,49 @@
 <script>
 const PREFIX = 'https://img.yzcdn.cn/vant-weapp/';
 const MAP = {
-  index: 'index-201808090730.png'
+  index: 'index-201808090730.png',
+  actionsheet: 'actionsheet-201808092138.jpeg',
+  badge: 'badge-201808092138.png',
+  button: 'button-201808092138.png',
+  card: 'card-201808092138.png',
+  field: 'field-201808092138.png',
+  cell: 'cell-201808092138.png',
+  icon: 'icon-201808092138.png',
+  col: 'layout-201808092138.png',
+  loading: 'loading-201808092138.png',
+  'notice-bar': 'notice-bar-201808092138.png',
+  popup: 'popup-201808092138.png',
+  panel: 'panel-201808092138.png',
+  stepper: 'stepper-201808092138.png',
+  search: 'search-201808092138.png',
+  steps: 'steps-201808092138.png',
+  switch: 'switch-201808092138.png',
+  tag: 'tag-201808092138.png',
+  'tree-select': 'tree-select-201808092138.png'
 };
 
 export default {
+  data() {
+    return {
+      currentPage: null
+    };
+  },
+
   computed: {
     image() {
-      return PREFIX + MAP.index;
+      if (this.currentPage === null) {
+        return '';
+      }
+      return PREFIX + (MAP[this.currentPage] || MAP.index);
     }
+  },
+
+  created() {
+    window.switchImage = path => {
+      path = path.replace('/', '');
+      this.currentPage = path;
+      console.log('currentPage', this.currentPage);
+    };
   }
 };
 </script>
@@ -25,7 +60,8 @@ body {
   color: #333;
   line-height: 1;
   background-color: #f8f8f8;
-  font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif;
+  font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei',
+    Tohoma, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
 }
 

docs/src/index.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router';
 import App from './App';
 import routes from './router';
 import VantDoc, { progress } from 'vant-doc';
+import { syncPath } from './utils';
 
 Vue.use(VueRouter).use(VantDoc);
 
@@ -20,6 +21,7 @@ router.beforeEach((route, redirect, next) => {
 router.afterEach(() => {
   progress.done();
   window.scrollTo(0, 0);
+  syncPath(router.history.current.path);
 });
 
 window.vueRouter = router;

docs/src/utils.js

@@ -0,0 +1,32 @@
+function iframeReady(iframe, callback) {
+  const doc = iframe.contentDocument || iframe.contentWindow.document;
+  const interval = () => {
+    if (iframe.contentWindow.switchImage) {
+      callback();
+    } else {
+      setTimeout(() => {
+        interval();
+      }, 50);
+    }
+  };
+
+  if (doc.readyState === 'complete') {
+    interval();
+  } else {
+    iframe.onload = interval;
+  }
+}
+
+function syncPath(path) {
+  const iframe = document.querySelector('iframe');
+  console.log(iframe);
+  iframeReady(iframe, () => {
+    console.log('ready');
+    iframe.contentWindow.switchImage(path);
+  });
+}
+
+export {
+  syncPath,
+  iframeReady
+};

packages/tree-select/index.wxml

@@ -27,7 +27,7 @@
       {{ item.text }}
       <van-icon
         wx:if="{{ activeId === item.id }}"
-        type="success"
+        name="success"
         class="tree-select__selected"
       ></van-icon>
     </view>