upload-list.vue
3.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<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.native="handleRemove(file)"></Icon>
<transition name="fade">
<i-progress
v-if="file.showProgress"
:stroke-width="2"
:percent="parsePercentage(file.percentage)"
:status="file.status === 'finished' && file.showProgress ? 'success' : 'normal'"></i-progress>
</transition>
</li>
</ul>
</template>
<script>
import Icon from '../icon/icon.vue';
import iProgress from '../progress/progress.vue';
const prefixCls = 'ivu-upload';
export default {
name: 'UploadList',
components: { Icon, iProgress },
props: {
files: {
type: Array,
default() {
return [];
}
}
},
data () {
return {
prefixCls: prefixCls
};
},
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>