docs: update uploader docs

Change-Id: I8f681439132171f64b847620760c90e74c062158
This commit is contained in:
xiaodemen 2021-04-29 16:32:31 +08:00 committed by GU Yiling
parent 3719737772
commit 41ecb7a893
2 changed files with 75 additions and 0 deletions

View File

@ -14,6 +14,12 @@
[[ demo src="/demo/uploader/image.vue" ]] [[ demo src="/demo/uploader/image.vue" ]]
### 媒体上传
设置 `type` 的值为 `media` 进入媒体上传模式。
[[ demo src="/demo/uploader/media.vue" ]]
### 前端校验 ### 前端校验
图片格式、大小、数量校验以及使用 `validator` 自定义校验。 图片格式、大小、数量校验以及使用 `validator` 自定义校验。
@ -56,6 +62,12 @@
| `picker-position` | `string` | `'after'` | [^picker-position] | | `picker-position` | `string` | `'after'` | [^picker-position] |
| `upload` | `function(Object, Object): function` | - | [^upload] | | `upload` | `function(Object, Object): function` | - | [^upload] |
| `controls` | `function(Object, Array<Object>): Array<Object>` | - | [^controls] | | `controls` | `function(Object, Array<Object>): Array<Object>` | - | [^controls] |
| `multiple` | `boolean` | `false` | 上传多个文件,当 `max-count``1``multiple` 是 `true`,那么 `value` 也是数组。 |
| `entries` | `function(Array<Object>): Array<Object>` | - | [^entries] |
| `after-pick` | `function(Array<Object>): void` | - | 选择文件之后的回调。 |
| `sortable` | `boolean` | `false` | 文件列表是否可以排序。 |
| `preview-options` | `object` | `{wrap: true, indicator: 'number'}` | 传递给 [`Lightbox`](./lightbox) 的预览选项|
^^^ui ^^^ui
预设样式。 预设样式。
@ -76,6 +88,8 @@
| -- | -- | | -- | -- |
| `file` | 文件上传。 | | `file` | 文件上传。 |
| `image` | 图片上传。 | | `image` | 图片上传。 |
| `media` | 媒体上传(支持视频和图片)。 |
| `video` | 视频上传。 |
+++ +++
^^^ ^^^
@ -196,6 +210,10 @@
| `disabled` | `boolean=` | 操作项是否被禁用。如果该字段为空,则该操作项的禁用状态跟随组件整体的禁用状态。 | | `disabled` | `boolean=` | 操作项是否被禁用。如果该字段为空,则该操作项的禁用状态跟随组件整体的禁用状态。 |
^^^ ^^^
^^^entries
控制每个上传文件的操作项,如删除,预览等,会传递默认的操作项数组作为参数,返回实际生效的操作项数组。操作项对象一般是 `{name, icon, label}`
^^^
### 插槽 ### 插槽
| 名称 | 描述 | | 名称 | 描述 |

View File

@ -0,0 +1,57 @@
<template>
<article>
<section>
<h4>Normal size</h4>
<veui-uploader
v-model="media"
type="media"
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="media2"
type="media"
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 media = [
{
type: 'image',
src: '/images/development/uploader/demo-image1.jpg'
},
{
type: 'video',
src: 'https://nadvideo2.baidu.com/5dafd8544f4f53b27a5f59b0ab780403_1920_1080.mp4',
poster: 'https://feed-image.baidu.com/0/pic/4dced79d185a16e228652b136f653dcc.jpg'
}
]
return {
media,
media2: cloneDeep(media)
}
}
}
</script>