Skip to content

Commit ddbd3b9

Browse files
dai-sikidai-siki
committed
1.0.1
1 parent e3a9692 commit ddbd3b9

File tree

7 files changed

+57
-27
lines changed

7 files changed

+57
-27
lines changed

Diff for: ‎example/demo-src.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -18553,7 +18553,7 @@
1855318553

1855418554

1855518555
// module
18556-
exports.push([module.id, "@-webkit-keyframes vue-upload-progress {\n 0% {\n background-position: 0 0; }\n 100% {\n background-position: 60px 0; } }\n\n@-webkit-keyframes vue-upload {\n 0% {\n opacity: 0;\n -webkit-transform: scale(0) translatey(-60px);\n transform: scale(0) translatey(-60px); }\n 100% {\n opacity: 1;\n -webkit-transform: scale(1) translatey(0);\n transform: scale(1) translatey(0); } }\n\n.vue-upload-file[_v-1e700349] {\n position: absolute;\n display: block;\n box-sizing: border-box;\n left: 50%;\n margin-top: 12px;\n margin-left: -140px;\n padding: 12px 16px;\n width: 280px;\n background-color: #fff;\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);\n border-top: 2px solid rgba(0, 0, 0, 0.8);\n -webkit-animation: vue-upload 0.15s ease-in;\n animation: vue-upload 0.15s ease-in; }\n .vue-upload-file[_v-1e700349]::before {\n position: absolute;\n content: '';\n top: -8px;\n left: 132px;\n width: 0;\n height: 0;\n border-bottom: 7px solid rgba(0, 0, 0, 0.8);\n border-left: 7px solid transparent;\n border-right: 7px solid transparent; }\n .vue-upload-file .vuf-drop-area[_v-1e700349] {\n position: relative;\n padding: 10px;\n height: 60px;\n background-color: rgba(0, 0, 0, 0.03);\n text-align: center;\n border: 1px dashed #ddd; }\n .vue-upload-file .vuf-drop-area .vuf-icon1[_v-1e700349] {\n display: block;\n margin: 0 auto 6px auto;\n width: 32px;\n height: 32px;\n overflow: hidden; }\n .vue-upload-file .vuf-drop-area .vuf-icon1 .vuf-icon1-arrow[_v-1e700349] {\n display: block;\n margin: 0 auto;\n width: 0;\n height: 0;\n border-bottom: 11.2px solid #999;\n border-left: 11.2px solid transparent;\n border-right: 11.2px solid transparent; }\n .vue-upload-file .vuf-drop-area .vuf-icon1 .vuf-icon1-body[_v-1e700349] {\n display: block;\n width: 9.6px;\n height: 11.2px;\n margin: 0 auto;\n background-color: #999; }\n .vue-upload-file .vuf-drop-area .vuf-icon1 .vuf-icon1-bottom[_v-1e700349] {\n box-sizing: border-box;\n display: block;\n height: 9.6px;\n border: 5px solid #999;\n border-top: none; }\n .vue-upload-file .vuf-drop-area .vuf-hint[_v-1e700349] {\n font-size: 14px;\n color: #999; }\n .vue-upload-file .vuf-drop-area .vuf-loading[_v-1e700349] {\n font-size: 16px;\n color: #999;\n line-height: 30px; }\n .vue-upload-file .vuf-drop-area .vuf-progress[_v-1e700349] {\n position: relative;\n margin-top: 12px;\n display: block;\n height: 2px;\n background-color: #4a7;\n box-shadow: 0 1px 3px 0 rgba(68, 170, 119, 0.3);\n -webkit-transition: width 0.5s ease;\n transition: width 0.5s ease;\n background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);\n background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);\n -webkit-animation: vue-upload-progress 0.5s ease infinite;\n animation: vue-upload-progress 0.5s ease infinite; }\n .vue-upload-file .vuf-drop-area .vuf-progress[_v-1e700349]::after {\n content: '';\n position: absolute;\n display: block;\n top: -2px;\n right: -2px;\n width: 4px;\n height: 4px;\n border: 1px solid rgba(255, 255, 255, 0.6);\n box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);\n border-radius: 100%;\n background-color: #4a7; }\n .vue-upload-file .vuf-drop-area .vuf-no-supported-hint[_v-1e700349] {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n padding: 10px 0;\n width: 100%;\n height: 60px;\n line-height: 30px;\n background-color: #eee;\n text-align: center;\n color: #888;\n font-size: 14px; }\n .vue-upload-file .vuf-drop-area[_v-1e700349]:hover {\n cursor: pointer;\n border-color: #ccc;\n background-color: rgba(0, 0, 0, 0.06); }\n .vue-upload-file .vuf-drop-area:hover .vuf-hint[_v-1e700349] {\n color: #777; }\n .vue-upload-file .vuf-error[_v-1e700349], .vue-upload-file .vuf-success[_v-1e700349] {\n display: block;\n font-size: 14px;\n line-height: 24px;\n height: 24px;\n color: #d10;\n text-align: center;\n vertical-align: top; }\n .vue-upload-file .vuf-success[_v-1e700349] {\n color: #4a7; }\n .vue-upload-file .vuf-icon3[_v-1e700349] {\n position: relative;\n display: inline-block;\n width: 20px;\n height: 20px;\n top: 4px; }\n .vue-upload-file .vuf-icon3[_v-1e700349]::after {\n position: absolute;\n top: 3px;\n left: 6px;\n width: 6px;\n height: 10px;\n border-width: 0 2px 2px 0;\n border-color: #4a7;\n border-style: solid;\n -webkit-transform: rotate(45deg);\n content: ''; }\n .vue-upload-file .vuf-icon2[_v-1e700349] {\n position: relative;\n display: inline-block;\n width: 20px;\n height: 20px;\n top: 4px; }\n .vue-upload-file .vuf-icon2[_v-1e700349]::before, .vue-upload-file .vuf-icon2[_v-1e700349]::after {\n content: '';\n position: absolute;\n top: 9px;\n left: 4px;\n width: 13px;\n height: 2px;\n background-color: #d10;\n -webkit-transform: rotate(45deg); }\n .vue-upload-file .vuf-icon2[_v-1e700349]::after {\n -webkit-transform: rotate(-45deg); }\n", ""]);
18556+
exports.push([module.id, "@-webkit-keyframes vue-upload-progress {\n 0% {\n background-position: 0 0; }\n 100% {\n background-position: 60px 0; } }\n\n@keyframes vue-upload-progress {\n 0% {\n background-position: 0 0; }\n 100% {\n background-position: 60px 0; } }\n\n@-webkit-keyframes vue-upload {\n 0% {\n opacity: 0;\n -webkit-transform: scale(0) translatey(-60px);\n transform: scale(0) translatey(-60px); }\n 100% {\n opacity: 1;\n -webkit-transform: scale(1) translatey(0);\n transform: scale(1) translatey(0); } }\n\n@keyframes vue-upload {\n 0% {\n opacity: 0;\n -webkit-transform: scale(0) translatey(-60px);\n transform: scale(0) translatey(-60px); }\n 100% {\n opacity: 1;\n -webkit-transform: scale(1) translatey(0);\n transform: scale(1) translatey(0); } }\n\n.vue-upload-file[_v-1e700349] {\n position: absolute;\n display: block;\n box-sizing: border-box;\n left: 50%;\n margin-top: 12px;\n margin-left: -140px;\n padding: 12px 16px;\n width: 280px;\n background-color: #fff;\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);\n border-top: 2px solid rgba(0, 0, 0, 0.8);\n -webkit-animation: vue-upload 0.15s ease-in;\n animation: vue-upload 0.15s ease-in; }\n .vue-upload-file[_v-1e700349]::before {\n position: absolute;\n content: '';\n top: -8px;\n left: 132px;\n width: 0;\n height: 0;\n border-bottom: 7px solid rgba(0, 0, 0, 0.8);\n border-left: 7px solid transparent;\n border-right: 7px solid transparent; }\n .vue-upload-file .vuf-drop-area[_v-1e700349] {\n position: relative;\n padding: 10px;\n height: 60px;\n background-color: rgba(0, 0, 0, 0.03);\n text-align: center;\n border: 1px dashed #ddd; }\n .vue-upload-file .vuf-drop-area .vuf-icon1[_v-1e700349] {\n display: block;\n margin: 0 auto 6px;\n width: 32px;\n height: 32px;\n overflow: hidden; }\n .vue-upload-file .vuf-drop-area .vuf-icon1 .vuf-icon1-arrow[_v-1e700349] {\n display: block;\n margin: 0 auto;\n width: 0;\n height: 0;\n border-bottom: 11.2px solid #999;\n border-left: 11.2px solid transparent;\n border-right: 11.2px solid transparent; }\n .vue-upload-file .vuf-drop-area .vuf-icon1 .vuf-icon1-body[_v-1e700349] {\n display: block;\n width: 9.6px;\n height: 11.2px;\n margin: 0 auto;\n background-color: #999; }\n .vue-upload-file .vuf-drop-area .vuf-icon1 .vuf-icon1-bottom[_v-1e700349] {\n box-sizing: border-box;\n display: block;\n height: 9.6px;\n border: 5px solid #999;\n border-top: none; }\n .vue-upload-file .vuf-drop-area .vuf-hint[_v-1e700349] {\n font-size: 14px;\n color: #999;\n line-height: 30px; }\n .vue-upload-file .vuf-drop-area .vuf-loading[_v-1e700349] {\n font-size: 16px;\n color: #999;\n line-height: 30px; }\n .vue-upload-file .vuf-drop-area .vuf-progress[_v-1e700349] {\n position: relative;\n margin-top: 12px;\n display: block;\n height: 2px;\n background-color: #4a7;\n box-shadow: 0 1px 3px 0 rgba(68, 170, 119, 0.3);\n -webkit-transition: width 0.5s ease;\n transition: width 0.5s ease;\n background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);\n background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);\n -webkit-animation: vue-upload-progress 0.5s ease infinite;\n animation: vue-upload-progress 0.5s ease infinite; }\n .vue-upload-file .vuf-drop-area .vuf-progress[_v-1e700349]::after {\n content: '';\n position: absolute;\n display: block;\n top: -2px;\n right: -2px;\n width: 4px;\n height: 4px;\n border: 1px solid rgba(255, 255, 255, 0.6);\n box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);\n border-radius: 100%;\n background-color: #4a7; }\n .vue-upload-file .vuf-drop-area .vuf-no-supported-hint[_v-1e700349] {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n padding: 10px 0;\n width: 100%;\n height: 60px;\n line-height: 30px;\n background-color: #eee;\n text-align: center;\n color: #888;\n font-size: 14px; }\n .vue-upload-file .vuf-drop-area[_v-1e700349]:hover {\n cursor: pointer;\n border-color: #ccc;\n background-color: rgba(0, 0, 0, 0.06); }\n .vue-upload-file .vuf-drop-area:hover .vuf-hint[_v-1e700349] {\n color: #777; }\n .vue-upload-file .vuf-error[_v-1e700349],\n .vue-upload-file .vuf-success[_v-1e700349] {\n display: block;\n font-size: 14px;\n line-height: 24px;\n height: 24px;\n color: #d10;\n text-align: center;\n vertical-align: top; }\n .vue-upload-file .vuf-success[_v-1e700349] {\n color: #4a7; }\n .vue-upload-file .vuf-icon3[_v-1e700349] {\n position: relative;\n display: inline-block;\n width: 20px;\n height: 20px;\n top: 4px; }\n .vue-upload-file .vuf-icon3[_v-1e700349]::after {\n position: absolute;\n top: 3px;\n left: 6px;\n width: 6px;\n height: 10px;\n border-width: 0 2px 2px 0;\n border-color: #4a7;\n border-style: solid;\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n content: ''; }\n .vue-upload-file .vuf-icon2[_v-1e700349] {\n position: relative;\n display: inline-block;\n width: 20px;\n height: 20px;\n top: 4px; }\n .vue-upload-file .vuf-icon2[_v-1e700349]::after, .vue-upload-file .vuf-icon2[_v-1e700349]::before {\n content: '';\n position: absolute;\n top: 9px;\n left: 4px;\n width: 13px;\n height: 2px;\n background-color: #d10;\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg); }\n .vue-upload-file .vuf-icon2[_v-1e700349]::after {\n -webkit-transform: rotate(-45deg);\n transform: rotate(-45deg); }\n", ""]);
1855718557

