上传器
预定义样式的上传组件。
属性
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
hoverClass | String | pure-hover | 指定按下去的样式类 |
layout | String | grid | [详情] 布局方式 |
columns | [Number, String] | 3 | 列数 |
list | Array | [] | [详情] 文件列表数据 |
coverKey | String | cover | 封面图的键名 |
coverMode | String | aspectFill | [参考] 封面图的裁剪、缩放模式 |
loadingText | String | 上传中... | 上传 loading 的提示文本 |
loadingIconName | String | __loading1 | 上传 loading 图标名称 |
loadingSpeed | Number | 1000 | 上传 loading 图标动画速度,毫秒 |
failIconName | String | __tishi | 上传 fail 图标名称 |
failText | String | 上传失败 | 上传 fail 的提示文本 |
deleteIconName | String | __delete | 删除图标名称 |
uploaderIconName | String | __xiangji | 上传器图标名称 |
uploaderText | String | - | 上传器文本 |
maxCount | Number | 9 | 最大上传数量 |
数据
文件列表需是对象数组,每项需包含一个 status
字段。
status
status
字段用来表示文件上传状态,可选值为:
uploading | loading
: 表示上传中success | done | ok
: 表示上传成功fail | error
: 表示上传失败
布局方式
通过 layout
属性来设置布局方式,目前只支持 grid
宫格布局。
事件
名称 | 参数 | 说明 |
---|---|---|
@onChoose | count: 可选文件数量 | 点击上传按钮时触发,需自己处理选择文件的逻辑 |
@onDelet | index: 下标; item: 数据; | 点击删除按钮时触发,需自己处理删除逻辑 |
插槽
名称 | 参数 | 说明 |
---|---|---|
#uploading | - | 上传状态 |
#fail | - | 失败状态 |
#loadingText | - | 加载提示文本 |
#icon | - | 前置图标 |
#default | - | 默认,按钮文本,按钮内容 |
#afterIcon | - | 后置图标 |