github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #124 from baiyaaaaa/next 

update docs
pull/2/head
baiyaaaaa 2016-08-31 13:31:19 +08:00 committed by GitHub
parent 69655b734e 61558fce82
commit 1718265cef
7 changed files with 110 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/docs/upload.md
View File

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

20
examples/entry.js
View File

@ -16,8 +16,28 @@ Vue.component('main-footer', MainFooter);
Vue.component('main-header', MainHeader); Vue.component('main-header', MainHeader);
Vue.component('side-nav', SideNav); 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({ const router = new VueRouter({
mode: 'history',
base: __dirname, base: __dirname,
scrollBehavior,
routes: configRouter routes: configRouter
}); });

51
examples/pages/component.vue
View File

@ -5,33 +5,41 @@
.el-col { .el-col {
box-sizing: border-box; box-sizing: border-box;
} }
.page-component .content > { .page-component {
h3 { .content {
margin: 45px 0 15px; padding-left: 25px;
} border-left: 1px solid #eaeefa;
table { margin-left: -1px;
width: 100%;
background-color: #fff;
color: #5e6d82;
font-size: 14px;
margin-bottom: 45px;
strong { > {
font-weight: normal; h3 {
} margin: 45px 0 15px;
th { }
text-align: left; table {
} width: 100%;
td, th { background-color: #fff;
border-bottom: 1px solid #eaeefb; color: #5e6d82;
padding: 10px 0; 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> </style>
<template> <template>
<div class="page-container page-component"> <div class="page-container page-component">
<el-row :gutter="25"> <el-row>
<el-col :span="6"> <el-col :span="6">
<side-nav :data="navsData" base="/component"></side-nav> <side-nav :data="navsData" base="/component"></side-nav>
</el-col> </el-col>
@ -48,6 +56,9 @@
return { return {
navsData: navs navsData: navs
}; };
},
updated() {
console.log(this.navsData);
} }
}; };
</script> </script>

60
examples/pages/index.vue
View File

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

10
examples/route.config.js
View File

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

9
package.json
View File

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

2
packages/upload/src/index.vue
View File

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