Skip to content

Commit 08375ee

Browse files
JackPuJackPu
committed
add new files
1 parent 2b84046 commit 08375ee

File tree

7 files changed

+197
-48
lines changed

7 files changed

+197
-48
lines changed

‎site/client/components/doc/cn/Attributes.vue‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
<h3>基本属性</h3>
44
<p>Vue-core-image-upload 提供了很多可配置的选项，从而希望尽可能的满足开发者的需求。</p>
55
<p>Code Example</p>
6-
<pre v-highlightjs><code class="html">&lt;vue-core-image-upload
7-
:class="['btn', 'btn-primary']"
8-
:crop="false"
9-
@imageuploaded="imageuploaded"
10-
:data="data"
11-
:max-file-size="5242880"
6+
<pre v-highlightjs><code class="html">&lt;vue-core-image-upload
7+
:class="['btn', 'btn-primary']"
8+
:crop="false"
9+
@imageuploaded="imageuploaded"
10+
:data="data"
11+
:max-file-size="5242880"
1212
url="http://101.198.151.190/api/upload.php" &gt;
1313
&lt;/vue-core-image-upload&gt;</code></pre>
1414
<p>其中 class、url、max-file-size均是插件支持的属性，你可以具体查看这张表格:</p>
@@ -89,6 +89,12 @@
8989
<td>'image/*' / 'image/jpg,image/jpeg,image/png'</td>
9090
<td>赋予上传file的接受类型</td>
9191
</tr>
92+
<tr>
93+
<td>compress</td>
94+
<td align="left">Number</td>
95+
<td>50</td>
96+
<td>设置本地图片压缩的质量</td>
97+
</tr>
9298
<tr>
9399
<td>isXhr</td>
94100
<td align="left">Boolean</td>
@@ -110,4 +116,4 @@
110116
<a href="">具体使用可以看这里</a>
111117
<p></p>
112118
</div>
113-
</template>
119+
</template>

‎site/client/components/doc/cn/CompressImage.vue‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,28 @@
11
<template>
22
<div class="components">
33
<h3>压缩图片</h3>
4-
<p>通过设置<code>compress</code>的数值，你可以在上传之前进行图片的压缩。其中 compress 为 0 表示不压缩，数据越大，这图片的质量越差，不大于100。</p>
4+
<p>设置<code>compress</code>的数值，你可以在上传之前进行图片的本地压缩。其中 compress 为 0 表示不压缩，数据越大，图片的质量越差，且最大值不能大于100。</p>
55
<div class="center">
66
<p><img width="300" :src="src" /></p>
77
<vue-core-image-upload
88
:class="['btn', 'btn-primary']"
9-
:crop="false"
10-
@imagechanged="imageChanged"
119
@imageuploaded="imageUploded"
1210
:max-file-size="5242880"
1311
compress="50"
1412
url="http://101.198.151.190/api/upload.php" >
1513
</vue-core-image-upload>
1614
</div>
15+
<h4>代码示例</h4>
16+
<pre v-highlightjs><code class="html">&lt;vue-core-image-upload
17+
:class="['btn', 'btn-primary']"
18+
@imageuploaded="imageUploded"
19+
:max-file-size="5242880"
20+
compress="50" // 设置压缩比例
21+
url="http://101.198.151.190/api/upload.php" &gt;
22+
&lt;/vue-core-image-upload&gt;</code></pre>
1723
</div>
1824
</template>
1925

