add english post data doc

Author: JackPu

site/client/components/doc/cn/PostData.vue

@@ -9,13 +9,50 @@
     <vue-core-image-upload
       :class="['btn', 'btn-primary']"
       :crop="false"
-      @imageuploaded="imageUploded"
-      :max-file-size="5242880"
+      :data="data"
+      @imageuploaded="imageuploaded"
       :multiple="true"
       :multiple-size="4"
       url="http://101.198.151.190/api/upload.php" >
     </vue-core-image-upload>
   </div>
+  <p>上传的过程中我们可以打开devtool查看请求，可以看到发送数据中带上了一个新的 text 字段，也就是文本框内容。</p>
+  <p><img width="480" src="http://img1.vued.vanthink.cn/vued6491e814a4b12bfcaecd628a6732beb0.png" /></p>
+  <h4>Code Example</h4>
+  <pre v-highlightjs><code class="javascript">&lt;template&gt;
+&lt;div class="m-form"&gt;
+  &lt;input type="text" v-model="data.text" placeholder="输入一些内容吧" class="form-control text" /&gt;
+  &lt;vue-core-image-upload
+    :class="['btn', 'btn-primary']"
+    :crop="false"
+    :data="data"
+    @imageuploaded="imageuploaded"
+    :multiple="true"
+    :multiple-size="4"
+    url="http://101.198.151.190/api/upload.php" &gt;
+  &lt;/vue-core-image-upload&gt;
+&lt;/div&gt;
+&lt;/template&gt;
+
+&lt;script&gt;
+import VueCoreImageUpload from '../../../../src/vue-core-image-upload.vue'
+export default {
+  components: {
+    VueCoreImageUpload,
+  },
+
+  data() {
+    return {
+      data: {
+        text: ''
+      }
+    }
+  },
+
+};
+&lt;/script&gt;
+</code></pre>
+  <a href="">查看完整源码</a>
 </div>
 </template>
 <style>
@@ -40,6 +77,12 @@ export default {
         text: ''
       }
     }
+  },
+
+  methods: {
+    imageuploaded(res) {
+
+    }
   }
 
 };

site/client/components/doc/en/PostData.vue

@@ -0,0 +1,89 @@
+<template>
+<div class="components">
+  <h3>Send Data to Server</h3>
+  <p>Setting <code>data</code> attribute will send some data you bind to the server via ajax</p>
+  <h4>Exmaple:</h4>
+  <p>You could type some text here and its text will be sended to the server when you upload your image.</p>
+  <div class="m-form">
+    <input type="text" v-model="data.text" placeholder="type some..." class="form-control text" />
+    <vue-core-image-upload
+      :class="['btn', 'btn-primary']"
+      :crop="false"
+      :data="data"
+      @imageuploaded="imageuploaded"
+      :multiple="true"
+      :multiple-size="4"
+      url="http://101.198.151.190/api/upload.php" >
+    </vue-core-image-upload>
+  </div>
+  <p>We could open chrome devtool to view http status when uploading image. Below is the result after uploading image successfully.</p>
+  <p><img width="480" src="http://img1.vued.vanthink.cn/vued6491e814a4b12bfcaecd628a6732beb0.png" /></p>
+  <h4>Code Example</h4>
+  <pre v-highlightjs><code class="javascript">&lt;template&gt;
+&lt;div class="m-form"&gt;
+  &lt;input type="text" v-model="data.text" placeholder="输入一些内容吧" class="form-control text" /&gt;
+  &lt;vue-core-image-upload
+    :class="['btn', 'btn-primary']"
+    :crop="false"
+    :data="data"
+    @imageuploaded="imageuploaded"
+    :multiple="true"
+    :multiple-size="4"
+    url="http://101.198.151.190/api/upload.php" &gt;
+  &lt;/vue-core-image-upload&gt;
+&lt;/div&gt;
+&lt;/template&gt;
+
+&lt;script&gt;
+import VueCoreImageUpload from '../../../../src/vue-core-image-upload.vue'
+export default {
+  components: {
+    VueCoreImageUpload,
+  },
+
+  data() {
+    return {
+      data: {
+        text: ''
+      }
+    }
+  },
+
+};
+&lt;/script&gt;
+</code></pre>
+  <a href="">View code source</a>
+</div>
+</template>
+<style>
+.form-control{
+  display: block;
+  margin: 20px 0;
+  padding: 5px 20px;
+}
+</style>
+
+
+<script>
+import VueCoreImageUpload from '../../../../src/vue-core-image-upload.vue'
+export default {
+  components: {
+    VueCoreImageUpload,
+  },
+
+  data() {
+    return {
+      data: {
+        text: ''
+      }
+    }
+  },
+
+  methods: {
+    imageuploaded(res) {
+
+    }
+  }
+};
+
+</script>

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

@@ -82,14 +82,15 @@ aside{
       color: #fff;
       padding: 10px;
       font-size: 15px;
-      
+
     }
     ul{
         background-color: #e1e1e1;
         padding-bottom: 20px;
     }
     li{
         margin-bottom: 5px;
+        margin-top: 0;
     }
     a{
         display: inline-block;
@@ -108,10 +109,10 @@ aside{
     max-width: 900px;
     min-height: 400px;
     padding: 100px 20px;
-  
+
     .components {
       text-align: left;
-      
+
       .center{
         text-align: center;
       }
@@ -141,8 +142,8 @@ aside{
 .ft .lang-list a {
   margin: 0 10px;
   color: #999;
-  
+
   &.active {
     color: @emerald;
   }
-}
+}

site/client/router/index.js

@@ -10,7 +10,9 @@ import CnCropImage from '../components/doc/cn/CropImage.vue';
 import CnMultipleFile from '../components/doc/cn/MultipleFile.vue';
 import CnCompressImage from '../components/doc/cn/CompressImage.vue';
 import CnPostData from '../components/doc/cn/PostData.vue';
+import EnPostData from '../components/doc/en/PostData.vue';
 import CnOthers from '../components/doc/cn/Others.vue';
+import EnOthers from '../components/doc/en/Others.vue';
 
 Vue.use(Router)
 
@@ -62,9 +64,17 @@ export default new Router({
       path: '/cn/post-data',
       component: CnPostData
     },
+    {
+      path: '/en/post-data',
+      component: EnPostData,
+    },
     {
       path: '/cn/others',
       component: CnOthers,
+    },
+    {
+      path: '/en/others',
+      component: EnOthers,
     }
   ]
 })