feat: publicize doc implemetation

one/docs/demo/uploader/custom.vue

@@ -0,0 +1,83 @@
+<template>
+<article>
+  <section>
+    <veui-uploader
+      v-model="images"
+      type="image"
+      :action="action"
+      :controls="controls"
+      request-mode="custom"
+      :upload="upload"
+      @moveright="handleMoveRight"
+    >
+      <template #desc>
+        点击图片浮层上的向右箭头按钮改变图片位置
+      </template>
+    </veui-uploader>
+  </section>
+</article>
+</template>
+
+<script>
+import { Uploader } from 'veui'
+
+export default {
+  components: {
+    'veui-uploader': Uploader
+  },
+  data () {
+    return {
+      action: 'https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog',
+      images: [
+        {
+          src: '/images/development/uploader/demo-image1.jpg'
+        },
+        {
+          src: '/images/development/uploader/demo-image2.jpg'
+        }
+      ],
+      controls (file, defaultControls) {
+        if (file.status === 'success') {
+          return [
+            { name: 'moveright', icon: 'chevron-right', disabled: false },
+            ...defaultControls
+          ]
+        }
+        return defaultControls
+      },
+      upload: (file, { onload, onprogress, onerror }) => {
+        let xhr = new XMLHttpRequest()
+        file.xhr = xhr
+
+        xhr.upload.onprogress = e => onprogress(e)
+        xhr.onload = e => {
+          try {
+            onload(JSON.parse(xhr.responseText))
+          } catch (e) {
+            onload({ success: false, message: e })
+          }
+        }
+        xhr.onerror = e => onerror(e)
+        let formData = new FormData()
+        formData.append('file', file)
+
+        xhr.open('POST', this.action, true)
+        xhr.send(formData)
+
+        return () => {
+          xhr.abort()
+        }
+      }
+    }
+  },
+  methods: {
+    handleMoveRight (file, index) {
+      if (index < this.images.length - 1) {
+        let temp = { ...this.images[index] }
+        this.$set(this.images, index, this.images[index + 1])
+        this.$set(this.images, index + 1, temp)
+      }
+    }
+  }
+}
+</script>

one/docs/demo/uploader/file.vue

@@ -0,0 +1,57 @@
+<template>
+<article>
+  <section>
+    <h4>Normal size</h4>
+    <veui-uploader
+      v-model="files"
+      action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
+    />
+  </section>
+  <section>
+    <h4>Small size</h4>
+    <veui-uploader
+      v-model="files2"
+      action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
+      ui="s"
+    />
+  </section>
+</article>
+</template>
+
+<script>
+import { Uploader } from 'veui'
+import { cloneDeep } from 'lodash'
+
+export default {
+  components: {
+    'veui-uploader': Uploader
+  },
+  data () {
+    let files = [
+      {
+        name: 'demo-file1.txt',
+        src: '/file/demo-file1.txt'
+      },
+      {
+        name: 'demo-file2.txt',
+        src: '/file/demo-file2.txt'
+      }
+    ]
+    return {
+      files,
+      files2: cloneDeep(files)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+section {
+  width: 45%;
+  float: left;
+}
+
+article {
+  overflow: hidden;
+}
+</style>

one/docs/demo/uploader/image.vue

@@ -0,0 +1,54 @@
+<template>
+<article>
+  <section>
+    <h4>Normal size</h4>
+    <veui-uploader
+      v-model="images"
+      type="image"
+      action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
+    >
+      <template #desc>
+        Normal size
+      </template>
+    </veui-uploader>
+  </section>
+  <section>
+    <h4>Small size</h4>
+    <veui-uploader
+      v-model="images2"
+      type="image"
+      action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
+      ui="s"
+    >
+      <template #desc>
+        Small size
+      </template>
+    </veui-uploader>
+  </section>
+</article>
+</template>
+
+<script>
+import { Uploader } from 'veui'
+import { cloneDeep } from 'lodash'
+
+export default {
+  components: {
+    'veui-uploader': Uploader
+  },
+  data () {
+    let images = [
+      {
+        src: '/images/development/uploader/demo-image1.jpg'
+      },
+      {
+        src: '/images/development/uploader/demo-image2.jpg'
+      }
+    ]
+    return {
+      images,
+      images2: cloneDeep(images)
+    }
+  }
+}
+</script>

one/docs/demo/uploader/validate.vue

@@ -0,0 +1,53 @@
+<template>
+<article>
+  <section>
+    <veui-uploader
+      v-model="images"
+      type="image"
+      action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
+      accept="jpg,png"
+      :max-count="6"
+      max-size="100kb"
+      :validator="validator"
+    >
+      <template #desc>
+        请选择jpg、png图片，大小不超过100kb，宽高分别大于200px，最多上传6张图片
+      </template>
+    </veui-uploader>
+  </section>
+</article>
+</template>
+
+<script>
+import { Uploader } from 'veui'
+
+export default {
+  components: {
+    'veui-uploader': Uploader
+  },
+  data () {
+    return {
+      images: [
+        {
+          src: '/images/development/uploader/demo-image1.jpg'
+        },
+        {
+          src: '/images/development/uploader/demo-image2.jpg'
+        }
+      ],
+      validator (file) {
+        return new Promise(resolve => {
+          let image = new Image()
+          image.src = window.URL.createObjectURL(file)
+          image.onload = () => {
+            resolve({
+              valid: image.height > 200 && image.width > 200,
+              message: '图片宽高太小'
+            })
+          }
+        })
+      }
+    }
+  }
+}
+</script>