|
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