Skip to content

E
Element
Commit 61558fce authored by baiyaaaaa's avatar baiyaaaaa
Browse files
Options

update docs

parent 69655b73
Hide whitespace changes
Inline Side-by-side
Showing with 110 additions and 48 deletions
examples/docs/upload.md
View file @ 61558fce
......@@ -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
View file @ 61558fce
......@@ -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
View file @ 61558fce
......@@ -5,33 +5,41 @@
.el-col {
box-sizing: border-box;
}
.page-component .content > {
h3 {
margin: 45px 0 15px;
}
table {
width: 100%;
background-color: #fff;
color: #5e6d82;
font-size: 14px;
margin-bottom: 45px;
.page-component {
.content {
padding-left: 25px;
border-left: 1px solid #eaeefa;
margin-left: -1px;
strong {
font-weight: normal;
}
th {
text-align: left;
}
td, th {
border-bottom: 1px solid #eaeefb;
padding: 10px 0;
> {
h3 {
margin: 45px 0 15px;
}
table {
width: 100%;
background-color: #fff;
color: #5e6d82;
font-size: 14px;
margin-bottom: 45px;
strong {
font-weight: normal;
}
th {
text-align: left;
}
td, th {
border-bottom: 1px solid #eaeefb;
padding: 10px 0;
}
}
}
}
}
</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
View file @ 61558fce
<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() {}
});
typing.start();
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();
});
}
};
</script>
examples/route.config.js
View file @ 61558fce
......@@ -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')
};
......
packages/upload/src/index.vue
View file @ 61558fce
......@@ -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>;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment