update Upload
update Upload
This commit is contained in:
梁灏
parent
1992733eeb
commit
ddef2bb3d6
4 changed files with 226 additions and 23 deletions
|
|
@ -1,13 +1,93 @@
|
|||
<template>
|
||||
|
||||
<ul :class="[prefixCls + '-list']">
|
||||
<li
|
||||
v-for="file in files"
|
||||
:class="fileCls(file)"
|
||||
@click="handleClick(file)">
|
||||
<span @click="handlePreview(file)">
|
||||
<Icon :type="format(file)"></Icon> {{ file.name }}
|
||||
</span>
|
||||
<Icon
|
||||
type="ios-close-empty"
|
||||
:class="[prefixCls + '-list-remove']"
|
||||
v-show="file.status === 'finished'"
|
||||
@click="handleRemove(file)"></Icon>
|
||||
<Progress
|
||||
v-if="file.showProgress"
|
||||
:stroke-width="2"
|
||||
:percent="parsePercentage(file.percentage)"
|
||||
:status="file.status === 'finished' && file.showProgress ? 'success' : 'normal'"
|
||||
transition="fade"></Progress>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<script>
|
||||
import Icon from '../icon/icon.vue';
|
||||
import Progress from '../progress/progress.vue';
|
||||
const prefixCls = 'ivu-upload';
|
||||
|
||||
export default {
|
||||
props: {},
|
||||
components: { Icon, Progress },
|
||||
props: {
|
||||
files: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {};
|
||||
return {
|
||||
prefixCls: prefixCls
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
methods: {
|
||||
fileCls (file) {
|
||||
return [
|
||||
`${prefixCls}-list-file`,
|
||||
{
|
||||
[`${prefixCls}-list-file-finish`]: file.status === 'finished'
|
||||
}
|
||||
];
|
||||
},
|
||||
handleClick (file) {
|
||||
this.$emit('on-file-click', file);
|
||||
},
|
||||
handlePreview (file) {
|
||||
this.$emit('on-file-preview', file);
|
||||
},
|
||||
handleRemove (file) {
|
||||
this.$emit('on-file-remove', file);
|
||||
},
|
||||
format (file) {
|
||||
const format = file.name.split('.').pop().toLocaleLowerCase() || '';
|
||||
let type = 'document';
|
||||
|
||||
if (['gif','jpg','jpeg','png','bmp','webp'].indexOf(format) > -1) {
|
||||
type = 'image';
|
||||
}
|
||||
if (['mp4','m3u8','rmvb','avi','swf','3gp','mkv','flv'].indexOf(format) > -1) {
|
||||
type = 'ios-film';
|
||||
}
|
||||
if (['mp3','wav','wma','ogg','aac','flac'].indexOf(format) > -1) {
|
||||
type = 'ios-musical-notes';
|
||||
}
|
||||
if (['doc','txt','docx','pages','epub','pdf'].indexOf(format) > -1) {
|
||||
type = 'document-text';
|
||||
}
|
||||
if (['numbers','csv','xls','xlsx'].indexOf(format) > -1) {
|
||||
type = 'stats-bars';
|
||||
}
|
||||
if (['keynote','ppt','pptx'].indexOf(format) > -1) {
|
||||
type = 'ios-videocam';
|
||||
}
|
||||
|
||||
return type;
|
||||
},
|
||||
parsePercentage (val) {
|
||||
return parseInt(val, 10);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,27 +1,37 @@
|
|||
<template>
|
||||
<div
|
||||
:class="classes"
|
||||
@click="handleClick"
|
||||
@drop.prevent="onDrop"
|
||||
@dragover.prevent="dragOver = true"
|
||||
@dragleave.prevent="dragOver = false">
|
||||
<input
|
||||
v-el:input
|
||||
:class="[prefixCls + '-input']"
|
||||
type="file"
|
||||
@change="handleChange"
|
||||
:multiple="multiple"
|
||||
:accept="accept">
|
||||
<slot></slot>
|
||||
<div :class="[prefixCls]">
|
||||
<div
|
||||
:class="classes"
|
||||
@click="handleClick"
|
||||
@drop.prevent="onDrop"
|
||||
@dragover.prevent="dragOver = true"
|
||||
@dragleave.prevent="dragOver = false">
|
||||
<input
|
||||
v-el:input
|
||||
:class="[prefixCls + '-input']"
|
||||
type="file"
|
||||
@change="handleChange"
|
||||
:multiple="multiple"
|
||||
:accept="accept">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<slot name="tip"></slot>
|
||||
<upload-list
|
||||
v-if="showUploadList"
|
||||
:files="fileList"
|
||||
@on-file-remove="handleRemove"
|
||||
@on-file-preview="handlePreview"></upload-list>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import UploadList from './upload-list.vue';
|
||||
import ajax from './ajax';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-upload';
|
||||
|
||||
export default {
|
||||
components: { UploadList },
|
||||
props: {
|
||||
action: {
|
||||
type: String,
|
||||
|
|
@ -56,7 +66,8 @@
|
|||
type: String,
|
||||
validator (value) {
|
||||
return oneOf(value, ['select', 'drag']);
|
||||
}
|
||||
},
|
||||
default: 'select'
|
||||
},
|
||||
format: {
|
||||
type: Array,
|
||||
|
|
@ -133,6 +144,7 @@
|
|||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-select`]: this.type === 'select',
|
||||
[`${prefixCls}-drag`]: this.type === 'drag',
|
||||
[`${prefixCls}-dragOver`]: this.dragOver
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,75 @@
|
|||
@upload-prefix-cls: ~"@{css-prefix}upload";
|
||||
|
||||
.@{upload-prefix-cls} {
|
||||
input[type="file"]{
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-list{
|
||||
margin-bottom: 8px;
|
||||
|
||||
&-file{
|
||||
padding: 4px;
|
||||
color: @text-color;
|
||||
border-radius: @border-radius-small;
|
||||
transition: background-color @transition-time @ease-in-out;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
& + span{
|
||||
cursor: pointer;
|
||||
transition: color @transition-time @ease-in-out;
|
||||
i{
|
||||
display: inline-block;
|
||||
width: @font-size-small;
|
||||
height: @font-size-small;
|
||||
color: @text-color;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background: @input-disabled-bg;
|
||||
& + span{
|
||||
color: @primary-color;
|
||||
i{
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
.@{upload-prefix-cls}-list-remove{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-remove{
|
||||
opacity: 0;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
margin-right: 4px;
|
||||
color: @legend-color;
|
||||
transition: all @transition-time ease;
|
||||
&:hover{
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-drag{
|
||||
background: #fff;
|
||||
border: 1px dashed @border-color-base;
|
||||
border-radius: @border-radius-small;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: border-color @transition-time ease;
|
||||
|
||||
&:hover{
|
||||
border: 1px dashed @primary-color;
|
||||
}
|
||||
}
|
||||
&-dragOver{
|
||||
border: 2px dashed @primary-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,54 @@
|
|||
<template>
|
||||
<Upload action="/qiniu" :max-size="10000">
|
||||
<i-button>上传</i-button>
|
||||
</Upload>
|
||||
<div style="margin: 50px;width: 300px;">
|
||||
<Upload
|
||||
action="//jsonplaceholder.typicode.com/posts/"
|
||||
multiple
|
||||
type="drag"
|
||||
:max-size="10000"
|
||||
:default-file-list="defaultFileList">
|
||||
<div style="padding: 40px 100px">
|
||||
<i-button>上传</i-button>
|
||||
</div>
|
||||
<!--<div slot="tip">只能上传 jpg/png 格式的文件</div>-->
|
||||
</Upload>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
data () {
|
||||
return {};
|
||||
return {
|
||||
defaultFileList: [
|
||||
{
|
||||
'name': 'Vue.js权威指南.zip',
|
||||
'url': 'http://www.baidu.com'
|
||||
},
|
||||
{
|
||||
'name': 'Vue.js权威指南.doc',
|
||||
'url': 'http://www.baidu.com'
|
||||
},
|
||||
{
|
||||
'name': '套马的汉子.mp3',
|
||||
'url': 'http://www.baidu.com'
|
||||
},
|
||||
{
|
||||
'name': '风景.jpg',
|
||||
'url': 'http://www.baidu.com'
|
||||
},
|
||||
{
|
||||
'name': 'Vue.js权威指南.mp4',
|
||||
'url': 'http://www.baidu.com'
|
||||
},
|
||||
{
|
||||
'name': '套马的汉子.csv',
|
||||
'url': 'http://www.baidu.com'
|
||||
},
|
||||
{
|
||||
'name': '风景.ppt',
|
||||
'url': 'http://www.baidu.com'
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue