Skip to content

Commit 7df8b3e

Browse files
dai-sikidai-siki
committed
'1.1.0'
1 parent e481d94 commit 7df8b3e

File tree

8 files changed

+207
-97
lines changed

8 files changed

+207
-97
lines changed

‎README.md

+43-18
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@
33
A file upload component for vue. (vue文件上传组件)
44

55

6+
## Change log (更新日志)
7+
#### @1.1.0
8+
- 多语言支持 langType: zh/en
9+
- 调整了Props命名 {otherParams => params, langConf => langExt}
10+
11+
612
## Demo（示例）
713
[Click me （点我）](http://dai-siki.github.io/vue-upload-file/example/demo.html).
814

@@ -30,26 +36,41 @@ $ npm install vue-upload-file
3036
| key | | 0 | 类似于id，触发事件会带上（如果一个页面多个图片上传控件，可以做区分 |
3137
| value | Boolean | | 是否显示控件 |
3238
| url | String | '' | 上传地址 |
33-
| otherParams | Object | null | 要附带的其他数据，如 {k:v} |
39+
| params | Object | null | 要附带的其他数据，如 {k:v} |
3440
| maxSize | Number | 2048 | 单文件大小限制（kb） |
3541
| onlyImg | Boolean | false | 仅限图片 |
3642
| onlySingle | Boolean | false | 仅限单文件上传 |
37-
| langConf | Object | defaultLang | 语言包配置 |
43+
| langType | String | 'zh' | zh/en 语言类型 |
44+
| langExt | Object | | 语言包扩展 |
3845

39-
#### Default Lang（默认语言包）
46+
#### Language Package（语言包）
4047
```js
41-
let defaultLang = {
42-
hint: '点击，或将文件拖动至此处',
43-
loading: '正在上传……',
44-
noSupported: '浏览器不支持该功能，请使用IE10以上或其他现代浏览器！',
45-
success: '上传成功',
46-
fail: '上传失败',
47-
error: {
48-
onlyImg: '仅限图片格式',
49-
onlySingle: '仅限单文件上传',
50-
outOfSize: '单文件大小不能超过 ',
51-
}
52-
};
48+
{
49+
zh: {
50+
hint: '点击，或将文件拖动至此处',
51+
loading: '正在上传……',
52+
noSupported: '浏览器不支持该功能，请使用IE10以上或其他现代浏览器！',
53+
success: '上传成功',
54+
fail: '上传失败',
55+
error: {
56+
onlyImg: '仅限图片格式',
57+
onlySingle: '仅限单文件上传',
58+
outOfSize: '单文件大小不能超过 ',
59+
}
60+
},
61+
en: {
62+
hint: 'Click, or drag the file here',
63+
loading: 'Uploading……',
64+
noSupported: 'Browser does not support, please use IE10+ or other browsers',
65+
success: 'Upload success',
66+
fail: 'Upload failed',
67+
error: {
68+
onlyImg: 'Images only',
69+
onlySingle: 'Single file only',
70+
outOfSize: 'File exceeds size limit: '
71+
}
72+
}
73+
}
5374
```
5475

5576
#### Example(使用示例)
@@ -62,11 +83,15 @@ let defaultLang = {
6283

6384
<div id="app">
6485
<a class="btn" @click="toggleShow">上传图片</a>
65-
<my-upload url="/upload" field="img" key="1" max-size="500"
86+
<my-upload url="/upload"
87+
lang-type="en"
88+
field="img"
89+
key="1"
90+
max-size="500"
6691
:only-single="true"
6792
:value="true"
6893
:only-img="true"
69-
:other-params="otherParams"></my-upload>
94+
:params="params"></my-upload>
7095
</div>
7196

7297
<script>
@@ -78,7 +103,7 @@ let defaultLang = {
78103
el: '#app',
79104
data: {
80105
show: true,
81-
otherParams: {
106+
params: {
82107
token: '123456798',
83108
name: 'img'
84109
}

‎example/demo-src.js

+54-28
Large diffs are not rendered by default.

‎example/demo.html

+39-5
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
}
1313

1414
body {
15-
padding: 50px 20%;
1615
font-family: '微软雅黑';
1716
}
1817

@@ -22,10 +21,25 @@
2221
}
2322

2423
#app {
25-
position: relative;
2624
text-align: center;
2725
}
2826

27+
.item{
28+
position: relative;
29+
width: 100px;
30+
height: 40px;
31+
margin: 150px auto;
32+
}
33+
34+
.btn{
35+
display: block;
36+
width: 100px;
37+
height: 40px;
38+
line-height: 40px;
39+
background-color: #eee;
40+
cursor: pointer;
41+
}
42+
2943
.wrap{
3044
margin-bottom: 5px;
3145
}
@@ -34,9 +48,29 @@
3448

3549
<body>
3650
<div id="app">
37-
<a class="btn" @click="toggleShow">上传图片</a>
38-
<my-upload url="https://httpbin.org/post" :only-single="true"
39-
:value="show" field="img" key="0" max-size="500" :only-img="true" :other-params="otherParams"></my-upload>
51+
<div class="item">
52+
<a class="btn" @click="toggleShow1">上传图片</a>
53+
<my-upload url="https://httpbin.org/post"
54+
:only-single="true"
55+
:value="show1"
56+
field="img"
57+
key="0"
58+
max-size="2048"
59+
:only-img="true"
60+
:params="otherParams"></my-upload>
61+
</div>
62+
<div class="item">
63+
<a class="btn" @click="toggleShow2">Upload</a>
64+
<my-upload url="https://httpbin.org/post"
65+
lang-type="en"
66+
:only-single="true"
67+
:value="show2"
68+
field="img"
69+
key="0"
70+
max-size="2048"
71+
:only-img="true"
72+
:params="otherParams"></my-upload>
73+
</div>
4074
</div>
4175

4276
<script src="demo-src.js"></script>

‎example/demo.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import myUpload from '../upload.vue';
66
new Vue({
77
el: '#app',
88
data: {
9-
show: true,
9+
show1: false,
10+
show2: false,
1011
otherParams: {
1112
token: '123456798',
1213
name: 'img'
@@ -16,8 +17,11 @@ new Vue({
1617
'my-upload': myUpload
1718
},
1819
methods: {
19-
toggleShow() {
20-
this.show = !this.show;
20+
toggleShow1() {
21+
this.show1 = !this.show1;
22+
},
23+
toggleShow2() {
24+
this.show2 = !this.show2;
2125
}
2226
},
2327
events: {

‎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.5",
3+
"version": "1.1.0",
44
"description": "A file upload component for vue. (vue文件上传组件)",
55
"main": "upload.vue",
66
"scripts": {

‎scss/upload.scss

+7-7
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ $c_error: #d10;
1010
}
1111

1212
100% {
13-
background-position: 40px 0;
13+
background-position: 10px 0;
1414
}
1515
}
1616
@keyframes vue_upload {
@@ -109,28 +109,28 @@ $c_error: #d10;
109109

110110
.vuf-progress-wrap {
111111
display: block;
112-
background-color: rgba(#000, 0.15);
112+
background-color: rgba(#000, 0.14);
113113

114114
.vuf-progress {
115115
position: relative;
116116
margin-top: 12px;
117117
display: block;
118-
height: 2px;
118+
height: 3px;
119119
background-color: $c_succ;
120120
box-shadow: 0 1px 3px 0 rgba($c_succ, 0.3);
121121
transition: width 0.5s ease;
122122
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);
123-
background-size: 40px 40px;
124-
animation: vue_upload_progress 0.5s ease infinite;
123+
background-size: 10px 10px;
124+
animation: vue_upload_progress 0.3s linear infinite;
125125

126126
&::after {
127127
content: '';
128128
position: absolute;
129129
display: block;
130130
top: -2px;
131131
right: -2px;
132-
width: 4px;
133-
height: 4px;
132+
width: 5px;
133+
height: 5px;
134134
border: 1px solid rgba(#fff, 0.6);
135135
box-shadow: 0 1px 4px 0 rgba($c_succ, 0.7);
136136
border-radius: 100%;

‎upload.css

+9-9
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
0% {
33
background-position: 0 0; }
44
100% {
5-
background-position: 40px 0; } }
5+
background-position: 10px 0; } }
66

77
@keyframes vue_upload_progress {
88
0% {
99
background-position: 0 0; }
1010
100% {
11-
background-position: 40px 0; } }
11+
background-position: 10px 0; } }
1212

1313
@-webkit-keyframes vue_upload {
1414
0% {
@@ -101,30 +101,30 @@
101101
line-height: 30px; }
102102
.vue-upload-file .vuf-drop-area .vuf-progress-wrap {
103103
display: block;
104-
background-color: rgba(0, 0, 0, 0.15); }
104+
background-color: rgba(0, 0, 0, 0.14); }
105105
.vue-upload-file .vuf-drop-area .vuf-progress-wrap .vuf-progress {
106106
position: relative;
107107
margin-top: 12px;
108108
display: block;
109-
height: 2px;
109+
height: 3px;
110110
background-color: #4a7;
111111
-webkit-box-shadow: 0 1px 3px 0 rgba(68, 170, 119, 0.3);
112112
box-shadow: 0 1px 3px 0 rgba(68, 170, 119, 0.3);
113113
-webkit-transition: width 0.5s ease;
114114
transition: width 0.5s ease;
115115
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);
116116
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);
117-
background-size: 40px 40px;
118-
-webkit-animation: vue_upload_progress 0.5s ease infinite;
119-
animation: vue_upload_progress 0.5s ease infinite; }
117+
background-size: 10px 10px;
118+
-webkit-animation: vue_upload_progress 0.3s linear infinite;
119+
animation: vue_upload_progress 0.3s linear infinite; }
120120
.vue-upload-file .vuf-drop-area .vuf-progress-wrap .vuf-progress::after {
121121
content: '';
122122
position: absolute;
123123
display: block;
124124
top: -2px;
125125
right: -2px;
126-
width: 4px;
127-
height: 4px;
126+
width: 5px;
127+
height: 5px;
128128
border: 1px solid rgba(255, 255, 255, 0.6);
129129
-webkit-box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
130130
box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);

0 commit comments

Comments
 (0)