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

update

pull/2775/head
baiyaaaaa 2017-01-09 13:30:42 +08:00 committed by 杨奕
parent 4c5820373c
commit 88a070ab16
5 changed files with 101 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
examples/docs/zh-CN/upload.md
View File

@ -6,6 +6,10 @@
} }
.demo-box { .demo-box {
margin-bottom: 24px; margin-bottom: 24px;
.upload-demo {
width: 360px;
}
} }
</style> </style>
<script> <script>
@ -59,6 +63,7 @@
::: demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。 ::: demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。
```html ```html
<el-upload <el-upload
class="upload-demo"
action="//jsonplaceholder.typicode.com/posts/" action="//jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview" :on-preview="handlePreview"
:on-remove="handleRemove" :on-remove="handleRemove"
@ -88,14 +93,17 @@
::: demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。 ::: demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。
```html ```html
<el-upload-dragger <el-upload
class="upload-demo"
dragger
action="//jsonplaceholder.typicode.com/posts/" action="//jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview" :on-preview="handlePreview"
:on-remove="handleRemove" :on-remove="handleRemove"
:file-list="fileList"> :file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button> <i class="el-icon-upload"></i>
<div class="el-upload-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload-dragger> </el-upload>
``` ```
::: :::

2
packages/theme-default/src/upload.css
View File

@ -101,7 +101,7 @@
display: none; display: none;
} }
} }
@b dragger { @b upload-dragger {
background-color: var(--color-dark-white); background-color: var(--color-dark-white);
border: 1px solid var(--color-extra-light-silver); border: 1px solid var(--color-extra-light-silver);
box-sizing: border-box; box-sizing: border-box;

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

@ -1,6 +1,7 @@
<script> <script>
import UploadList from './upload-list'; import UploadList from './upload-list';
import Upload from './upload'; import Upload from './upload';
import UploadDragger from './upload-dragger';
import IframeUpload from './iframe-upload'; import IframeUpload from './iframe-upload';
import ElProgress from 'element-ui/packages/progress'; import ElProgress from 'element-ui/packages/progress';
@ -14,6 +15,7 @@ export default {
ElProgress, ElProgress,
UploadList, UploadList,
Upload, Upload,
UploadDragger,
IframeUpload IframeUpload
}, },
@ -35,6 +37,7 @@ export default {
default: 'file' default: 'file'
}, },
draggable: Boolean, draggable: Boolean,
dragger: Boolean,
withCredentials: Boolean, withCredentials: Boolean,
thumbnailMode: Boolean, thumbnailMode: Boolean,
showUploadList: { showUploadList: {
@ -236,27 +239,27 @@ export default {
ref: 'upload-inner' ref: 'upload-inner'
}; };
var uploadComponent = (typeof FormData !== 'undefined' || this.$isServer) // var uploadComponent = (typeof FormData !== 'undefined' || this.$isServer)
? <upload {...props}>{this.$slots.default}</upload> // ? <upload {...props}>{this.$slots.default}</upload>
: <iframeUpload {...props}>{this.$slots.default}</iframeUpload>; // : <iframeUpload {...props}>{this.$slots.default}</iframeUpload>;
if (this.dragger) {
return (
<div>
<upload-dragger {...props}>{this.$slots.default}</upload-dragger>
{this.$slots.tip}
{uploadList}
</div>
);
}
return ( return (
<div class="el-upload"> <div>
{uploadList} {uploadList}
{uploadComponent} <upload {...props}>{this.$slots.default}</upload>
{this.$slots.tip} {this.$slots.tip}
</div> </div>
); );
// if (this.type === 'drag') {
// return (
// <div class="el-upload">
// {uploadComponent}
// {this.$slots.tip}
// {uploadList}
// </div>
// );
// }
} }
}; };
</script> </script>

125
packages/upload/src/upload-dragger.vue
View File

