leisure-core 0.1.8 → 0.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +3 -0
- package/le-upload/index.js +7 -0
- package/le-upload/src/main.vue +134 -0
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -27,6 +27,7 @@ import LeImage from "./le-image/index.js";
|
|
|
27
27
|
import LeBackUp from "./le-backup/index.js";
|
|
28
28
|
import LeSeting from "./le-seting/index.js";
|
|
29
29
|
import LeRate from "./le-rate/index.js";
|
|
30
|
+
import LeUpload from "./le-upload/index.js";
|
|
30
31
|
|
|
31
32
|
const components = [
|
|
32
33
|
LeButton,
|
|
@@ -56,6 +57,7 @@ const components = [
|
|
|
56
57
|
LeBackUp,
|
|
57
58
|
LeSeting,
|
|
58
59
|
LeRate,
|
|
60
|
+
LeUpload,
|
|
59
61
|
];
|
|
60
62
|
|
|
61
63
|
const install = function (Vue) {
|
|
@@ -154,4 +156,5 @@ export default {
|
|
|
154
156
|
LeBackUp,
|
|
155
157
|
LeSeting,
|
|
156
158
|
LeRate,
|
|
159
|
+
LeUpload,
|
|
157
160
|
};
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="le-upload-container">
|
|
3
|
+
<el-upload
|
|
4
|
+
class="upload-demo"
|
|
5
|
+
action="#"
|
|
6
|
+
ref="le-upload"
|
|
7
|
+
:multiple="false"
|
|
8
|
+
:limit="limit"
|
|
9
|
+
:accept="accept"
|
|
10
|
+
:http-request="onHttpRequest"
|
|
11
|
+
:on-success="onUploadSuccess"
|
|
12
|
+
:on-remove="onRemove"
|
|
13
|
+
:on-change="onChange"
|
|
14
|
+
:on-exceed="onExceed"
|
|
15
|
+
:on-progress="onDispProgress"
|
|
16
|
+
:before-upload="onBeforeUpload"
|
|
17
|
+
:auto-upload="true"
|
|
18
|
+
>
|
|
19
|
+
<el-button slot="trigger" size="small" type="primary">{{
|
|
20
|
+
BtnSeText
|
|
21
|
+
}}</el-button>
|
|
22
|
+
</el-upload>
|
|
23
|
+
<div v-if="showTip" slot="tip" class="el-upload__tip tip">
|
|
24
|
+
{{ tipText }}
|
|
25
|
+
</div>
|
|
26
|
+
<el-progress
|
|
27
|
+
v-if="showProgress"
|
|
28
|
+
:percentage="pvalue"
|
|
29
|
+
:format="format"
|
|
30
|
+
style="width: 20%"
|
|
31
|
+
></el-progress>
|
|
32
|
+
</div>
|
|
33
|
+
</template>
|
|
34
|
+
<script>
|
|
35
|
+
export default {
|
|
36
|
+
name: "le-upload",
|
|
37
|
+
props: {
|
|
38
|
+
limit: {
|
|
39
|
+
type: Number,
|
|
40
|
+
default: 1,
|
|
41
|
+
},
|
|
42
|
+
accept: {
|
|
43
|
+
type: String,
|
|
44
|
+
default: ".xlsx,.xls",
|
|
45
|
+
},
|
|
46
|
+
BtnSeText: {
|
|
47
|
+
type: String,
|
|
48
|
+
default: "1.选择excell表",
|
|
49
|
+
},
|
|
50
|
+
BtnUpText: {
|
|
51
|
+
type: String,
|
|
52
|
+
default: "2.上传服务器",
|
|
53
|
+
},
|
|
54
|
+
showTip: {
|
|
55
|
+
type: Boolean,
|
|
56
|
+
default: true,
|
|
57
|
+
},
|
|
58
|
+
tipText: {
|
|
59
|
+
type: String,
|
|
60
|
+
default: "",
|
|
61
|
+
},
|
|
62
|
+
maxSize: {
|
|
63
|
+
type: Number,
|
|
64
|
+
default: 100,
|
|
65
|
+
},
|
|
66
|
+
},
|
|
67
|
+
data() {
|
|
68
|
+
return {
|
|
69
|
+
showProgress: false,
|
|
70
|
+
pvalue: 0,
|
|
71
|
+
};
|
|
72
|
+
},
|
|
73
|
+
mounted() {},
|
|
74
|
+
methods: {
|
|
75
|
+
onChange(file, fileList) {},
|
|
76
|
+
onRemove(file, fileList) {},
|
|
77
|
+
format(percentage) {
|
|
78
|
+
return percentage === 100 ? "导入完成" : `${percentage}%`;
|
|
79
|
+
},
|
|
80
|
+
onDispProgress(info) {
|
|
81
|
+
let num = ((info.loaded / info.total) * 100) | 0;
|
|
82
|
+
this.pvalue = num;
|
|
83
|
+
},
|
|
84
|
+
onExceed() {
|
|
85
|
+
this.$message.warning(`每次最多只能使用${this.limit}个文件!`);
|
|
86
|
+
},
|
|
87
|
+
onHttpRequest({ file, onProgress, onSuccess }) {
|
|
88
|
+
this.showProgress = true;
|
|
89
|
+
let formData = new FormData();
|
|
90
|
+
formData.append("file", file);
|
|
91
|
+
this.$emit(
|
|
92
|
+
"upload",
|
|
93
|
+
formData,
|
|
94
|
+
(progress) => {
|
|
95
|
+
onProgress(progress);
|
|
96
|
+
},
|
|
97
|
+
(res) => {
|
|
98
|
+
onSuccess(res);
|
|
99
|
+
},
|
|
100
|
+
(error) => {
|
|
101
|
+
this.onError(error);
|
|
102
|
+
}
|
|
103
|
+
);
|
|
104
|
+
},
|
|
105
|
+
onUploadSuccess(res) {
|
|
106
|
+
this.$message.success(res.data.info);
|
|
107
|
+
this.$refs["le-upload"].clearFiles();
|
|
108
|
+
},
|
|
109
|
+
onBeforeUpload(file) {
|
|
110
|
+
const isLimit = file.size / 1024 / 1024 < this.maxSize;
|
|
111
|
+
if (!isLimit) {
|
|
112
|
+
this.$message.error(`文件大小不能超过${this.maxSize}M`);
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
onError(error) {
|
|
117
|
+
this.$refs["le-upload"].clearFiles();
|
|
118
|
+
this.showProgress = false;
|
|
119
|
+
console.log(error);
|
|
120
|
+
},
|
|
121
|
+
},
|
|
122
|
+
};
|
|
123
|
+
</script>
|
|
124
|
+
<style lang="scss" scoped>
|
|
125
|
+
.le-upload-container {
|
|
126
|
+
display: flex;
|
|
127
|
+
display: -webkit-flex;
|
|
128
|
+
align-items: center;
|
|
129
|
+
|
|
130
|
+
.tip {
|
|
131
|
+
margin-left: 10px !important;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
</style>
|