Skip to content

Commit f9e5e40

Browse files
JackPuJackPu
committed
add new component
1 parent fead9c1 commit f9e5e40

File tree

7 files changed

+144
-4
lines changed

7 files changed

+144
-4
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-core-image-upload",
3-
"version": "2.1.6",
3+
"version": "2.1.7",
44
"description": "a vue plgin for image upload and crop",
55
"main": "src/index.js",
66
"dependencies": {

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

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<div class="components">
3+
<h3>自定义组件样式</h3>
4+
<p>你可以设置组件的<code>class</code> 以及自己编写子组件的形式来控制组件的显示的样子。</p>
5+
<h4>Demo</h4>
6+
<p>下面是一个图片按钮。</p>
7+
<p class="user center">
8+
<img class="avatar" :src="src" />
9+
</p>
10+
<div class="center">
11+
<vue-core-image-upload
12+
:crop="false"
13+
@imageuploaded="imageuploaded"
14+
:data="data"
15+
:max-file-size="5242880"
16+
url="http://101.198.151.190/api/upload.php" >
17+
<img width="150" src="http://img1.vued.vanthink.cn/vuededa653aa59d1a1287d9a6e18890a7e51.png" />
18+
</vue-core-image-upload>
19+
</div>
20+
<p>Code Example</p>
21+
<pre v-highlightjs><code class="javascript">&lt;vue-core-image-upload
22+
:crop="false"
23+
@imageuploaded="imageuploaded"
24+
:data="data"
25+
:max-file-size="5242880"
26+
url="http://101.198.151.190/api/upload.php" &gt;
27+
&lt;img width="150" src="http://img1.vued.vanthink.cn/vuededa653aa59d1a1287d9a6e18890a7e51.png" /&gt;
28+
&lt;/vue-core-image-upload&gt;
29+
</code></pre>
30+
</div>
31+
</template>
32+
33+
<style>
34+
35+
.avatar {
36+
width: 150px;
37+
height: 150px;
38+
margin-bottom: 20px;
39+
border-radius: 50%;
40+
border: 2px solid rgba(0,0,0,.05);
41+
}
42+
</style>
43+
44+
<script>
45+
import VueCoreImageUpload from 'vue-core-image-upload'
46+
47+
export default {
48+
components: {
49+
'vue-core-image-upload': VueCoreImageUpload,
50+
},
51+
52+
data() {
53+
return {
54+
src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
55+
}
56+
},
57+
58+
methods: {
59+
imageuploaded(res) {
60+
if (res.errcode == 0) {
61+
this.src = res.data.src;
62+
}
63+
}
64+
}
65+
};
66+
67+
</script>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,14 +77,13 @@
7777
text="Crop Image"
7878
@imageuploaded="crpoServerImageUploaded"&gt;
7979
&lt;/vue-core-image-upload&gt;
80-
8180
</code></pre>
8281
<a href="https://github.com/Vanthink-UED/vue-core-image-upload/blob/master/site/client/components/doc/en/CropImage.vue">View Code Source</a>
8382
</div>
8483
</template>
8584

8685
<script>
87-
import VueCoreImageUpload from 'vue-core-image-upload';
86+
import VueCoreImageUpload from '../../../../src/vue-core-image-upload.vue';
8887
export default {
8988
components: {
9089
VueCoreImageUpload

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<div class="components">
3+
<h3>Custom Component</h3>
4+
<p><code>class</code> will be bind to the component and you can include any child component.</p>
5+
<h4>Demo</h4>
6+
<p>This is a image upload button.</p>
7+
<p class="user center">
8+
<img class="avatar" :src="src" />
9+
</p>
10+
<div class="center">
11+
<vue-core-image-upload
12+
:crop="false"
13+
@imageuploaded="imageuploaded"
14+
:data="data"
15+
:max-file-size="5242880"
16+
url="http://101.198.151.190/api/upload.php" >
17+
<img width="150" src="http://img1.vued.vanthink.cn/vuededa653aa59d1a1287d9a6e18890a7e51.png" />
18+
</vue-core-image-upload>
19+
</div>
20+
<p>Code Example</p>
21+
<pre v-highlightjs><code class="javascript">&lt;vue-core-image-upload
22+
:crop="false"
23+
@imageuploaded="imageuploaded"
24+
:data="data"
25+
:max-file-size="5242880"
26+
url="http://101.198.151.190/api/upload.php" &gt;
27+
&lt;img width="150" src="http://img1.vued.vanthink.cn/vuededa653aa59d1a1287d9a6e18890a7e51.png" /&gt;
28+
&lt;/vue-core-image-upload&gt;
29+
</code></pre>
30+
</div>
31+
</template>
32+
33+
<style>
34+
35+
.avatar {
36+
width: 150px;
37+
height: 150px;
38+
margin-bottom: 20px;
39+
border-radius: 50%;
40+
border: 2px solid rgba(0,0,0,.05);
41+
}
42+
</style>
43+
44+
<script>
45+
import VueCoreImageUpload from 'vue-core-image-upload'
46+
47+
export default {
48+
components: {
49+
'vue-core-image-upload': VueCoreImageUpload,
50+
},
51+
data() {
52+
return {
53+
src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
54+
}
55+
},
56+
methods: {
57+
imageuploaded(res) {
58+
if (res.errcode == 0) {
59+
this.src = res.data.src;
60+
}
61+
}
62+
}
63+
};
64+
65+
</script>

‎site/client/lib/constants.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ let routers = [
1616
name: 'Events',
1717
cn_name: '响应事件'
1818
},
19+
{
20+
name: 'Custom Component',
21+
cn_name: '自定义组件'
22+
},
1923
{
2024
name: 'Crop Image',
2125
cn_name: '裁剪图片'

‎site/client/router/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import CnProps from '../components/doc/cn/Props.vue';
88
import EnProps from '../components/doc/en/Props.vue';
99
import CnEvents from '../components/doc/cn/Events.vue';
1010
import EnEvents from '../components/doc/en/Events.vue';
11+
import EnCustomComponent from '../components/doc/en/CustomComponent.vue';
1112
import CnCropImage from '../components/doc/cn/CropImage.vue';
1213
import EnCropImage from '../components/doc/en/CropImage.vue';
1314
import CnResizeImage from '../components/doc/cn/ResizeImage.vue';
@@ -63,6 +64,10 @@ export default new Router({
6364
path: '/en/events',
6465
component: EnEvents,
6566
},
67+
{
68+
path: '/en/custom-component',
69+
component: EnCustomComponent,
70+
},
6671
{
6772
path: '/cn/crop-image',
6873
component: CnCropImage

‎site/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"j-i-c": "^2.0.2",
2424
"promise-polyfill": "^6.0.2",
2525
"vue": "^2.2.2",
26-
"vue-core-image-upload": "^2.1.2",
26+
"vue-core-image-upload": "^2.1.7",
2727
"vue-highlight": "0.0.0",
2828
"vue-highlightjs": "^1.2.2",
2929
"vue-progressbar": "^0.7.1",

0 commit comments

Comments
 (0)