Skip to content

Commit 4693df5

Browse files
didiaohudidiaohu
committed
Merge branch 'feature/createWebAndCreateBaseCpont' of github.com:ftdus/PyUI into feature/createWebAndCreateBaseCpont
2 parents 0a5bae0 + 5f734e6 commit 4693df5

File tree

22 files changed

+1175
-293
lines changed

22 files changed

+1175
-293
lines changed

‎src/components/message/src/message.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<transition name="slide-fade">
2+
<transition name="py-message-slide-fade">
33
<div :class="[
44
'py-message',
55
customClass,

‎src/components/select/src/select.vue

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
direction === 'slide-down'? 'py-select__dropdown--down' : 'py-select__dropdown--up']"
7676
v-show="showDropDown"
7777
ref="dropDown">
78-
<ul class="py-select__dropdown--list" v-if="!loading">
78+
<ul class="py-select__dropdown--grouplist" v-if="!loading">
7979
<li
8080
v-show="option.show !== false"
8181
class="py-select__dropdown--item"
@@ -111,7 +111,7 @@
111111
import Vue from 'vue';
112112
113113
export default {
114-
name: 'PySelect',
114+
name: 'py-select',
115115
data() {
116116
return {
117117
showDropDown: false, // 下拉框显示/隐藏
@@ -264,7 +264,8 @@ export default {
264264
},
265265
queryText(val) {
266266
this.$nextTick(() => {
267-
const width = this.$refs.multiText.clientWidth > 6 ? this.$refs.multiText.clientWidth : 6;
267+
const width =
268+
this.$refs.multiText.clientWidth > 6 ? this.$refs.multiText.clientWidth + 1 : 6;
268269
this.$refs.multiInput.style.width = `${width}px`;
269270
this.setPosition();
270271
this.setDirection();
@@ -426,7 +427,7 @@ export default {
426427
const item = option;
427428
if (index === this.activedIndex) {
428429
this.selectDropDownItem(option);
429-
if (option.created) {
430+
if (option.created && this.multiple) {
430431
item.show = false;
431432
item.selected = true;
432433
this.queryText = '';

‎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/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ import Submenu from './components/submenu/index';
2525
import Switch from './components/switch/index';
2626
import TabPane from './components/tab-pane/index';
2727
import Upload from './components/upload/index';
28+
import Select from './components/select/index';
29+
import Pagination from './components/pagination/index';
2830

2931
const components = [
3032
Alert,
@@ -51,6 +53,8 @@ const components = [
5153
Switch,
5254
TabPane,
5355
Upload,
56+
Select,
57+
Pagination,
5458
];
5559
const install = function(Vue) {
5660
const vue = Vue;
@@ -99,4 +103,6 @@ export default {
99103
Switch,
100104
TabPane,
101105
Upload,
106+
Select,
107+
Pagination,
102108
};

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,3 +168,53 @@ $--slider-process-color: $--color-primary !default;
168168
$--card-border-color: $--border-color-base !default;
169169
$--card-border-radius: $--border-radius-base !default;
170170
$--card-padding: 20px !default;
171+
172+
/* Upload
173+
--------------------------*/
174+
$--upload-font-size-small: $--font-size-small !default;
175+
$--upload-font-size: $--font-size-base !default;
176+
$--upload-font-size-large: $--font-size-large !default;
177+
$--upload-color: $--color-primary !default;
178+
$--upload-radius: $border-radius !default;
179+
180+
/* Header
181+
--------------------------*/
182+
$--header-padding: 0 20px !default;
183+
184+
/* Footer
185+
--------------------------*/
186+
$--footer-padding: 0 20px !default;
187+
188+
/* Content
189+
--------------------------*/
190+
$--content-padding: 20px !default;
191+
192+
/*
193+
Pagination
194+
-------------------- */
195+
196+
$--pagination-color: $--color-text-regular !default;
197+
$--pagination-color-hover: $--color-primary !default;
198+
$--pagination-color-active: $--color-primary !default;
199+
$--pagination-background-active: $--color-primary !default;
200+
$--pagination-background: #f4f4f5 !default;
201+
202+
/*
203+
Message
204+
-------------------- */
205+
$--message-min-width: 380px;
206+
$--message-border-color: $--color-line-secondary;
207+
$--message-background-color: #edf2fc;
208+
$--message-info-background-color: #edf2fc;
209+
$--message-info-border-color: $--color-line-secondary;
210+
$--message-info-color: $--color-text-secondary;
211+
$--message-warning-background-color: #fdf6ec;
212+
$--message-warning-border-color: #faecd8;
213+
$--message-warning-color: $--color-warning;
214+
$--message-error-background-color: #fef0f0;
215+
$--message-error-border-color: #fde2e2;
216+
$--message-error-color: $--color-danger;
217+
$--message-success-background-color: #f0f9eb;
218+
$--message-success-border-color: #e1f3d8;
219+
$--message-success-color: $--color-success;
220+
$--message-close-color: #c2c6ce;

0 commit comments

Comments
 (0)