component side-nav

examples/app.vue

@@ -270,115 +270,81 @@
 
 <template>
   <div id="app">
-    <div class="pure-g">
-      <div class="pure-u-1-6 app__sidebar pure-menu pure-menu-scrollable app__menu">
-        <template v-for="(nav, key) in navs">
-          <a
-            href="#"
-            @click.prevent="navState.$set(key, !navState[key] || false)"
-            class="pure-menu-heading app__menu__label"
-            :class="{ 'unfold': !navState[key] }"
-            v-text="nav.group"></a>
-          <ul
-            class="pure-menu-list"
-            transition="slidedown"
-            v-show="!navState[key]"
-            :style="{
-              maxHeight: nav.list.length * 44 + 'px'
-            }">
-            <li
-              class="pure-menu-item app__menu__item"
-              v-for="item in nav.list"
-              v-if="!item.disabled">
-              <router-link
-                class="pure-menu-link app__menu__link"
-                active-class="active"
-                :to="'/component' + item.path"
-                exact
-                v-text="item.name"></router-link>
-            </li>
-          </ul>
-        </template>
-
-      </div>
-      <div class="pure-u-5-6 app__content">
-        <header class="app__header">
-          <h1 class="app__headline">{{ $route.meta.title || 'element 后台组件' }}</h1>
-        </header>
-        <section class="app__main" ref="main">
-          <p class="app__description">{{ $route.meta.description }}</p>
-          <router-view></router-view>
-        </section>
-      </div>
-    </div>
+    <main-header></main-header>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-  import { navs } from './route.config';
-  import E from 'oui-dom-events';
-  import { toggleClass, addClass, removeClass } from './dom/class';
+  // import { navs } from './route.config';
+  // import E from 'oui-dom-events';
+  // import { toggleClass, addClass, removeClass } from './dom/class';
+  import MainHeader from './components/header';
 
   export default {
     name: 'app',
 
-    data() {
-      return {
-        highlights: [],
-        navState: []
-      };
-    },
-
-    methods: {
-      findAllHighlight() {
-        return Array.prototype.slice.call(document.querySelectorAll('.hljs'));
-      }
-    },
-
-    created() {
-      this.navs = navs;
-    },
-
-    mounted() {
-      this.mainContent = document.querySelector('.app__content');
-
-      E.delegate(this.$refs.main, '.hljs__button', 'click.highlight', e => {
-        const parent = e.target.parentNode;
-
-        toggleClass(parent, 'open');
-      });
-    },
-
-    beforeDestroy() {
-      E.undelegate(this.$refs.main, '.hljs', 'click.highlight');
-    },
-
-    watch: {
-      highlights(list) {
-        list.map(item => {
-          if (item.offsetHeight <= 100) {
-            toggleClass(item, 'open');
-          } else {
-            item.appendChild(this.$els.button.cloneNode(true));
-          }
-        });
-      }
-    },
-
-    events: {
-      ['element.example.reload']() {
-        this.$nextTick(() => {
-          if (this.mainContent.querySelector('.no-toc')) {
-            addClass(this.mainContent, 'no-toc');
-          } else {
-            removeClass(this.mainContent, 'no-toc');
-          }
-
-          this.highlights = this.findAllHighlight();
-        });
-        this.mainContent.scrollTop = 0;
-        return true;
-      }
+    components: {
+      MainHeader
     }
+
+    // data() {
+    //   return {
+    //     highlights: [],
+    //     navState: []
+    //   };
+    // },
+
+    // methods: {
+    //   findAllHighlight() {
+    //     return Array.prototype.slice.call(document.querySelectorAll('.hljs'));
+    //   }
+    // },
+
+    // created() {
+    //   this.navs = navs;
+    // },
+
+    // mounted() {
+    //   this.mainContent = document.querySelector('.app__content');
+
+    //   E.delegate(this.$refs.main, '.hljs__button', 'click.highlight', e => {
+    //     const parent = e.target.parentNode;
+
+    //     toggleClass(parent, 'open');
+    //   });
+    // },
+
+    // beforeDestroy() {
+    //   E.undelegate(this.$refs.main, '.hljs', 'click.highlight');
+    // },
+
+    // watch: {
+    //   highlights(list) {
+    //     list.map(item => {
+    //       if (item.offsetHeight <= 100) {
+    //         toggleClass(item, 'open');
+    //       } else {
+    //         item.appendChild(this.$els.button.cloneNode(true));
+    //       }
+    //     });
+    //   }
+    // },
+
+    // events: {
+    //   ['element.example.reload']() {
+    //     this.$nextTick(() => {
+    //       if (this.mainContent.querySelector('.no-toc')) {
+    //         addClass(this.mainContent, 'no-toc');
+    //       } else {
+    //         removeClass(this.mainContent, 'no-toc');
+    //       }
+
+    //       this.highlights = this.findAllHighlight();
+    //     });
+    //     this.mainContent.scrollTop = 0;
+    //     return true;
+    //   }
+    // }
   };
 </script>

examples/components/header.vue

@@ -3,12 +3,12 @@
     height: 80px;
     background-color: #20a0ff;
     color: #fff;
-    position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 1000;
     line-height: @height;
+    margin-bottom: 48px;
 
     .container {
       height: 100%;

examples/components/side-nav.vue

@@ -0,0 +1,52 @@
+<style>
+</style>
+<template>
+  <div class="side-nav">
+    <ul>
+      <li v-for="item in data">
+        <a href="">{{item.name}}</a>
+        
+      </li>
+    </ul>
+    <template v-for="(nav, key) in navs">
+      <a
+        href="#"
+        @click.prevent="navState.$set(key, !navState[key] || false)"
+        class="pure-menu-heading app__menu__label"
+        :class="{ 'unfold': !navState[key] }"
+        v-text="nav.group"></a>
+      <ul
+        class="pure-menu-list"
+        transition="slidedown"
+        v-show="!navState[key]"
+        :style="{
+          maxHeight: nav.list.length * 44 + 'px'
+        }">
+        <li
+          class="pure-menu-item app__menu__item"
+          v-for="item in nav.list"
+          v-if="!item.disabled">
+          <router-link
+            class="pure-menu-link app__menu__link"
+            active-class="active"
+            :to="'/component' + item.path"
+            exact
+            v-text="item.name"></router-link>
+        </li>
+      </ul>
+    </template>
+  </div>
+</template>
+<script>
+  export default {
+    props: {
+      data: Array
+    },
+    data() {
+      return {
+        highlights: [],
+        navState: []
+      };
+    }
+  };
+</script>

examples/entry.js

@@ -6,10 +6,14 @@ import Element from 'main/index.js';
 import 'packages/theme-default/src/index.css';
 import demoBlock from './components/demo-block.vue';
 
+import SideNav from './components/side-nav';
+
 Vue.use(Element);
 Vue.use(VueRouter);
 Vue.component('demo-block', demoBlock);
 
+Vue.component('side-nav', SideNav);
+
 const router = new VueRouter({
   base: __dirname,
   routes: configRouter

examples/pages/component.vue

@@ -1,3 +1,37 @@
 <template>
-  <router-view></router-view>
-</template>
+  <div class="container">
+    <el-col :span="5">
+      <side-nav :data="navsData"></side-nav>
+    </el-col>
+    <el-col :span="19">
+      <div class="content">
+        <router-view></router-view>
+      </div>
+    </el-col>
+  </div>
+</template>
+<script>
+  import { navs } from '../route.config';
+  export default {
+    data() {
+      return {
+        navsData: [{
+          name: '组件',
+          children: []
+        }, {
+          name: '安装指南',
+          children: [{
+            path: '/component/quickstart',
+            name: '快速上手'
+          }, {
+            path: '/component/dev',
+            name: '开发指南'
+          }]
+        }]
+      };
+    },
+    created() {
+      this.navsData[0].children = navs;
+    }
+  }
+</script>