Skip to content

Commit d55bbdd

Browse files
dai-sikidai-siki
committed
进度条样式优化
1 parent 766148f commit d55bbdd

File tree

7 files changed

+89
-84
lines changed

7 files changed

+89
-84
lines changed

‎README.md

+15-21
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,29 @@
11
# vue-upload-file
22

3-
a file upload component for vue. (vue文件上传组件)
3+
A file upload component for vue. (vue文件上传组件)
44

55

6-
## demo（示例）
6+
## Demo（示例）
7+
[Click me （点我）](http://dai-siki.github.io/vue-upload-file/example/demo.html).
78

8-
[click me（点我）](http://dai-siki.github.io/vue-upload-file/example/demo.html).
99

10+
## Brower compatibility（浏览器兼容）
11+
IE10+
1012

11-
## Env（配置环境）
12-
13-
[email protected] + webpack + es6 + scss
1413

14+
## Env（配置环境）
15+
[email protected] + webpack + es6
1516

16-
## install（安装）
1717

18+
## Install（安装）
1819
#### npm
19-
2020
```shell
2121
$ npm install vue-upload-file
2222
```
2323

2424

2525
## Usage（使用）
26-
27-
#### props（参数）
28-
26+
#### Props（参数）
2927
| 名称 | 类型 | 默认 | 说明 |
3028
| ----------------| ---------------- | ---------------| ------------------------------------------|
3129
| field | String | 'upload' | 域，上传文件name，触发事件会带上（如果一个页面多个图片上传控件，可以做区分 |
@@ -38,25 +36,22 @@ $ npm install vue-upload-file
3836
| onlySingle | Boolean | false | 仅限单文件上传 |
3937
| langConf | Object | defaultLang | 语言包配置 |
4038

41-
#### default langConf（默认语言包）
39+
#### Default Lang（默认语言包）
4240
```js
43-
4441
let defaultLang = {
4542
hint: '点击，或将文件拖动至此处',
4643
loading: '正在上传……',
47-
noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
44+
noSupported: '浏览器不支持该功能，请使用IE10以上或其他现代浏览器！',
4845
success: '上传成功',
4946
error: {
5047
onlyImg: '仅限图片格式',
5148
onlySingle: '仅限单文件上传',
5249
outOfSize: '单文件大小不能超过 ',
5350
}
5451
};
55-
5652
```
5753

58-
#### example(使用示例)
59-
54+
#### Example(使用示例)
6055
```html
6156
<style media="screen">
6257
#app {
@@ -99,13 +94,13 @@ let defaultLang = {
9994
/**
10095
* 上传成功
10196
*
102-
* [param] data 返回的数据
97+
* [param] jsonData 返回的数据（-----注意：已进行json转码-----）
10398
* [param] field 你设置的域
10499
* [param] key 你设置的键
105100
*/
106-
uploadSuccess(data, field, key){
101+
uploadSuccess(jsonData, field, key){
107102
console.log('-------- 上传成功 --------');
108-
console.log(data);
103+
console.log(jsonData);
109104
console.log('field: ' + field);
110105
console.log('key: ' + key);
111106
},
@@ -126,5 +121,4 @@ let defaultLang = {
126121
});
127122
128123
</script>
129-
130124
```

‎example/demo-src.js

+3-3
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@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 z-index: 999;\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", ""]);
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 z-index: 999;\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-wrap[_v-1e700349] {\n display: block;\n background-color: rgba(0, 0, 0, 0.15); }\n .vue-upload-file .vuf-drop-area .vuf-progress-wrap .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-wrap .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

@@ -18911,7 +18911,7 @@
1891118911
lang = {
1891218912
hint: '点击，或将文件拖动至此处',
1891318913
loading: '正在上传……',
18914-
noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
18914+
noSupported: '浏览器不支持该功能，请使用IE10以上或其他现代浏览器！',
1891518915
success: '上传成功',
1891618916
error: {
1891718917
onlyImg: '仅限图片格式',
@@ -21150,7 +21150,7 @@
2115021150
/* 398 */
2115121151
/***/ function(module, exports) {
2115221152

21153-
module.exports = "\n<div class=\"vue-upload-file\" v-show=\"value\" _v-1e700349=\"\">\n\t<div class=\"vuf-drop-area\" @click=\"handleClick\" @dragleave=\"handleDragleave\" @dragover=\"handleDragover\" @dragenter=\"handleDragenter\" @drop=\"handleDrop\" _v-1e700349=\"\">\n\t\t<i class=\"vuf-icon1\" v-show=\"loading != 1\" _v-1e700349=\"\">\n\t\t\t<i class=\"vuf-icon1-arrow\" _v-1e700349=\"\"></i>\n\t\t\t<i class=\"vuf-icon1-body\" _v-1e700349=\"\"></i>\n\t\t\t<i class=\"vuf-icon1-bottom\" _v-1e700349=\"\"></i>\n\t\t</i>\n\t\t<span class=\"vuf-hint\" v-show=\"loading !== 1\" _v-1e700349=\"\">{{ lang.hint }}</span>\n\t\t<span class=\"vuf-loading\" v-show=\"loading === 1\" _v-1e700349=\"\">{{ lang.loading }}</span>\n\t\t<span class=\"vuf-progress\" v-show=\"loading === 1\" :style=\"progressStyle\" _v-1e700349=\"\"></span>\n\t\t<span class=\"vuf-no-supported-hint\" v-show=\"!isSupported\" _v-1e700349=\"\">{{ lang.noSupported }}</span>\n\t\t<input type=\"file\" v-show=\"false\" @change=\"handleChange\" v-el:fileinput=\"\" _v-1e700349=\"\">\n\t</div>\n\t<div class=\"vuf-error\" v-show=\"hasError\" _v-1e700349=\"\">\n\t\t<i class=\"vuf-icon2\" _v-1e700349=\"\"></i>\n\t\t{{ errorMsg }}\n\t</div>\n\t<div class=\"vuf-success\" v-show=\"loading === 2\" _v-1e700349=\"\">\n\t\t<i class=\"vuf-icon3\" _v-1e700349=\"\"></i>\n\t\t{{ lang.success }}\n\t</div>\n</div>\n\n";
21153+
module.exports = "\n<div class=\"vue-upload-file\" v-show=\"value\" _v-1e700349=\"\">\n\t<div class=\"vuf-drop-area\" @click=\"handleClick\" @dragleave=\"handleDragleave\" @dragover=\"handleDragover\" @dragenter=\"handleDragenter\" @drop=\"handleDrop\" _v-1e700349=\"\">\n\t\t<i class=\"vuf-icon1\" v-show=\"loading != 1\" _v-1e700349=\"\">\n\t\t\t<i class=\"vuf-icon1-arrow\" _v-1e700349=\"\"></i>\n\t\t\t<i class=\"vuf-icon1-body\" _v-1e700349=\"\"></i>\n\t\t\t<i class=\"vuf-icon1-bottom\" _v-1e700349=\"\"></i>\n\t\t</i>\n\t\t<span class=\"vuf-hint\" v-show=\"loading !== 1\" _v-1e700349=\"\">{{ lang.hint }}</span>\n\t\t<span class=\"vuf-loading\" v-show=\"loading === 1\" _v-1e700349=\"\">{{ lang.loading }}</span>\n\t\t<div class=\"vuf-progress-wrap\" v-show=\"loading === 1\" _v-1e700349=\"\">\n\t\t\t<span class=\"vuf-progress\" :style=\"progressStyle\" _v-1e700349=\"\"></span>\n\t\t</div>\n\t\t<span class=\"vuf-no-supported-hint\" v-show=\"!isSupported\" _v-1e700349=\"\">{{ lang.noSupported }}</span>\n\t\t<input type=\"file\" v-show=\"false\" @change=\"handleChange\" v-el:fileinput=\"\" _v-1e700349=\"\">\n\t</div>\n\t<div class=\"vuf-error\" v-show=\"hasError\" _v-1e700349=\"\">\n\t\t<i class=\"vuf-icon2\" _v-1e700349=\"\"></i>\n\t\t{{ errorMsg }}\n\t</div>\n\t<div class=\"vuf-success\" v-show=\"loading === 2\" _v-1e700349=\"\">\n\t\t<i class=\"vuf-icon3\" _v-1e700349=\"\"></i>\n\t\t{{ lang.success }}\n\t</div>\n</div>\n\n";
2115421154

2115521155
/***/ }
2115621156
/******/ ]);

‎gulpfile.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ gulp.task('serve', function() {
6666
}
6767
});
6868
gulp.watch([
69-
'./example/demo.js', './*.vue', './scss/*.scss'
69+
'./example/demo.js', './*.vue', './*.css'
7070
], ['js']);
7171
gulp.watch(['./scss/*.scss'], ['css']);
7272
gulp.watch([

‎package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-upload-file",
3-
"version": "1.0.2",
3+
"version": "1.0.3",
44
"description": "a file upload component for vue. (vue文件上传组件)",
55
"main": "upload.vue",
66
"scripts": {
@@ -14,7 +14,9 @@
1414
"vue-file-upload",
1515
"vue-upload",
1616
"vue-uploader",
17-
"vue-image-upload"
17+
"vue-image-upload",
18+
"图片上传",
19+
"文件上传"
1820
],
1921
"author": "dai-siki",
2022
"license": "ISC",

0 commit comments

Comments
 (0)