update(doc): upload add custom case

document/components/docs/zh-CN/upload.md

@@ -32,13 +32,20 @@
   export default {
     methods: {
       filesAdded(files) {
+        let hasIgnore = false
         const maxSize = 1 * 1024 * 1024 // 1M
         for (let k in files) {
           const file = files[k]
           if (file.size > maxSize) {
             file.ignore = true
+            hasIgnore = true
           }
         }
+        hasIgnore && this.$createToast({
+          type: 'warn',
+          time: 1000,
+          txt: 'You selected >1M files'
+        }).show()
       }
     }
   }
@@ -52,18 +59,18 @@
 
   ```html
   <cube-upload
-    ref="upload2"
-    :action="action2"
+    ref="upload"
+    :action="action"
     :simultaneous-uploads="1"
     :process-file="processFile"
     @file-submitted="fileSubmitted" />
   ```
   ```js
-  import compress from '../modules/image'
+  import compress from '../../modules/image'
   export default {
     data() {
       return {
-        action2: {
+        action: {
           target: '//jsonplaceholder.typicode.com/photos/',
           prop: 'base64Value'
         }
@@ -92,6 +99,91 @@
 
   `file-submitted` 事件则是每个文件处理完后添加到 `upload` 实例的 `files` 数组中后触发，参数就是一个处理后的文件对象。
 
+- 自定义结构样式
+
+  使用默认插槽来实现自定义结构，在此基础上自定义样式。
+
+  ```html
+  <cube-upload
+    ref="upload"
+    v-model="files"
+    :action="action"
+    @files-added="addedHandler"
+    @file-error="errHandler">
+    <div class="clear-fix">
+      <cube-upload-file v-for="(file, i) in files" :file="file" :key="i"></cube-upload-file>
+      <cube-upload-btn :multiple="false">
+        <div>
+          <i>＋</i>
+          <p>Please click to upload ID card</p>
+        </div>
+      </cube-upload-btn>
+    </div>
+  </cube-upload>
+  ```
+  ```js
+  export default {
+    data() {
+      return {
+        action: '//jsonplaceholder.typicode.com/photos/',
+        files: []
+      }
+    },
+    methods: {
+      addedHandler() {
+        const file = this.files[0]
+        file && this.$refs.upload.removeFile(file)
+      },
+      errHandler(file) {
+        // const msg = file.response.message
+        this.$createToast({
+          type: 'warn',
+          txt: 'Upload fail',
+          time: 1000
+        }).show()
+      }
+    }
+  }
+  ```
+  样式覆盖：
+  ```stylus
+  .cube-upload
+    .cube-upload-file, .cube-upload-btn
+      margin: 0
+      height: 200px
+    .cube-upload-file
+      margin: 0
+      + .cube-upload-btn
+        margin-top: -200px
+        opacity: 0
+    .cube-upload-file-def
+      width: 100%
+      height: 100%
+      .cubeic-wrong
+        display: none
+    .cube-upload-btn
+      display: flex
+      align-items: center
+      justify-content: center
+      > div
+        text-align: center
+      i
+        display: inline-flex
+        align-items: center
+        justify-content: center
+        width: 50px
+        height: 50px
+        margin-bottom: 20px
+        font-size: 32px
+        line-height: 1
+        font-style: normal
+        color: #fff
+        background-color: #333
+        border-radius: 50%
+  ```
+
+  上述示例实现的效果就是点击上传（一次只能选择一张）一张图片，此图片就会直接展示，而上传按钮本身则是不可见，覆盖在图片预览区域上。再次重新选择图片，就会移除掉上次选择的图片，重新展示新选择的图片。
+
 ### Props 配置
 
 | 参数 | 说明 | 类型 | 默认值 | 示例 |

example/pages/upload/compress.vue

+<template>
+  <cube-page type="upload-view-compress" title="Upload">
+    <template slot="content">
+      <p>Compress&Base64 upload: </p>
+      <div>
+        <cube-upload
+          ref="upload"
+          :action="action"
+          :simultaneous-uploads="1"
+          :process-file="processFile"
+          @file-submitted="fileSubmitted" />
+      </div>
+    </template>
+  </cube-page>
+</template>
+
+<script type="text/ecmascript-6">
+  import CubePage from '../../components/cube-page.vue'
+  import compress from '../../modules/image'
+
+  export default {
+    data() {
+      return {
+        action: {
+          target: '//jsonplaceholder.typicode.com/photos/',
+          prop: 'base64Value',
+          checkSuccess(res) {
+            // success
+            return true
+          }
+        }
+      }
+    },
+    methods: {
+      processFile(file, next) {
+        compress(file, {
+          compress: {
+            width: 1600,
+            height: 1600,
+            quality: 0.5
+          }
+        }, next)
+      },
+      fileSubmitted(file) {
+        file.base64Value = file.file.base64
+      }
+    },
+    components: {
+      CubePage
+    }
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+  .upload-view-compress
+    .content
+      >
+        p, div
+          margin: 20px 0
+        div
+          .cube-btn, .cube-upload
+            margin: 10px 0
+</style>

example/pages/upload/custom.vue

+<template>
+  <cube-page type="upload-view-custom" title="Upload">
+    <template slot="content">
+      <p>Use slots: </p>
+      <div class="upload-view-custom-main">
+        <cube-upload
+          ref="upload"
+          v-model="files"
+          :action="action"
+          @files-added="addedHandler"
+          @file-error="errHandler">
+          <div class="clear-fix">
+            <cube-upload-file v-for="(file, i) in files" :file="file" :key="i"></cube-upload-file>
+            <cube-upload-btn :multiple="false">
+              <div>
+                <i>＋</i>
+                <p>Please click to upload ID card</p>
+              </div>
+            </cube-upload-btn>
+          </div>
+        </cube-upload>
+      </div>
+    </template>
+  </cube-page>
+</template>
+
+<script type="text/ecmascript-6">
+  import CubePage from '../../components/cube-page.vue'
+
+  export default {
+    data() {
+      return {
+        action: '//jsonplaceholder.typicode.com/photos/',
+        files: []
+      }
+    },
+    methods: {
+      addedHandler() {
+        const file = this.files[0]
+        file && this.$refs.upload.removeFile(file)
+      },
+      errHandler(file) {
+        // const msg = file.response.message
+        this.$createToast({
+          type: 'warn',
+          txt: 'Upload fail',
+          time: 1000
+        }).show()
+      }
+    },
+    components: {
+      CubePage
+    }
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+  .upload-view-custom
+    .content
+      >
+        p, div
+          margin: 20px 0
+  .upload-view-custom-main
+    background-color: #fff
+    .cube-upload
+      .cube-upload-file, .cube-upload-btn
+        margin: 0
+        height: 200px
+      .cube-upload-file
+        margin: 0
+        + .cube-upload-btn
+          margin-top: -200px
+          opacity: 0
+      .cube-upload-file-def
+        width: 100%
+        height: 100%
+        .cubeic-wrong
+          display: none
+      .cube-upload-btn
+        display: flex
+        align-items: center
+        justify-content: center
+        > div
+          text-align: center
+        i
+          display: inline-flex
+          align-items: center
+          justify-content: center
+          width: 50px
+          height: 50px
+          margin-bottom: 20px
+          font-size: 32px
+          line-height: 1
+          font-style: normal
+          color: #fff
+          background-color: #333
+          border-radius: 50%
+</style>

example/pages/upload.vue → example/pages/upload/default.vue

 <template>
-  <cube-page type="upload-view" title="Upload">
+  <cube-page type="upload-view-def" title="Upload">
     <template slot="content">
       <p>Normal upload(File max size 1MB): </p>
       <div>
@@ -8,35 +8,17 @@
         <cube-button @click="pause" v-else>Pause</cube-button>
         <cube-button @click="retry">Retry</cube-button>
       </div>
-      <p>Compress&Base64 upload: </p>
-      <div>
-        <cube-upload
-          ref="upload2"
-          :action="action2"
-          :simultaneous-uploads="1"
-          :process-file="processFile"
-          @file-submitted="fileSubmitted" />
-      </div>
     </template>
   </cube-page>
 </template>
 
 <script type="text/ecmascript-6">
-  import CubePage from '../components/cube-page.vue'
-  import compress from '../modules/image'
+  import CubePage from '../../components/cube-page.vue'
 
   export default {
     data() {
       return {
         action: '//jsonplaceholder.typicode.com/photos/',
-        action2: {
-          target: '//jsonplaceholder.typicode.com/photos/',
-          prop: 'base64Value',
-          checkSuccess(res) {
-            // success
-            return true
-          }
-        },
         isUploading: true
       }
     },
@@ -53,25 +35,20 @@
         this.$refs.upload.retry()
       },
       filesAdded(files) {
+        let hasIgnore = false
         const maxSize = 1 * 1024 * 1024 // 1M
         for (let k in files) {
           const file = files[k]
           if (file.size > maxSize) {
             file.ignore = true
+            hasIgnore = true
           }
         }
-      },
-      processFile(file, next) {
-        compress(file, {
-          compress: {
-            width: 1600,
-            height: 1600,
-            quality: 0.5
-          }
-        }, next)
-      },
-      fileSubmitted(file) {
-        file.base64Value = file.file.base64
+        hasIgnore && this.$createToast({
+          type: 'warn',
+          time: 1000,
+          txt: 'You selected >1M files'
+        }).show()
       }
     },
     components: {
@@ -81,7 +58,7 @@
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
-  .upload-view
+  .upload-view-def
     .content
       >
         p, div

example/pages/upload/index.vue

+<template>
+  <cube-page type="upload" title="Upload">
+    <div slot="content">
+      <cube-button-group>
+        <cube-button @click="goTo('default')">Default</cube-button>
+        <cube-button @click="goTo('compress')">Compress</cube-button>
+        <cube-button @click="goTo('custom')">Custom</cube-button>
+      </cube-button-group>
+      <cube-view></cube-view>
+    </div>
+  </cube-page>
+</template>
+
+<script type="text/ecmascript-6">
+  import CubePage from 'example/components/cube-page.vue'
+  import CubeButtonGroup from 'example/components/cube-button-group.vue'
+  import CubeView from 'example/components/cube-view.vue'
+
+  export default {
+    components: {
+      CubePage,
+      CubeButtonGroup,
+      CubeView
+    },
+    methods: {
+      goTo(subPath) {
+        this.$router.push('/upload/' + subPath)
+      }
+    }
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+</style>

example/router/routes.js

@@ -29,7 +29,10 @@ import IndexListDefault from '../pages/index-list/default.vue'
 import IndexListCustom from '../pages/index-list/custom.vue'
 import IndexListPullUpLoad from '../pages/index-list/pull-up-load.vue'
 import IndexListPullDownRefresh from '../pages/index-list/pull-down-refresh.vue'
-import Upload from '../pages/upload.vue'
+import Upload from '../pages/upload/index.vue'
+import UploadDefault from '../pages/upload/default.vue'
+import UploadCompress from '../pages/upload/compress.vue'
+import UploadCustom from '../pages/upload/custom.vue'
 import Validator from '../pages/validator.vue'
 import Swipe from '../pages/swipe/index.vue'
 import SwipeDefault from '../pages/swipe/default.vue'
@@ -172,7 +175,21 @@ const routes = [
   },
   {
     path: '/upload',
-    component: Upload
+    component: Upload,
+    children: [
+      {
+        path: 'default',
+        component: UploadDefault
+      },
+      {
+        path: 'compress',
+        component: UploadCompress
+      },
+      {
+        path: 'custom',
+        component: UploadCustom
+      }
+    ]
   },
   {
     path: '/validator',