Merge pull request #124 from baiyaaaaa/next

update docs
2016-08-31 13:31:19 +08:00 · 2016-08-31 13:31:19 +08:00 · 1718265cef
parent 69655b734e 61558fce82
commit 1718265cef
7 changed files with 110 additions and 48 deletions
--- a/examples/docs/upload.md
+++ b/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"
--- a/examples/entry.js
+++ b/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
 });

--- a/examples/pages/component.vue
+++ b/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>
--- a/examples/pages/index.vue
+++ b/examples/pages/index.vue
@ -1,4 +1,10 @@
 <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>
--- a/examples/route.config.js
+++ b/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')
 };

--- a/package.json
+++ b/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"
--- a/packages/upload/src/index.vue
+++ b/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>;