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