1855818558
// exports
1855918559

@@ -19072,7 +19072,6 @@
1907219072
}
1907319073
};
1907419074
client.upload.addEventListener("progress", uploadProgress, false);
19075-
client.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=utf-8');
1907619075
client.send(fmData);
1907719076
}).then(function (resData) {
1907819077
that.loading = 2;

Diff for: ‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-upload-file",
3-
"version": "1.0.0",
3+
"version": "1.0.1",
44
"description": "a file upload component for vue. (vue文件上传组件)",
55
"main": "upload.vue",
66
"scripts": {

Diff for: ‎screenshot/01.png

-10.7 KB
Binary file not shown.

Diff for: ‎screenshot/02.png

-7.18 KB
Binary file not shown.

Diff for: ‎scss/upload.scss

+24-17
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,21 @@ $i_h: 32px;
44
$c_succ: #4a7;
55
$c_warn: #cc0;
66
$c_error: #d10;
7+
@keyframes vue-upload-progress {
8+
0% {
9+
background-position: 0 0;
10+
}
711

8-
@-webkit-keyframes vue-upload-progress {
9-
0% {background-position: 0 0;}
10-
100% {background-position: 60px 0;}
12+
100% {
13+
background-position: 60px 0;
14+
}
1115
}
12-
13-
@-webkit-keyframes vue-upload {
16+
@keyframes vue-upload {
1417
0% {
1518
opacity: 0;
1619
transform: scale(0) translatey(-60px);
1720
}
21+
1822
100% {
1923
opacity: 1;
2024
transform: scale(1) translatey(0);
@@ -58,7 +62,7 @@ $c_error: #d10;
5862
// 上传图标
5963
.vuf-icon1 {
6064
display: block;
61-
margin: 0 auto 6px auto;
65+
margin: 0 auto 6px;
6266
width: $i_w;
6367
height: $i_h;
6468
overflow: hidden;
@@ -93,6 +97,7 @@ $c_error: #d10;
9397
.vuf-hint {
9498
font-size: 14px;
9599
color: #999;
100+
line-height: 30px;
96101
}
97102

98103
.vuf-loading {
@@ -109,10 +114,10 @@ $c_error: #d10;
109114
background-color: $c_succ;
110115
box-shadow: 0 1px 3px 0 rgba($c_succ, 0.3);
111116
transition: width 0.5s ease;
112-
background-image: linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
117+
background-image: linear-gradient(-45deg, rgba(#fff, 0.2) 25%, transparent 25%, transparent 50%, rgba(#fff, 0.2) 50%, rgba(#fff, 0.2) 75%, transparent 75%, transparent);
113118
animation: vue-upload-progress 0.5s ease infinite;
114119

115-
&::after{
120+
&::after {
116121
content: '';
117122
position: absolute;
118123
display: block;
@@ -153,7 +158,8 @@ $c_error: #d10;
153158
}
154159
}
155160

156-
.vuf-error, .vuf-success {
161+
.vuf-error,
162+
.vuf-success {
157163
display: block;
158164
font-size: 14px;
159165
line-height: 24px;
@@ -168,14 +174,14 @@ $c_error: #d10;
168174
}
169175

170176
// 成功图标
171-
.vuf-icon3{
177+
.vuf-icon3 {
172178
position: relative;
173179
display: inline-block;
174180
width: 20px;
175181
height: 20px;
176182
top: 4px;
177183

178-
&::after{
184+
&::after {
179185
position: absolute;
180186
top: 3px;
181187
left: 6px;
@@ -184,32 +190,33 @@ $c_error: #d10;
184190
border-width: 0 2px 2px 0;
185191
border-color: $c_succ;
186192
border-style: solid;
187-
-webkit-transform: rotate(45deg);
193+
transform: rotate(45deg);
188194
content: '';
189195
}
190196
}
191197

192198
// 错误图标
193-
.vuf-icon2{
199+
.vuf-icon2 {
194200
position: relative;
195201
display: inline-block;
196202
width: 20px;
197203
height: 20px;
198204
top: 4px;
199205

200-
&::before, &::after{
206+
&::after,
207+
&::before {
201208
content: '';
202209
position: absolute;
203210
top: 9px;
204211
left: 4px;
205212
width: 13px;
206213
height: 2px;
207214
background-color: $c_error;
208-
-webkit-transform: rotate(45deg);
215+
transform: rotate(45deg);
209216
}
210217

211-
&::after{
212-
-webkit-transform: rotate(-45deg);
218+
&::after {
219+
transform: rotate(-45deg);
213220
}
214221
}
215222
}

Diff for: ‎upload.css

+30-6
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@
44
100% {
55
background-position: 60px 0; } }
66

7+
@keyframes vue-upload-progress {
8+
0% {
9+
background-position: 0 0; }
10+
100% {
11+
background-position: 60px 0; } }
12+
713
@-webkit-keyframes vue-upload {
814
0% {
915
opacity: 0;
@@ -14,6 +20,16 @@
1420
-webkit-transform: scale(1) translatey(0);
1521
transform: scale(1) translatey(0); } }
1622

23+
@keyframes vue-upload {
24+
0% {
25+
opacity: 0;
26+
-webkit-transform: scale(0) translatey(-60px);
27+
transform: scale(0) translatey(-60px); }
28+
100% {
29+
opacity: 1;
30+
-webkit-transform: scale(1) translatey(0);
31+
transform: scale(1) translatey(0); } }
32+
1733
.vue-upload-file {
1834
position: absolute;
1935
display: block;
@@ -49,7 +65,7 @@
4965
border: 1px dashed #ddd; }
5066
.vue-upload-file .vuf-drop-area .vuf-icon1 {
5167
display: block;
52-
margin: 0 auto 6px auto;
68+
margin: 0 auto 6px;
5369
width: 32px;
5470
height: 32px;
5571
overflow: hidden; }
@@ -76,7 +92,8 @@
7692
border-top: none; }
7793
.vue-upload-file .vuf-drop-area .vuf-hint {
7894
font-size: 14px;
79-
color: #999; }
95+
color: #999;
96+
line-height: 30px; }
8097
.vue-upload-file .vuf-drop-area .vuf-loading {
8198
font-size: 16px;
8299
color: #999;
@@ -127,7 +144,8 @@
127144
background-color: rgba(0, 0, 0, 0.06); }
128145
.vue-upload-file .vuf-drop-area:hover .vuf-hint {
129146
color: #777; }
130-
.vue-upload-file .vuf-error, .vue-upload-file .vuf-success {
147+
.vue-upload-file .vuf-error,
148+
.vue-upload-file .vuf-success {
131149
display: block;
132150
font-size: 14px;
133151
line-height: 24px;
@@ -153,21 +171,27 @@
153171
border-color: #4a7;
154172
border-style: solid;
155173
-webkit-transform: rotate(45deg);
174+
-ms-transform: rotate(45deg);
175+
transform: rotate(45deg);
156176
content: ''; }
157177
.vue-upload-file .vuf-icon2 {
158178
position: relative;
159179
display: inline-block;
160180
width: 20px;
161181
height: 20px;
162182
top: 4px; }
163-
.vue-upload-file .vuf-icon2::before, .vue-upload-file .vuf-icon2::after {
183+
.vue-upload-file .vuf-icon2::after, .vue-upload-file .vuf-icon2::before {
164184
content: '';
165185
position: absolute;
166186
top: 9px;
167187
left: 4px;
168188
width: 13px;
169189
height: 2px;
170190
background-color: #d10;
171-
-webkit-transform: rotate(45deg); }
191+
-webkit-transform: rotate(45deg);
192+
-ms-transform: rotate(45deg);
193+
transform: rotate(45deg); }
172194
.vue-upload-file .vuf-icon2::after {
173-
-webkit-transform: rotate(-45deg); }
195+
-webkit-transform: rotate(-45deg);
196+
-ms-transform: rotate(-45deg);
197+
transform: rotate(-45deg); }

Diff for: ‎upload.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ export default {
240240
}
241241
};
242242
client.upload.addEventListener("progress", uploadProgress, false); //监听进度
243-
client.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=utf-8');
243+
// client.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=utf-8');
244244
client.send(fmData);
245245
}).then(
246246
// 上传成功

0 commit comments

Comments
 (0)