docs: update uploader docs
Change-Id: I8f681439132171f64b847620760c90e74c062158
This commit is contained in:
parent
3719737772
commit
41ecb7a893
@ -14,6 +14,12 @@
|
||||
|
||||
[[ demo src="/demo/uploader/image.vue" ]]
|
||||
|
||||
### 媒体上传
|
||||
|
||||
设置 `type` 的值为 `media` 进入媒体上传模式。
|
||||
|
||||
[[ demo src="/demo/uploader/media.vue" ]]
|
||||
|
||||
### 前端校验
|
||||
|
||||
图片格式、大小、数量校验以及使用 `validator` 自定义校验。
|
||||
@ -56,6 +62,12 @@
|
||||
| `picker-position` | `string` | `'after'` | [^picker-position] |
|
||||
| `upload` | `function(Object, Object): function` | - | [^upload] |
|
||||
| `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
|
||||
预设样式。
|
||||
@ -76,6 +88,8 @@
|
||||
| -- | -- |
|
||||
| `file` | 文件上传。 |
|
||||
| `image` | 图片上传。 |
|
||||
| `media` | 媒体上传(支持视频和图片)。 |
|
||||
| `video` | 视频上传。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
@ -196,6 +210,10 @@
|
||||
| `disabled` | `boolean=` | 操作项是否被禁用。如果该字段为空,则该操作项的禁用状态跟随组件整体的禁用状态。 |
|
||||
^^^
|
||||
|
||||
^^^entries
|
||||
控制每个上传文件的操作项,如删除,预览等,会传递默认的操作项数组作为参数,返回实际生效的操作项数组。操作项对象一般是 `{name, icon, label}`。
|
||||
^^^
|
||||
|
||||
### 插槽
|
||||
|
||||
| 名称 | 描述 |
|
||||
|
57
one/docs/demo/uploader/media.vue
Normal file
57
one/docs/demo/uploader/media.vue
Normal 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>
|
Loading…
Reference in New Issue
Block a user