Skip to content

Commit fb32516

Browse files
committed
docs(uploadImg): 添加文档
1 parent fadc090 commit fb32516

File tree

1 file changed

+80
-0
lines changed

1 file changed

+80
-0
lines changed
Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
# 多图上传
2+
3+
多图片上传组件 `UploadImgs`, 附有预览, 排序, 验证等功能 [演示效果](http://face.cms.7yue.pro/#/imgs-upload/stage1)
4+
5+
## 基础示例
6+
7+
```vue
8+
<upload-imgs ref="uploadEle" :value="initData" />
9+
10+
<script>
11+
import UploadImgs from '@/components/base/upload-imgs'
12+
13+
export default {
14+
components: {
15+
UploadImgs,
16+
},
17+
data() {
18+
return {
19+
rules: {
20+
minWidth: 100,
21+
minHeight: 100,
22+
maxSize: 5,
23+
},
24+
initData: [],
25+
}
26+
},
27+
methods: {
28+
getValue() {
29+
this.$refs.uploadEle.getValue()
30+
},
31+
},
32+
}
33+
</script>
34+
```
35+
36+
### 返回值说明
37+
38+
39+
## props
40+
41+
| 参数 | 类型 | 默认值 | 说明 |
42+
|---------------|---------------|---------|----------------------------|
43+
| value | Array | [] | 初始化数据 |
44+
| auto-upload | Boolean | true | 新增图片是是否自动上传 |
45+
| disabled | Boolean | false | 是否禁用 |
46+
| preview | Boolean | true | 是否可预览 |
47+
| multiple | Boolean | false | 是否可以一次多选 |
48+
| min-num | Number | 0 | 最少图片数量 |
49+
| max-num | Number | 0 | 最多图片数量, 0 表示无限制 |
50+
| before-upload | Function | null | 上传前自定义校验函数 |
51+
| remote-fuc | Function | null | 重写远程方法 |
52+
| sortable | Boolean | false | 是否可排序 |
53+
| accept | String | image/* | 运行上传的类型 |
54+
| is-animated | Boolean | false | 是否需要检测是否是动图 |
55+
| rules | Object | {} | 图像规则 |
56+
| fit | String | contain | 图像显示形式 |
57+
| width | Nulber/String | 200 | 宽度 |
58+
| height | Number/String | 200 | 高度 |
59+
60+
图像验证规则属性rule支持的验证规则有:
61+
62+
| 属性 | 类型 | 默认 | 说明 |
63+
|---------------|---------|------|----------------|
64+
| ratio | Array | null | 比例 [宽,高] |
65+
| width | Number | null | 宽度必需等于 |
66+
| height | Number | null | 高度必需等于 |
67+
| minWidth | Number | null | 最小宽 |
68+
| minHeight | Number | null | 最小高 |
69+
| minSize | Number | null | 最小size(Mb) |
70+
| maxSize | Number | null | 最大size(Mb) |
71+
| allowAnimated | Boolean | true | 最大size(Mb) |
72+
73+
默认值为 `{ maxSize: 2 }` 图片文件大小限制 2M 内. 这与 lin-cms 服务端文件上传接口默认限制一致
74+
75+
## methods
76+
77+
| 方法名 | 参数 | 说明 |
78+
|----------|------|----------------------------------------------|
79+
| getValue || 获取当前组件的值, 如果验证不通过则返回 false |
80+
| clear || 清空当前所选图片 |

0 commit comments

Comments
 (0)