Skip to content

Commit 6a7ea2e

Browse files
didiaohudidiaohu
authored
Merge pull request ftdus#117 from ZongDuCha/feature/createWebAndCreateBaseCpont
Feature/create web and create base cpont
2 parents 44b4d5f + e1b29be commit 6a7ea2e

File tree

7 files changed

+308
-128
lines changed

7 files changed

+308
-128
lines changed

‎src/components/upload/index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import PyUpload from './src/upload.vue';
2-
PyUpload.install = function PyButton(Vue) {
2+
3+
PyUpload.install = function PyButton(Vue) {
34
Vue.component(PyUpload.name, PyUpload);
45
};
56

6-
export default PyUpload
7+
export default PyUpload;

‎src/components/upload/src/upload-list.vue

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
<template>
2-
<transition-group name="upload-fade">
2+
<transition-group name="py-upload">
33
<li v-for="(item, index) in files" class="py-upload__list" v-show="files.length" :key="index">
4-
<span class="py-upload__list__name" @click="onItem(item, index)">
5-
<i class="pyui-icons py-icon-file-fill"></i>
6-
<span>{{item.name}}</span>
4+
<span class="py-upload__list--name" @click="onItem($event, item, index);">
5+
<i class="pyui-icons py-icon-file-fill"></i> <span>{{ item.name }}</span>
76
</span>
8-
<i v-if="item.percentage === 100"
9-
@click="onRemove(item, index)"
10-
title="删除" class="pyui-icons py-icon-close"></i>
11-
<div class="py-upload__list__wappar" v-if="item.showProgress">
12-
<div class="py-upload__list__prect">
13-
<li :style="{width: item.percentage+'%'}"></li>
7+
<i
8+
v-if="item.percentage === 100"
9+
@click="onRemove(item, index);"
10+
title="删除"
11+
class="pyui-icons py-icon-close"
12+
></i>
13+
<div class="py-upload__list--wappar" v-if="item.showProgress">
14+
<div class="py-upload__list--prect">
15+
<li :style="{ width: item.percentage + '%' }"></li>
1416
</div>
15-
<span class="py-upload__list__del" ref="del"
16-
v-if="item.showProgress">{{item.percentage}}%</span>
17+
<span class="py-upload__list--del" ref="del" v-if="item.showProgress"
18+
>{{ item.percentage }}%</span
19+
>
1720
</div>
1821
</li>
1922
</transition-group>
@@ -27,14 +30,21 @@ export default {
2730
type: Array,
2831
default: () => {},
2932
},
30-
onBeforeRemove: Function,
33+
onBeforeRemove: {
34+
type: Function,
35+
default: () => {},
36+
},
37+
onClickItem: {
38+
type: Function,
39+
default: () => {},
40+
},
3141
},
3242
methods: {
33-
onItem(index, item) {
34-
this.$emit('on-item', index, item);
43+
onItem(e, index, item) {
44+
return this.onClickItem(e, index, item);
3545
},
3646
onRemove(item, index) {
37-
if (this.onBeforeRemove(item, index) === false) {
47+
if (this.onBeforeRemove(item, index, this.files) === false) {
3848
return false;
3949
}
4050
return this.$emit('on-remove', item, index);

‎src/components/upload/src/upload.vue

Lines changed: 65 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
11
<template>
22
<div class="py-upload">
3-
<div class="py-upload__item"
3+
<div
4+
class="py-upload__item"
45
:class="drapClass"
56
@click.stop="inputClick"
6-
@dragover.prevent="drapFile = true"
7-
@dragleave.prevent="drapFile = false"
8-
@drop.prevent="onDrop">
9-
<input
10-
type="file"
11-
ref="input"
12-
:multiple="multiple"
13-
:accept="accept"
14-
@change="fileChange">
15-
<slot></slot>
7+
@dragover.prevent="drapFile = true;"
8+
@dragleave.prevent="drapFile = false;"
9+
@drop.prevent="onDrop"
10+
>
11+
<input type="file" ref="input" :multiple="multiple" :accept="accept" @change="fileChange" />
12+
<slot></slot>
1613
</div>
17-
<uploadList @on-remove="onRemove"
18-
@onItem="onItem"
14+
<uploadList
15+
@on-remove="onRemove"
16+
:onClickItem="onClickItem"
1917
:on-before-remove="onbeforeRemove"
20-
:files="fileList"/>
18+
:files="fileList"
19+
/>
2120
</div>
2221
</template>
2322

@@ -56,6 +55,8 @@ export default {
5655
return Item;
5756
});
5857
this.fileList = this.value;
58+
} else {
59+
this.fileList = [];
5960
}
6061
},
6162
},
@@ -77,10 +78,6 @@ export default {
7778
this.dragOver = false;
7879
this.fileChange(e.dataTransfer.files);
7980
},
80-
// 点击列表中的文件
81-
onItem(index, item) {
82-
this.$emit('on-item', index, item, this.fileList);
83-
},
8481
// 删除fileList文件
8582
onRemove(item, index) {
8683
this.fileList.splice(index, 1);
@@ -92,6 +89,7 @@ export default {
9289
if (!Files) {
9390
return false;
9491
}
92+
this.drapFile = false;
9593
for (let i = 0; i < Files.length; i += 1) {
9694
const File = {
9795
status: 'status',
@@ -109,8 +107,10 @@ export default {
109107
},
110108
// 选择上传的文件
111109
fileSelect(file, fileList) {
112-
this.fileFormat(file, fileList);
113-
this.$emit('before-select', file, fileList);
110+
if (this.beforeSelect(file, fileList) === false) {
111+
return false;
112+
}
113+
return this.fileFormat(file, fileList);
114114
},
115115
// 验证文件后缀格式
116116
fileFormat(file, fileList) {
@@ -119,9 +119,9 @@ export default {
119119
return false;
120120
}
121121
const name = file.name ? file.name.split('.') : [];
122-
const fileType = name[name.length];
122+
const fileType = name[name.length - 1];
123123
if (this.format.indexOf(fileType) === -1) {
124-
this.$emit('on-format-err', file, fileList);
124+
this.onFormatErr(file, fileList);
125125
return false;
126126
}
127127
return this.fileMaxSize(this.format, file, fileList);
@@ -130,7 +130,7 @@ export default {
130130
fileMaxSize(file, fileList) {
131131
if (this.maxSize !== undefined) {
132132
if (file.size > this.maxSize * 1024) {
133-
this.$emit('on-size-err', this.maxSize, file, fileList);
133+
this.onSizeErr(file, fileList);
134134
return false;
135135
}
136136
}
@@ -141,12 +141,31 @@ export default {
141141
if (!this.onBeforeUpload) {
142142
return this.fileStart(file);
143143
}
144+
const beforeFn = this.onBeforeUpload(file);
145+
if (beforeFn && beforeFn.then) {
146+
beforeFn.then(
147+
processedFile => {
148+
if (Object.prototype.toString.call(processedFile) === '[object File]') {
149+
this.fileStart(processedFile, fileList);
150+
} else {
151+
this.fileStart(file, fileList);
152+
}
153+
},
154+
err => {
155+
this.handleError(err, file);
156+
},
157+
);
158+
} else if (beforeFn !== false) {
159+
this.fileStart(file, fileList);
160+
} else {
161+
this.handleError('', file);
162+
}
144163
return this.fileStart(file, fileList);
145164
},
146165
// 开始上传文件
147166
fileStart(file, fileList) {
148167
if (!this.action) {
149-
this.$emit('on-error', '上传地址必填!', file, fileList);
168+
this.onError('上传地址必填', file, fileList);
150169
return false;
151170
}
152171
const File = this.getFile(file);
@@ -186,7 +205,7 @@ export default {
186205
handleProgress(e, file) {
187206
const File = file;
188207
File.status = 'progress';
189-
File.percentage = parseInt(e.percent, 10) || 0;
208+
File.percentage = parseInt(e.percent, 10) || 1;
190209
this.onProgress(e, File, this.fileList);
191210
},
192211
// 上传成功回调response
@@ -199,21 +218,31 @@ export default {
199218
setTimeout(() => {
200219
File.showProgress = false;
201220
}, 1000);
202-
this.$emit('on-success', res, File);
203221
},
204222
// 上传失败
205223
handleError(err, file) {
206224
const File = file;
207225
File.status = 'fail';
208226
File.percentage = 100;
209227
this.onError(err, File, this.fileList);
210-
this.$emit('on-error', err, File);
211228
},
212229
},
213230
props: {
214231
accept: [String],
215232
maxSize: [Number],
216233
action: [String],
234+
beforeSelect: {
235+
type: Function,
236+
default: () => {},
237+
},
238+
onSizeErr: {
239+
type: Function,
240+
default: () => {},
241+
},
242+
onFormatErr: {
243+
type: Function,
244+
default: () => {},
245+
},
217246
onProgress: {
218247
type: Function,
219248
default: () => {},
@@ -232,13 +261,20 @@ export default {
232261
},
233262
type: {
234263
type: String,
235-
default: 'file',
264+
default: 'select',
236265
},
237266
onbeforeRemove: {
238267
type: Function,
239268
default: () => {},
240269
},
241-
onBeforeUpload: Function,
270+
onClickItem: {
271+
type: Function,
272+
default: () => {},
273+
},
274+
onBeforeUpload: {
275+
type: Function,
276+
default: () => {},
277+
},
242278
data: [Object],
243279
format: {
244280
type: Array,

‎src/styles/src/base/common/themes.scss

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,15 @@ $--card-border-color: $--border-color-base !default;
169169
$--card-border-radius: $--border-radius-base !default;
170170
$--card-padding: 20px !default;
171171

172+
173+
/* Upload
174+
--------------------------*/
175+
$--upload-font-size-small: $--font-size-small !default;
176+
$--upload-font-size: $--font-size-base !default;
177+
$--upload-font-size-large: $--font-size-large !default;
178+
$--upload-color: $--color-primary !default;
179+
$--upload-radius: $border-radius !default;
180+
172181
/* Header
173182
--------------------------*/
174183
$--header-padding: 0 20px !default;
@@ -189,4 +198,5 @@ $--pagination-color: $--color-text-regular !default;
189198
$--pagination-color-hover: $--color-primary !default;
190199
$--pagination-color-active: $--color-primary !default;
191200
$--pagination-background-active: $--color-primary !default;
192-
$--pagination-background: #f4f4f5 !default;
201+
$--pagination-background: #f4f4f5 !default;
202+

0 commit comments

Comments
 (0)