Merge pull request #124 from baiyaaaaa/next

update docs

examples/docs/upload.md

@@ -39,7 +39,7 @@
 
 ::: demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。
 ```html
-<el-upload action="http://element.alpha.elenet.me/upload" :on-preview="handlePreview" :on-remove="handleRemove">
+<el-upload action="http://element-test.faas.elenet.me/upload" :on-preview="handlePreview" :on-remove="handleRemove">
   <el-button size="small" type="primary">点击上传</el-button>
   <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
 </el-upload>
@@ -65,7 +65,7 @@
 ::: demo 将 `type` 属性指定为 'drag' 可以将上传控件变为支持拖拽的形式，并且你可以通过 `multiple` 属性来控制是否支持多选，`on-preview` 和 `on-remove` 是一个钩子函数，分别在点击上传后的文件链接和点击移除上传后的文件后被调用。
 ```html
 <el-upload
-  action="http://element.alpha.elenet.me/upload"
+  action="http://element-test.faas.elenet.me/upload"
   type="drag"
   :multiple="true"
   :on-preview="handlePreview"
@@ -97,7 +97,7 @@
 ::: demo `thumbnail-mode` 属性允许你将上传组件强制只允许图片上传，并支持展示上传文件的缩略图。
 ```html
 <el-upload
-  action="http://element.alpha.elenet.me/upload"
+  action="http://element-test.faas.elenet.me/upload"
   type="drag"
   :thumbnail-mode="true"
   :on-preview="handlePreview"

examples/entry.js

@@ -16,8 +16,28 @@ Vue.component('main-footer', MainFooter);
 Vue.component('main-header', MainHeader);
 Vue.component('side-nav', SideNav);
 
+const scrollBehavior = (to, from, savedPosition) => {
+  if (savedPosition) {
+    // savedPosition is only available for popstate navigations.
+    return savedPosition;
+  } else {
+    // new navigation.
+    // scroll to anchor
+    if (to.hash) {
+      return { anchor: true };
+    }
+    // explicitly control scroll position
+    // check if any matched route config has meta that requires scrolling to top
+    if (to.matched.some(m => m.meta.scrollToTop)) {
+      return { x: 0, y: 0 };
+    }
+  }
+};
+
 const router = new VueRouter({
+  mode: 'history',
   base: __dirname,
+  scrollBehavior,
   routes: configRouter
 });
 

examples/pages/component.vue

@@ -5,7 +5,13 @@
   .el-col {
     box-sizing: border-box;
   }
-  .page-component .content > {
+  .page-component {
+    .content {
+      padding-left: 25px;
+      border-left: 1px solid #eaeefa;
+      margin-left: -1px;
+      
+      > {
         h3 {
           margin: 45px 0 15px;
         }
@@ -28,10 +34,12 @@
           }
         }
       }
+    }
+  }
 </style>
 <template>
   <div class="page-container page-component">
-    <el-row :gutter="25">
+    <el-row>
       <el-col :span="6">
         <side-nav :data="navsData" base="/component"></side-nav>
       </el-col>
@@ -48,6 +56,9 @@
       return {
         navsData: navs
       };
+    },
+    updated() {
+      console.log(this.navsData);
     }
   };
 </script>

examples/pages/index.vue

 <style scoped>
+  .actor {
+    &.typing:after {
+      content: '|';
+      animation: blink 500ms infinite;
+    }
+  }
   .banner {
     height: 420px;
     background-color: #20a0ff;
@@ -102,6 +108,10 @@
       box-shadow: 0px 6px 18px 0px rgba(232,237,250,0.50);
     }
   }
+  @keyframes blink {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
 </style>
 <template>
   <div>
@@ -109,13 +119,8 @@
       <div class="container">
         <div class="banner-desc">
           <h2>Element</h2>
-          <div id="source" style="display: none;" ref="type-source">
-            快速搭建页面<br/>只为这样的你: <span data-type="back" ref="type-job">设计师</span>
-          </div>
-          <div id="output-wrap">
-            <span id="output" ref="type-output"></span>
-            <span class="typing-cursor typing-cursor-white">|</span>
-          </div>
+          <div id="line1" class="actor"></div>
+          <div id="line2" class="actor"></div>
         </div>
         <img src="~examples/assets/images/banner-bg.svg" alt="Element">
       </div>
@@ -163,18 +168,41 @@
   </div>
 </template>
 <script>
-  import Typing from 'typing.js';
-  require('typing.js/typing.css');
+  import theaterJS from 'theaterjs';
 
   export default {
     mounted() {
-      var typing = new Typing({
-        source: this.$refs['type-source'],
-        output: this.$refs['type-output'],
-        delay: 80,
-        done: function() {}
+      function typing(theater) {
+        theater
+          .addScene('产品设计师', 600, -5, 800)
+          .addScene('交互设计师', 600, -5, 500)
+          .addScene('视觉设计师', 600, -5, 700)
+          .addScene('产品经理', 600, -4, 600)
+          .addScene('前端工程师', 600, -5, 800)
+          .addScene((done) => {
+            typing(theater);
+            done();
+          });
+      }
+      var theater = theaterJS();
+      theater
+        .on('type:start, erase:start', function() {
+          theater.getCurrentActor().$element.classList.add('typing');
+        })
+        .on('type:end, erase:end', function() {
+          theater.getCurrentActor().$element.classList.remove('typing');
+        });
+      theater
+        .addActor('line1', { speed: 0.8, accuracy: 0.6 })
+        .addActor('line2')
+        .addScene(400)
+        .addScene('line1:快速搭建页面', 600)
+        .addScene('line2:只为守护世界和平', 800, -6, '让你少加班', 1000)
+        .addScene('line2:只为这样的你: ', 600)
+        .addScene((done) => {
+          typing(theater);
+          done();
         });
-      typing.start();
     }
   };
 </script>

examples/route.config.js

@@ -4,7 +4,8 @@ const registerRoute = (config) => {
   let route = [{
     path: '/component',
     component: require('./pages/component.vue'),
-    children: []
+    children: [],
+    scrollToTop: true
   }];
   function addRoute(page) {
     const component = require(`./docs${page.path}.md`);
@@ -13,7 +14,8 @@ const registerRoute = (config) => {
       path: page.path.slice(1),
       meta: {
         title: page.title || page.name,
-        description: page.description
+        description: page.description,
+        scrollToTop: true
       },
       component: component.default || component
     });
@@ -43,6 +45,7 @@ let guideRoute = {
   path: '/guide',
   name: '指南',
   component: require('./pages/guide.vue'),
+  meta: { scrollToTop: true },
   children: [{
     path: 'design',
     name: '设计原则',
@@ -57,17 +60,20 @@ let guideRoute = {
 let resourceRoute = {
   path: '/resource',
   name: '资源',
+  meta: { scrollToTop: true },
   component: require('./pages/resource.vue')
 };
 
 let indexRoute = {
   path: '/',
   name: '首页',
+  meta: { scrollToTop: true },
   component: require('./pages/index.vue')
 };
 
 let changeLogRoute = {
   path: '/changelog',
+  meta: { scrollToTop: true },
   component: require('./pages/changelog.vue')
 };
 

package.json

@@ -30,11 +30,9 @@
   "bugs": {
     "url": "https://github.com/eleme/element-ui/issues"
   },
-  "dependencies": {
-  },
   "devDependencies": {
+    "theaterjs": "^3.0.0",
     "object-assign": "^4.1.0",
-    "typing.js": "^2.1.0",
     "babel-helper-vue-jsx-merge-props": "^1.0.1",
     "babel-plugin-syntax-jsx": "^6.8.0",
     "babel-plugin-transform-vue-jsx": "^3.1.0",
@@ -48,11 +46,10 @@
     "markdown-it-toc-and-anchor": "^4.1.1",
     "oui-dom-events": "^0.2.1",
     "postcss": "^5.0.21",
-    "purecss": "^0.6.0",
     "cheerio": "^0.18.0",
     "uppercamelcase": "^1.1.0",
-    "vue": "^2.0.0-rc.2",
-    "vue-loader": "^9.3.2",
+    "vue": "^2.0.0-rc.3",
+    "vue-loader": "^9.4.0",
     "vue-markdown-loader": "^0.4.0",
     "vue-popup": "^0.2.3",
     "vue-router": "^2.0.0-beta.2"

packages/upload/src/index.vue

@@ -177,7 +177,7 @@ export default {
       }
     };
 
-    var uploadComponent = typeof FormData === 'undefined'
+    var uploadComponent = typeof FormData !== 'undefined'
       ? <upload {...props}>{this.$slots.default}</upload>
       : <iframeUpload {...props}>{this.$slots.default}</iframeUpload>;