add version switch dropdown

build/cooking.demo.js

@@ -1,6 +1,7 @@
 var cooking = require('cooking');
 var config = require('./config');
 var md = require('markdown-it')();
+var CopyWebpackPlugin = require('copy-webpack-plugin');
 var striptags = require('./strip-tags');
 var slugify = require('transliteration').slugify;
 var isProd = process.env.NODE_ENV === 'production';
@@ -113,5 +114,8 @@ if (isProd) {
   cooking.add('externals.vue-router', 'VueRouter');
 }
 
+cooking.add('plugin.CopyWebpackPlugin', new CopyWebpackPlugin([
+  { from: 'examples/versions.json' }
+]));
 cooking.add('vue.preserveWhitespace', false);
 module.exports = cooking.resolve();

examples/components/side-nav.vue

@@ -12,6 +12,41 @@
       margin: 0;
       overflow: hidden;
     }
+    
+    .nav-dropdown {
+      margin-bottom: 6px;
+      width: 100%;
+      span {
+        display: block;
+        width: 100%;
+        font-size: 16px;
+        color: #5e6d82;
+        line-height: 40px;
+        transition: .2s;
+        border-bottom: 1px solid #eaeefb;
+        &:hover {
+          cursor: pointer;
+        }
+      }
+      i {
+        transition: .2s;
+        font-size: 12px;
+        color: #d3dce6;
+      }
+      @when active {
+        span, i {
+          color: #20a0ff;
+        }
+        i {
+          transform: rotateZ(180deg) translateY(2px);
+        }
+      }
+      &:hover {
+        span, i {
+          color: #20a0ff;
+        }
+      }
+    }
 
     .nav-item {
       a {
@@ -53,9 +88,37 @@
       margin-top: 10px;
     }
   }
+  .nav-dropdown-list {
+    width: 120px;
+    margin-top: -8px;
+    li {
+      font-size: 14px;
+    }
+  }
 </style>
 <template>
   <div class="side-nav" :style="navStyle">
+    <el-dropdown
+      v-show="isComponentPage"
+      trigger="click"
+      class="nav-dropdown"
+      :class="{ 'is-active': dropdownVisible }">
+      <span>
+        {{ langConfig.dropdown }}{{ version }}
+        <i class="el-icon-caret-bottom el-icon--right"></i>
+      </span>
+      <el-dropdown-menu
+        slot="dropdown"
+        :offset="-80"
+        class="nav-dropdown-list"
+        @input="handleDropdownToggle">
+        <el-dropdown-item
+          v-for="item in Object.keys(versions)"
+          @click.native="switchVersion(item)">
+          {{ item }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <ul>
       <li class="nav-item" v-for="item in data">
         <a v-if="!item.path" @click="expandMenu">{{item.name}}</a>
@@ -99,6 +162,8 @@
   </div>
 </template>
 <script>
+  import compoLang from '../i18n/component.json';
+
   export default {
     props: {
       data: Array,
@@ -111,7 +176,10 @@
       return {
         highlights: [],
         navState: [],
-        isSmallScreen: false
+        isSmallScreen: false,
+        versions: [],
+        version: '',
+        dropdownVisible: false
       };
     },
     watch: {
@@ -122,9 +190,19 @@
     computed: {
       navStyle() {
         return this.isSmallScreen ? { 'padding-bottom': '60px' } : {};
+      },
+      isComponentPage() {
+        return /^component-/.test(this.$route.name);
+      },
+      langConfig() {
+        return compoLang.filter(config => config.lang === this.$route.meta.lang)[0]['nav'];
       }
     },
     methods: {
+      switchVersion(version) {
+        if (version === this.version) return;
+        location.href = `${ location.origin }/${ this.versions[version] }/${ location.hash } `;
+      },
       handleResize() {
         this.isSmallScreen = document.documentElement.clientWidth < 768;
         this.handlePathChange();
@@ -160,8 +238,28 @@
         if (!target.nextElementSibling || target.nextElementSibling.tagName !== 'UL') return;
         this.hideAllMenu();
         event.currentTarget.nextElementSibling.style.height = 'auto';
+      },
+      handleDropdownToggle(visible) {
+        this.dropdownVisible = visible;
       }
     },
+    created() {
+      const xhr = new XMLHttpRequest();
+      xhr.onreadystatechange = _ => {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+          this.versions = JSON.parse(xhr.responseText);
+          const pathname = location.pathname.replace(/\//, '');
+          if (pathname.length > 0) {
+            this.version = pathname;
+          } else {
+            const versionArr = Object.keys(this.versions);
+            this.version = versionArr[versionArr.length - 1];
+          }
+        }
+      };
+      xhr.open('GET', '/versions.json');
+      xhr.send();
+    },
     mounted() {
       this.handleResize();
       window.addEventListener('resize', this.handleResize);

examples/i18n/component.json

@@ -16,6 +16,9 @@
       "guide": "指南",
       "components": "组件",
       "resource": "资源"
+    },
+    "nav": {
+      "dropdown": "版本："
     }
   },
   {
@@ -35,6 +38,9 @@
       "guide": "Guide",
       "components": "Component",
       "resource": "Resource"
+    },
+    "nav": {
+      "dropdown": "Version: "
     }
   }
 ]

examples/versions.json

@@ -0,0 +1,3 @@
+{
+  "1.0.9": "1.0"
+}

package.json

@@ -65,6 +65,7 @@
     "cooking": "^1.2.0",
     "cooking-lint": "^0.1.3",
     "cooking-vue2": "^0.1.4",
+    "copy-webpack-plugin": "^4.0.1",
     "coveralls": "^2.11.14",
     "cp-cli": "^1.0.2",
     "cross-env": "^3.1.3",