@ -1,16 +1,38 @@
<template>
<div
class="el-upload-dragger"
:class="{
'is-dragOver': dragOver,
'is-showCover': showCover
}"
@click="handleClick"
@drop.prevent="onDrop"
@dragover.prevent="dragOver = true"
@dragleave.prevent="dragOver = false"
>
<slot v-if="!showCover"></slot>
<cover :image="lastestFile" :on-preview="onPreview" :on-remove="onRemove" v-else></cover>
<input class="el-upload__input" type="file" ref="input" @change="handleChange" :multiple="multiple" :accept="accept">
</div>
</template>
<script> <script>
import index from '.';
import Upload from './upload'; import Upload from './upload';
import IframeUpload from './iframe-upload'; import IframeUpload from './iframe-upload';
import UploadList from './upload-list'; import Cover from './cover';
export default { export default {
name: 'ElUploadDragger', name: 'ElUploadDragger',
extends: index,
extends: Upload,
components: { components: {
UploadList, IframeUpload,
Upload, Cover
IframeUpload },
data() {
return {
dragOver: false
};
}, },
props: { props: {
draggable: { draggable: {
@ -18,57 +40,48 @@
default: true default: true
} }
}, },
render(h) { computed: {
var uploadList; lastestFile() {
var fileList = this.$parent.fileList;
if (this.showUploadList && !this.thumbnailMode && this.uploadFiles.length) { return fileList[fileList.length - 1];
uploadList = (
<UploadList
files={this.uploadFiles}
on-remove={this.handleRemove}
on-preview={this.handlePreview}>
</UploadList>
);
}
var props = {
props: {
type: this.type,
draggable: this.draggable,
action: this.action,
multiple: this.multiple,
'before-upload': this.beforeUpload,
'with-credentials': this.withCredentials,
headers: this.headers,
name: this.name,
data: this.data,
accept: this.thumbnailMode ? 'image/gif, image/png, image/jpeg, image/bmp, image/webp' : this.accept,
'on-start': this.handleStart,
'on-progress': this.handleProgress,
'on-success': this.handleSuccess,
'on-error': this.handleError,
'on-preview': this.handlePreview,
'on-remove': this.handleRemove
}, },
ref: 'upload-inner' showCover() {
}; var file = this.lastestFile;
return this.thumbnailMode && file && file.status !== 'fail';
var uploadComponent = (typeof FormData !== 'undefined' || this.$isServer) },
? <upload {...props}>{this.$slots.default}</upload> thumbnailMode() {
: <iframeUpload {...props}>{this.$slots.default}</iframeUpload>; return this.$parent.thumbnailMode;
return (
<div
class={{
'el-upload-dragger': true,
'is-dragOver': this.dragOver
}}
>
{uploadComponent}
{this.$slots.tip}
{uploadList}
</div>
);
} }
},
methods: {
onDrop(e) {
this.dragOver = false;
this.uploadFiles(e.dataTransfer.files);
}
}
// render(h) {
// let {
// dragover
// } = this;
// let content = this.showCover
// ? <cover image={this.lastestFile} on-preview={this.onPreview} on-remove={this.onRemove}></cover>
// : this.$slots.default
// return (
// <div
// class={{
// 'el-upload-dragger': true,
// 'is-dragOver': this.dragOver,
// 'is-showCover': this.showCover
// }}
// @drop.prevent="onDrop"
// @dragover.prevent="dragOver = true"
// @dragleave.prevent="dragOver = false"
// >
// {content}
// <input class="el-upload__input" type="file" ref="input" on-change={this.handleChange} multiple={this.multiple} accept={this.accept} />
// </div>
// );
// }
}; };
</script> </script>

33
packages/upload/src/upload.vue
View File

@ -1,25 +1,15 @@
<template> <template>
<div class="el-upload__inner" <div class="el-upload" @click="handleClick">
:class="{ <slot></slot>
'el-dragger': type === 'drag',
'is-dragOver': dragOver,
'is-showCover': showCover
}"
@click="handleClick"
>
<slot v-if="!showCover"></slot>
<cover :image="lastestFile" :on-preview="onPreview" :on-remove="onRemove" v-else></cover>
<input class="el-upload__input" type="file" ref="input" @change="handleChange" :multiple="multiple" :accept="accept"> <input class="el-upload__input" type="file" ref="input" @change="handleChange" :multiple="multiple" :accept="accept">
</div> </div>
</template> </template>
<script> <script>
import ajax from './ajax'; import ajax from './ajax';
import Cover from './cover';
export default { export default {
components: { components: {
Cover
}, },
props: { props: {
type: String, type: String,
@ -53,25 +43,10 @@ export default {
data() { data() {
return { return {
dragOver: false,
mouseover: false mouseover: false
}; };
}, },
computed: {
lastestFile() {
var fileList = this.$parent.fileList;
return fileList[fileList.length - 1];
},
showCover() {
var file = this.lastestFile;
return this.thumbnailMode && file && file.status !== 'fail';
},
thumbnailMode() {
return this.$parent.thumbnailMode;
}
},
methods: { methods: {
isImage(str) { isImage(str) {
return str.indexOf('image') !== -1; return str.indexOf('image') !== -1;
@ -146,10 +121,6 @@ export default {
} }
}); });
}, },
onDrop(e) {
this.dragOver = false;
this.uploadFiles(e.dataTransfer.files);
},
handleClick() { handleClick() {
this.$refs.input.click(); this.$refs.input.click();
} }