20-
2126
<script>
2227
2328
import VueCoreImageUpload from '../../../../src/vue-core-image-upload.vue'
@@ -32,9 +37,6 @@ export default {
3237
},
3338
3439
methods: {
35-
imageChanged(files) {
36-
37-
},
3840
imageUploded(res) {
3941
this.src = res.data.src;
4042
}

‎site/client/components/doc/cn/Events.vue‎

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@
1212
<p>当图片上传发生错误的时候触发，会返回错误状态信息</p>
1313
<h5>Code Example</h5>
1414
<div class="center">
15-
<img class="avatar" :src="src" />
15+
<img class="avatar" :src="src" />
1616
</div>
1717
<div class="center">
18-
<vue-core-image-upload
19-
:class="['btn', 'btn-primary']"
18+
<vue-core-image-upload
19+
:class="['btn', 'btn-primary']"
2020
:crop="false"
2121
@imagechanged="imagechanged"
22-
@imageuploading="imageuploading"
23-
@imageuploaded="imageuploaded"
24-
:max-file-size="5242880"
22+
@imageuploading="imageuploading"
23+
@imageuploaded="imageuploaded"
24+
:max-file-size="5242880"
2525
url="http://101.198.151.190/api/upload.php" >
2626
</vue-core-image-upload>
2727
</div>
@@ -46,15 +46,24 @@
4646
</table>
4747
</div>
4848
<p>上面的演示，表示了上传自定义事件的执行状况，参考代码如下：</p>
49+
<pre v-highlightjs><code class="html">&lt;vue-core-image-upload
50+
:class="['btn', 'btn-primary']"
51+
:crop="false"
52+
@imagechanged="imagechanged"
53+
@imageuploading="imageuploading"
54+
@imageuploaded="imageuploaded"
55+
:max-file-size="5242880"
56+
url="http://101.198.151.190/api/upload.php" &gt;
57+
&lt;/vue-core-image-upload&gt;</code></pre>
4958
<pre v-highlightjs><code class="javascript">methods: {
5059
imagechanged() {
51-
this.step += 1;
60+
this.step += 1;
5261
},
53-
62+
5463
imageuploading() {
55-
this.step += 1;
64+
this.step += 1;
5665
},
57-
66+
5867
imageuploaded(res) {
5968
this.step += 1;
6069
this.src = res.data.src;
@@ -78,32 +87,32 @@
7887
</style>
7988

8089
<script>
81-
import VueCoreImageUpload from '../../../../src/vue-core-image-upload.vue'
90+
import VueCoreImageUpload from '../../../../src/vue-core-image-upload.vue'
8291
export default {
8392
components: {
8493
VueCoreImageUpload,
8594
},
86-
95+
8796
data() {
8897
return {
8998
src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
9099
step: 0,
91-
}
100+
}
92101
},
93-
102+
94103
methods: {
95104
imagechanged() {
96-
this.step += 1;
105+
this.step += 1;
97106
},
98-
107+
99108
imageuploading() {
100-
this.step += 1;
109+
this.step += 1;
101110
},
102-
111+
103112
imageuploaded(res) {
104113
this.step += 1;
105114
this.src = res.data.src;
106115
}
107116
}
108117
}
109-
</script>
118+
</script>

‎site/client/components/doc/cn/GetStarted.vue‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,30 @@
22
<div class="components">
33
<h3>快速开始</h3>
44
<p class="user center">
5-
<img class="avatar" :src="src" />
5+
<img class="avatar" :src="src" />
66
</p>
77
<div class="center">
8-
<vue-core-image-upload
9-
:class="['btn', 'btn-primary']"
10-
:crop="false"
11-
@imageuploaded="imageuploaded"
12-
:data="data"
13-
:max-file-size="5242880"
8+
<vue-core-image-upload
9+
:class="['btn', 'btn-primary']"
10+
:crop="false"
11+
@imageuploaded="imageuploaded"
12+
:data="data"
13+
:max-file-size="5242880"
1414
url="http://101.198.151.190/api/upload.php" >
15-
</vue-core-image-upload>
15+
</vue-core-image-upload>
1616
</div>
1717
<h5>Code Example</h5>
1818
<p>使用 npm 安装依赖</p>
1919
<pre v-highlightjs><code class="bash">npm install vue-core-image-upload --save</code></pre>
2020
<p>使用ES2015</p>
2121
<pre v-highlightjs><code class="javascript">&lt;template&gt;
2222
&lt;div class="center"&gt;
23-
&lt;vue-core-image-upload
24-
:class="['btn', 'btn-primary']"
25-
:crop="false"
26-
@imageuploaded="imageuploaded"
27-
:data="data"
28-
:max-file-size="5242880"
23+
&lt;vue-core-image-upload
24+
:class="['btn', 'btn-primary']"
25+
:crop="false"
26+
@imageuploaded="imageuploaded"
27+
:data="data"
28+
:max-file-size="5242880"
2929
url="http://101.198.151.190/api/upload.php" &gt;
3030
&lt;/vue-core-image-upload&gt;
3131
&lt;/div&gt;
@@ -66,7 +66,7 @@ new Vue({
6666
border-radius: 50%;
6767
border: 2px solid rgba(0,0,0,.05);
6868
}
69-
69+
7070
</style>
7171

7272
<script>

‎site/client/components/doc/en/Events.vue‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<template>
2+
<div class="components">
3+
<h3>Custom Events</h3>
4+
<p>It defines different custom event in different upload progress. You can control the files flow via binding some functions.</p>
5+
<h5>imageuploaded</h5>
6+
<p>When image has been uploaded, it call the function you bind. You could recive response from server as an param</p>
7+
<h5>imagechanged</h5>
8+
<p>When input[file] velue has been changed, it call the function you bind. You could recive an file source param</p>
9+
<h5>imageuploading</h5>
10+
<p>When the image is uploading.</p>
11+
<h5>errorhandle</h5>
12+
<p>Whne you meet some error like network error or file size error.</p>
13+
<h5>Code Example</h5>
14+
<div class="center">
15+
<img class="avatar" :src="src" />
16+
</div>
17+
<div class="center">
18+
<vue-core-image-upload
19+
:class="['btn', 'btn-primary']"
20+
:crop="false"
21+
@imagechanged="imagechanged"
22+
@imageuploading="imageuploading"
23+
@imageuploaded="imageuploaded"
24+
:max-file-size="5242880"
25+
url="http://101.198.151.190/api/upload.php" >
26+
</vue-core-image-upload>
27+
</div>
28+
<div>
29+
<table class="m-table bordered">
30+
<thead>
31+
<tr>
32+
<th>Selected</th>
33+
<th>Uplaoding</th>
34+
<th>Finished</th>
35+
</tr>
36+
</thead>
37+
<tbody>
38+
<tr>
39+
<td>
40+
<span class="circle-bar" :class="{'active': step>0}"></span>
41+
</td>
42+
<td><span class="circle-bar" :class="{'active': step>1}"></span></td>
43+
<td><span class="circle-bar" :class="{'active': step>2}"></span></td>
44+
</tr>
45+
</tbody>
46+
</table>
47+
</div>
48+
<p>Code：</p>
49+
<pre v-highlightjs><code class="html">&lt;vue-core-image-upload
50+
:class="['btn', 'btn-primary']"
51+
:crop="false"
52+
@imagechanged="imagechanged"
53+
@imageuploading="imageuploading"
54+
@imageuploaded="imageuploaded"
55+
:max-file-size="5242880"
56+
url="http://101.198.151.190/api/upload.php" &gt;
57+
&lt;/vue-core-image-upload&gt;</code></pre>
58+
<pre v-highlightjs><code class="javascript">methods: {
59+
imagechanged() {
60+
this.step += 1;
61+
},
62+
63+
imageuploading() {
64+
this.step += 1;
65+
},
66+
67+
imageuploaded(res) {
68+
this.step += 1;
69+
this.src = res.data.src;
70+
}
71+
}</code></pre>
72+
<a href="">View code source</a>
73+
</div>
74+
</template>
75+
76+
<style>
77+
.circle-bar{
78+
display: inline-block;
79+
width: 20px;
80+
height: 20px;
81+
border-radius: 10px;
82+
background-color: #999;
83+
}
84+
.circle-bar.active{
85+
background-color: #2ecc71;
86+
}
87+
</style>
88+
89+
<script>
90+
import VueCoreImageUpload from '../../../../src/vue-core-image-upload.vue'
91+
export default {
92+
components: {
93+
VueCoreImageUpload,
94+
},
95+
96+
data() {
97+
return {
98+
src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
99+
step: 0,
100+
}
101+
},
102+
103+
methods: {
104+
imagechanged() {
105+
this.step += 1;
106+
},
107+
imageuploading() {
108+
this.step += 1;
109+
},
110+
111+
imageuploaded(res) {
112+
this.step += 1;
113+
this.src = res.data.src;
114+
}
115+
}
116+
}
117+
</script>

‎site/client/router/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import EnHome from '../components/doc/en/Home.vue';
55
import CnGetStarted from '../components/doc/cn/GetStarted.vue';
66
import CnAttributes from '../components/doc/cn/Attributes.vue';
77
import CnEvents from '../components/doc/cn/Events.vue';
8+
import EnEvents from '../components/doc/en/Events.vue';
89
import CnCropImage from '../components/doc/cn/CropImage.vue';
910
import CnMultipleFile from '../components/doc/cn/MultipleFile.vue';
1011
import CnCompressImage from '../components/doc/cn/CompressImage.vue';
@@ -40,6 +41,10 @@ export default new Router({
4041
path: '/cn/events',
4142
component: CnEvents
4243
},
44+
{
45+
path: '/en/events',
46+
component: EnEvents,
47+
},
4348
{
4449
path: '/cn/crop-image',
4550
component: CnCropImage

‎site/src/vue-core-image-upload.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,16 @@
5656
return this.inputOfFile + '[]';
5757
}
5858
return this.inputOfFile;
59+
},
60+
61+
compress() {
62+
if (this.compress >= 100) {
63+
return 99;
64+
}
65+
if(this.compress <= 0) {
66+
return 0;
67+
}
68+
return this.compress;
5969
}
6070
6171
},

0 commit comments

Comments
 (0)