Skip to content

Commit 92b7547

Browse files
JackPuJackPu
committed
upload new english doc
1 parent 904d092 commit 92b7547

File tree

8 files changed

+290
-37
lines changed

8 files changed

+290
-37
lines changed

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

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,9 @@
11
<template>
22
<div class="components">
33
<h3>快速开始</h3>
4-
<p class="user center">
5-
<img class="avatar" :src="src" />
6-
</p>
7-
<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"
14-
url="http://101.198.151.190/api/upload.php" >
15-
</vue-core-image-upload>
16-
</div>
17-
<h5>Code Example</h5>
184
<p>使用 npm 安装依赖</p>
195
<pre v-highlightjs><code class="bash">npm install vue-core-image-upload --save</code></pre>
20-
<p>使用ES2015</p>
6+
<p>安装完成后，编辑源码</p>
217
<pre v-highlightjs><code class="javascript">&lt;template&gt;
228
&lt;div class="center"&gt;
239
&lt;vue-core-image-upload
@@ -32,28 +18,45 @@
3218
&lt;/template&gt;
3319

3420
&lt;script&gt;
35-
import VueCoreImageUpload from './vue.core.image.upload.vue';
36-
new Vue({
37-
el: '#app',
21+
import VueCoreImageUpload from 'vue-core-image-upload'
22+
23+
export default {
3824
components: {
39-
'vue-core-image-upload': VueCoreImageUpload
25+
'vue-core-image-upload': VueCoreImageUpload,
4026
},
41-
data: {
42-
src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
27+
data() {
28+
return {
29+
src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
30+
}
4331
},
44-
events: {
32+
methods: {
4533
imageuploaded(res) {
4634
if (res.errcode == 0) {
4735
this.src = res.data.src;
4836
}
4937
}
5038
}
51-
});
39+
};
5240
&lt;/script&gt;
5341
</code></pre>
42+
<h5>Code Example</h5>
43+
<p class="user center">
44+
<img class="avatar" :src="src" />
45+
</p>
46+
<div class="center">
47+
<vue-core-image-upload
48+
:class="['btn', 'btn-primary']"
49+
:crop="false"
50+
@imageuploaded="imageuploaded"
51+
:data="data"
52+
:max-file-size="5242880"
53+
url="http://101.198.151.190/api/upload.php" >
54+
</vue-core-image-upload>
55+
</div>
5456
<p>如果我们要使用上传插件，我们首先需要引入我们的组件然后并在<code>components</code>中声明。
5557
实现上传，我们需要定义我们上传的服务器地址<code>url</code>，然后我们需要指定上传完成后触发的方法，也就是<code>@imageuploaded</code>，这样我们才能获取上传完后的数据，从而进行下一步的操作。
5658
</p>
59+
<p><a class="btn btn-info" href="#/cn/attributes">查看详细文档</a></p>
5760
</div>
5861
</template>
5962

@@ -66,11 +69,9 @@ new Vue({
6669
border-radius: 50%;
6770
border: 2px solid rgba(0,0,0,.05);
6871
}
69-
7072
</style>
7173

7274
<script>
73-
import vendor from '../../../lib/vendor'
7475
import VueCoreImageUpload from '../../../../src/vue-core-image-upload.vue'
7576
7677
export default {

‎site/client/components/doc/cn/Attributes.vue‎ renamed to ‎site/client/components/doc/cn/Props.vue‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,13 +107,28 @@
107107
<td>{auth: xxxxx}</td>
108108
<td>设置xhr上传 的header</td>
109109
</tr>
110+
<tr>
111+
<td>data</td>
112+
<td align="left">Object</td>
113+
<td>{auth: xxxxx}</td>
114+
<td>设置附带发送给服务端的数据</td>
115+
</tr>
110116
</tbody>
111117
</table>
112118
</p>
113119
<p>后文会对一些重要的属性进行详细的描述，以及一些其他 Demos 你可以参考左边的导航。</p>
114120
<h4> url </h4>
115121
<p>url 表示我们指定的服务端配置接口地址，插件会将文件使用 Ajax 的形式上传到到你指定的地址服务，然后你可以通过<code>imageuploaded</code>的回调取得服务器的响应的数据。</p>
116-
<a href="">具体使用可以看这里</a>
117-
<p></p>
122+
<h4>inputOfFile</h4>
123+
<p>如果你的服务端端需要指定上传表单file name 的字段，你可以通过<code>inputOfFile</code>设置,只能是字符串如果没有设置，默认发给服务端的字段是<strong>files</strong>。如果你是使用多图片上传的话，字段会变成<strong>files[]</strong>。</p>
124+
<h4>extensions</h4>
125+
<p>限制图片的上传类型，你可以传递一组CSV数据进去比如 'png,jpg,gif'，从而只允许png,jpg,gif的类型图片上传到服务器。</p>
126+
<h4>maxFileSize</h4>
127+
<p>虽然很多时候服务端限制了图片的大小，但是本地同样可以限制上传图片的大小，你可以设置 <code>maxFileSize</code>的值来实现，它的基本单位为字节比如(10485760B = 10M)。</p>
128+
<h4>inputAccept</h4>
129+
<p>赋予上传file的接受类型,它可以帮助你再上传图片选择时，禁用掉不需要的文件，默认值为 image/jpg,image/jpeg,image/png</p>
130+
<h4>isXhr</h4>
131+
<p>我们同样接受取消掉默认的上传，你可以设置<code>isXhr</code>为 false ,自行处理我们获取到文件对象。</p>
132+
<p class="warnning">关于没有涉及到的属性，左边的导航会给出详细说明</p>
118133
</div>
119134
</template>

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

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<template>
2+
<div class="components">
3+
<h3>Get Started</h3>
4+
<p>Use npm to install the module</p>
5+
<pre v-highlightjs><code class="bash">npm install vue-core-image-upload --save</code></pre>
6+
<p>Then edit a vue file</p>
7+
<pre v-highlightjs><code class="javascript">&lt;template&gt;
8+
&lt;div class="center"&gt;
9+
&lt;vue-core-image-upload
10+
:class="['btn', 'btn-primary']"
11+
:crop="false"
12+
@imageuploaded="imageuploaded"
13+
:data="data"
14+
:max-file-size="5242880"
15+
url="http://101.198.151.190/api/upload.php" &gt;
16+
&lt;/vue-core-image-upload&gt;
17+
&lt;/div&gt;
18+
&lt;/template&gt;
19+
20+
&lt;script&gt;
21+
import VueCoreImageUpload from 'vue-core-image-upload'
22+
23+
export default {
24+
components: {
25+
'vue-core-image-upload': VueCoreImageUpload,
26+
},
27+
data() {
28+
return {
29+
src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
30+
}
31+
},
32+
methods: {
33+
imageuploaded(res) {
34+
if (res.errcode == 0) {
35+
this.src = res.data.src;
36+
}
37+
}
38+
}
39+
};
40+
&lt;/script&gt;
41+
</code></pre>
42+
<h5>Code Example</h5>
43+
<p class="user center">
44+
<img class="avatar" :src="src" />
45+
</p>
46+
<div class="center">
47+
<vue-core-image-upload
48+
:class="['btn', 'btn-primary']"
49+
:crop="false"
50+
@imageuploaded="imageuploaded"
51+
:data="data"
52+
:max-file-size="5242880"
53+
url="http://101.198.151.190/api/upload.php" >
54+
</vue-core-image-upload>
55+
</div>
56+
<p>First of all , we need to include out plugin in <code>components</code> . Then we must define the <code>url</code> as your server api ,then we bind a function to
57+
<code>@imageuploaded</code> for handling the server response.
58+
</p>
59+
<p><a class="btn btn-info" href="#/en/attributes">View more details</a></p>
60+
</div>
61+
</template>
62+
63+
<style>
64+
65+
.avatar {
66+
width: 150px;
67+
height: 150px;
68+
margin-bottom: 20px;
69+
border-radius: 50%;
70+
border: 2px solid rgba(0,0,0,.05);
71+
}
72+
</style>
73+
74+
<script>
75+
import VueCoreImageUpload from '../../../../src/vue-core-image-upload.vue'
76+
77+
export default {
78+
components: {
79+
'vue-core-image-upload': VueCoreImageUpload,
80+
},
81+
data() {
82+
return {
83+
src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
84+
}
85+
},
86+
methods: {
87+
imageuploaded(res) {
88+
if (res.errcode == 0) {
89+
this.src = res.data.src;
90+
}
91+
}
92+
}
93+
};
94+
95+
</script>

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

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<template>
2+
<div class="components">
3+
<h3>Props</h3>
4+
<p>Vue-core-image-upload supports many props to meet developers'needs.</p>
5+
<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"
12+
url="http://101.198.151.190/api/upload.php" &gt;
13+
&lt;/vue-core-image-upload&gt;</code></pre>
14+
<p>'class', 'url' and 'max-file-size' are different props. And the table below simply introduces how it work.</p>
15+
<p>
16+
<table class="m-table bordered">
17+
<thead>
18+
<tr>
19+
<th>Props</th>
20+
<th align="left">Data Type</th>
21+
<th>Example</th>
22+
<th>Details</th>
23+
</tr>
24+
</thead>
25+
<tbody>
26+
<tr>
27+
<td>url</td>
28+
<td align="left">String</td>
29+
<td>'/crop.php'</td>
30+
<td>Your server api</td>
31+
</tr>
32+
<tr>
33+
<td>text</td>
34+
<td align="left">String</td>
35+
<td>'Upload Image'</td>
36+
<td>The text of your uploading button</td>
37+
</tr>
38+
<tr>
39+
<td>inputOfFile</td>
40+
<td align="left">String &nbsp; &nbsp;</td>
41+
<td>&nbsp; 'file'</td>
42+
<td>Yout input[file] name</td>
43+
</tr>
44+
<tr>
45+
<td>extensions</td>
46+
<td align="left">String</td>
47+
<td>'png,jpg,gif'</td>
48+
<td>Limit the image type</td>
49+
</tr>
50+
<tr>
51+
<td>crop</td>
52+
<td align="left">Boolean</td>
53+
<td>'server'</td>
54+
<td>Crop image option</td>
55+
</tr>
56+
<tr>
57+
<td>cropRatio</td>
58+
<td align="left">String</td>
59+
<td>'1:1'</td>
60+
<td>The cropped image shape</td>
61+
</tr>
62+
<tr>
63+
<td>cropBtn</td>
64+
<td align="left">Object</td>
65+
<td>{ok:'Save','cancel':'Give Up'}</td>
66+
<td>The Text of cropping button text</td>
67+
</tr>
68+
<tr>
69+
<td>maxFileSize</td>
70+
<td align="left">Number</td>
71+
<td>10485760(10M)</td>
72+
<td>Limit the size of the file</td>
73+
</tr>
74+
<tr>
75+
<td>maxWidth</td>
76+
<td align="left">Number</td>
77+
<td>150</td>
78+
<td>The maximum width of cropped image </td>
79+
</tr>
80+
<tr>
81+
<td>maxheight</td>
82+
<td align="left">Number</td>
83+
<td>150</td>
84+
<td>限制图片的最大高度</td>
85+
</tr>
86+
<tr>
87+
<td>inputAccept</td>
88+
<td align="left">string</td>
89+
<td>'image/*' / 'image/jpg,image/jpeg,image/png'</td>
90+
<td>the input[file] accept</td>
91+
</tr>
92+
<tr>
93+
<td>compress</td>
94+
<td align="left">Number</td>
95+
<td>50</td>
96+
<td>Set the quality of compressed image</td>
97+
</tr>
98+
<tr>
99+
<td>isXhr</td>
100+
<td align="left">Boolean</td>
101+
<td>true</td>
102+
<td>IF cancel ajax uploading</td>
103+
</tr>
104+
<tr>
105+
<td>headers</td>
106+
<td align="left">Object</td>
107+
<td>{auth: xxxxx}</td>
108+
<td>Set customed header when ajax uploading</td>
109+
</tr>
110+
<tr>
111+
<td>data</td>
112+
<td align="left">Object</td>
113+
<td>{auth: xxxxx}</td>
114+
<td>Set customed data when ajax posting server</td>
115+
</tr>
116+
</tbody>
117+
</table>
118+
</p>
119+
<h4> url </h4>
120+
<p><code>url</code> means a http url that ajax will send，and you need bind a function on <code>@imageuploaded</code> to handle the server response</p>
121+
<h4>inputOfFile</h4>
122+
<p>You can set input[file] name which the server must use via <code>inputOfFile</code>. The default value is <strong>files</strong>。
123+
If you upload multiple images the name will be <strong>files[]</strong>。</p>
124+
<h4>extensions</h4>
125+
<p>If you want only one or two image types to upload to server, <code>extensions</code> is the right way when you pass an CSV string to it.</p>
126+
<h4>maxFileSize</h4>
127+
<p>Even though the server would check the file size , you cloud also limit the file size locally for thrifting the traffic of network.</p>
128+
<h4>isXhr</h4>
129+
<p>Set <code>isXhr</code> equal <code>false</code>, the uploading will be canceld and you can do something by yourself.</p>
130+
<p class="warnning">The naviagtion will show other props documents and demos</p>
131+
</div>
132+
</template>

‎site/client/less/modules/m-button.less‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -59,19 +59,19 @@
5959
border-color: @nephritis;
6060
}
6161
.btn-info{
62-
color:#00a8e6;
62+
color:@emerald;
6363
background: #fff;
64-
border-color:#00a8e6;
64+
border-color:@emerald;
6565
}
6666
.btn-info:focus,
6767
.btn-info:active{
68-
background: #009cd6;
68+
background: @nephritis;
6969
border-color: #009cd6;
7070
color:#fff;
7171
}
7272
.btn-info:hover{
73-
background: #00a8e6;
74-
border-color:#00a8e6;
73+
background: @nephritis;
74+
border-color:@nephritis;
7575
color:#fff;
7676
}
7777
a.btn-info:hover {

‎site/client/less/modules/m-layout.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,6 @@ aside{
8282
color: #fff;
8383
padding: 10px;
8484
font-size: 15px;
85-
8685
}
8786
ul{
8887
background-color: #e1e1e1;
@@ -115,6 +114,7 @@ aside{
115114

116115
.center{
117116
text-align: center;
117+
padding-bottom: 20px;
118118
}
119119
}
120120
}

0 commit comments

Comments
 (0)