1 | <template>
|
2 | <transition-group
|
3 | tag="ul"
|
4 | :class="[
|
5 | 'el-upload-list',
|
6 | 'el-upload-list--' + listType,
|
7 | { 'is-disabled': disabled }
|
8 | ]"
|
9 | name="el-list"
|
10 | >
|
11 | <li
|
12 | v-for="file in files"
|
13 | :class="['el-upload-list__item', 'is-' + file.status, focusing ? 'focusing' : '']"
|
14 | :key="file.uid"
|
15 | tabindex="0"
|
16 | @keydown.delete="!disabled && $emit('remove', file)"
|
17 | @focus="focusing = true"
|
18 | @blur="focusing = false"
|
19 | @click="focusing = false"
|
20 | >
|
21 | <slot :file="file">
|
22 | <img
|
23 | class="el-upload-list__item-thumbnail"
|
24 | v-if="file.status !== 'uploading' && ['picture-card', 'picture'].indexOf(listType) > -1"
|
25 | :src="file.url" alt=""
|
26 | >
|
27 | <a class="el-upload-list__item-name" @click="handleClick(file)">
|
28 | <i class="el-icon-document"></i>{{file.name}}
|
29 | </a>
|
30 | <label class="el-upload-list__item-status-label">
|
31 | <i :class="{
|
32 | 'el-icon-upload-success': true,
|
33 | 'el-icon-circle-check': listType === 'text',
|
34 | 'el-icon-check': ['picture-card', 'picture'].indexOf(listType) > -1
|
35 | }"></i>
|
36 | </label>
|
37 | <i class="el-icon-close" v-if="!disabled" @click="$emit('remove', file)"></i>
|
38 | <i class="el-icon-close-tip" v-if="!disabled">{{ t('el.upload.deleteTip') }}</i>
|
39 | <el-progress
|
40 | v-if="file.status === 'uploading'"
|
41 | :type="listType === 'picture-card' ? 'circle' : 'line'"
|
42 | :stroke-width="listType === 'picture-card' ? 6 : 2"
|
43 | :percentage="parsePercentage(file.percentage)">
|
44 | </el-progress>
|
45 | <span class="el-upload-list__item-actions" v-if="listType === 'picture-card'">
|
46 | <span
|
47 | class="el-upload-list__item-preview"
|
48 | v-if="handlePreview && listType === 'picture-card'"
|
49 | @click="handlePreview(file)"
|
50 | >
|
51 | <i class="el-icon-zoom-in"></i>
|
52 | </span>
|
53 | <span
|
54 | v-if="!disabled"
|
55 | class="el-upload-list__item-delete"
|
56 | @click="$emit('remove', file)"
|
57 | >
|
58 | <i class="el-icon-delete"></i>
|
59 | </span>
|
60 | </span>
|
61 | </slot>
|
62 | </li>
|
63 | </transition-group>
|
64 | </template>
|
65 | <script>
|
66 | import Locale from 'element-ui/src/mixins/locale';
|
67 | import ElProgress from 'element-ui/packages/progress';
|
68 |
|
69 | export default {
|
70 |
|
71 | name: 'ElUploadList',
|
72 |
|
73 | mixins: [Locale],
|
74 |
|
75 | data() {
|
76 | return {
|
77 | focusing: false
|
78 | };
|
79 | },
|
80 | components: { ElProgress },
|
81 |
|
82 | props: {
|
83 | files: {
|
84 | type: Array,
|
85 | default() {
|
86 | return [];
|
87 | }
|
88 | },
|
89 | disabled: {
|
90 | type: Boolean,
|
91 | default: false
|
92 | },
|
93 | handlePreview: Function,
|
94 | listType: String
|
95 | },
|
96 | methods: {
|
97 | parsePercentage(val) {
|
98 | return parseInt(val, 10);
|
99 | },
|
100 | handleClick(file) {
|
101 | this.handlePreview && this.handlePreview(file);
|
102 | }
|
103 | }
|
104 | };
|
105 | </script>
|