文档细节优化，search、咯阿丁和dialog组件样式修复 (#5)

* fix: loading small style, search style and dialog style

* fix: scroll to top

* fix mobile scroll

* fix scroll to top

docs/examples-dist/button.vue

@@ -23,18 +23,12 @@
   <van-col span="24">
     <van-button size="large">large</van-button>
   </van-col>
-</van-row>
-<van-row>
   <van-col span="24">
     <van-button size="normal">normal</van-button>
   </van-col>
-</van-row>
-<van-row>
   <van-col span="24">
     <van-button size="small">small</van-button>
   </van-col>
-</van-row>
-<van-row>
   <van-col span="24">
     <van-button size="mini">mini</van-button>
   </van-col>
@@ -82,9 +76,14 @@
     }
     .van-row {
       padding: 0 15px;
+      margin-bottom: 20px;
     }
-    .van-col {
-      margin-bottom: 10px;
+    .van-col-24 {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
   }
 }

docs/examples-dist/loading.vue

@@ -6,6 +6,8 @@
   <van-loading class="some-customized-class" :color="'white'"></van-loading>
 </div>
 
+
+
               </example-block><example-block title="单色spinner">
                 <van-loading class="circle-loading" :type="'circle'" :color="'white'"></van-loading>
 <van-loading class="circle-loading" :type="'circle'" :color="'black'"></van-loading>
@@ -23,10 +25,10 @@
     }
 
     .demo-loading__example--with-bg {
-      background-color: rgba(0, 0, 0, 0.5);
+      background-color: rgba(17, 17, 17, 0.7);
       margin: 0 auto;
-      width: 80px;
-      padding: 25px 0;
+      width: 120px;
+      padding: 45px 0;
       border-radius: 10px;
     }
   }

docs/examples-dist/swipe.vue

@@ -1,7 +1,9 @@
 <template><section class="demo-swipe"><h1 class="demo-title">Swipe 轮播</h1><example-block title="基础用法">
                 <van-swipe>
   <van-swipe-item v-for="img in images">
-    <img v-lazy="img" alt="">
+    <a href="https://youzan.com" target="_blank">
+      <img v-lazy="img" alt="">
+    </a>
   </van-swipe-item>
 </van-swipe>
 

docs/examples-dist/waterfall.vue

@@ -19,6 +19,7 @@
   .waterfall-item {
     line-height: 50px;
     border-bottom: 1px solid #e5e5e5;
+    background: #fff;
   }
   .page-desc {
     padding: 5px 0;

docs/examples-docs/button.md

@@ -7,9 +7,14 @@
     }
     .van-row {
       padding: 0 15px;
+      margin-bottom: 20px;
     }
-    .van-col {
-      margin-bottom: 10px;
+    .van-col-24 {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
   }
 }
@@ -93,18 +98,12 @@ export default {
   <van-col span="24">
     <van-button size="large">large</van-button>
   </van-col>
-</van-row>
-<van-row>
   <van-col span="24">
     <van-button size="normal">normal</van-button>
   </van-col>
-</van-row>
-<van-row>
   <van-col span="24">
     <van-button size="small">small</van-button>
   </van-col>
-</van-row>
-<van-row>
   <van-col span="24">
     <van-button size="mini">mini</van-button>
   </van-col>

docs/examples-docs/loading.md

@@ -10,10 +10,10 @@
     }
 
     .demo-loading__example--with-bg {
-      background-color: rgba(0, 0, 0, 0.5);
+      background-color: rgba(17, 17, 17, 0.7);
       margin: 0 auto;
-      width: 80px;
-      padding: 25px 0;
+      width: 120px;
+      padding: 45px 0;
       border-radius: 10px;
     }
   }
@@ -69,6 +69,15 @@ export default {
 <div class="demo-loading__example demo-loading__example--with-bg">
   <van-loading class="some-customized-class" :color="'white'"></van-loading>
 </div>
+
+<style>
+.demo-loading__example--with-bg {
+  background-color: rgba(17, 17, 17, 0.7);
+  width: 120px;
+  padding: 45px 0;
+  border-radius: 10px;
+}
+</style>
 ```
 :::
 

docs/examples-docs/swipe.md

@@ -77,7 +77,9 @@ export default {
 ```html
 <van-swipe>
   <van-swipe-item v-for="img in images">
-    <img v-lazy="img" alt="">
+    <a href="https://youzan.com" target="_blank">
+      <img v-lazy="img" alt="">
+    </a>
   </van-swipe-item>
 </van-swipe>
 

docs/examples-docs/waterfall.md

@@ -74,6 +74,7 @@ export default {
   .waterfall-item {
     line-height: 50px;
     border-bottom: 1px solid #e5e5e5;
+    background: #fff;
   }
   .page-desc {
     padding: 5px 0;

docs/src/ExamplesApp.vue

@@ -123,7 +123,8 @@ export default {
     font-size: 14px;
     font-weight: normal;
     color: #999;
-    padding: 30px 15px 10px;
+    padding: 0 15px;
+    margin: 30px 0 10px;
   }
 
   .footer {

docs/src/components/demo-list.vue

@@ -5,7 +5,7 @@
     <div class="mobile-navs">
       <template v-for="item in data">
         <div class="mobile-nav-item" v-if="item.showInMobile">
-          <mobile-nav v-for="group in item.groups"  :group="group" :base="base"></mobile-nav>
+          <mobile-nav v-for="(group, index) in item.groups" :group="group" :base="base" :nav-key="index"></mobile-nav>
         </div>
       </template>
     </div>

docs/src/components/mobile-computed.js

@@ -7,11 +7,7 @@ export default {
 
   computed: {
     mobileUrl() {
-      if (process.env.NODE_ENV === 'production') {
-        return '/zanui/vue/examples#' + location.pathname.slice(10);
-      } else {
-        return '/examples.html#' + location.pathname;
-      }
+      return '/zanui/vue/examples' + location.pathname.slice(10);
     }
   },
 

docs/src/components/mobile-nav.vue

@@ -5,7 +5,7 @@
       :class="{
         'mobile-nav-group__title--open': isOpen
       }"
-      @click="isOpen = !isOpen">
+      @click="handleNavTitleClick">
       {{group.groupName}}
     </div>
     <div class="mobile-nav-group__list-wrapper" :class="{ 'mobile-nav-group__list-wrapper--open': isOpen }">
@@ -38,13 +38,25 @@ export default {
         return [];
       }
     },
-    base: String
+    base: String,
+    navKey: [String, Number]
   },
 
   data() {
     return {
       isOpen: false
     };
+  },
+
+  mounted() {
+    this.isOpen = JSON.parse(sessionStorage.getItem('mobile-nav-' + this.navKey));
+  },
+
+  methods: {
+    handleNavTitleClick() {
+      this.isOpen = !this.isOpen;
+      sessionStorage.setItem('mobile-nav-' + this.navKey, this.isOpen);
+    }
   }
 };
 </script>

docs/src/examples.js

@@ -15,24 +15,18 @@ Vue.use(ZanUI.Lazyload, {
 });
 Vue.use(VueRouter);
 
-const isProduction = process.env.NODE_ENV === 'production';
 const routesConfig = routes(navConfig, true);
 routesConfig.push({
   path: '/',
   component: DemoList.default || DemoList
 });
 const router = new VueRouter({
-  mode: 'hash',
-  base: isProduction ? '/zanui/vue/' : __dirname,
+  mode: 'history',
+  base: '/zanui/vue/examples',
   routes: routesConfig
 });
-
-router.beforeEach((route, redirect, next) => {
-  if (route.path !== '/') {
-    window.scrollTo(0, 0);
-  }
-  document.title = route.meta.title || document.title;
-  next();
+router.afterEach((route, redirect, next) => {
+  document.querySelector('.examples-container').scrollTop = 0;
 });
 
 new Vue({ // eslint-disable-line

docs/src/index.js

@@ -6,7 +6,6 @@ import routes from './router.config';
 import ZanUI from 'src/index.js';
 import packageJson from '../../package.json';
 
-const isProduction = process.env.NODE_ENV === 'production';
 const global = {
   version: packageJson.version
 };
@@ -35,7 +34,7 @@ routesConfig.push({
 
 const router = new VueRouter({
   mode: 'history',
-  base: isProduction ? '/zanui/vue/' : __dirname,
+  base: '/zanui/vue/',
   routes: routesConfig
 });
 
@@ -44,7 +43,7 @@ router.beforeEach((route, redirect, next) => {
     window.scrollTo(0, 0);
   }
 
-  const pathname = isProduction ? '/vue/examples' : '/examples.html';
+  const pathname = '/zanui/vue/examples';
   if (isMobile()) {
     window.location.replace(pathname);
     return;