@moment-design/material-library 0.1.8 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +127 -127
- package/dist/css/index.css +50 -325
- package/dist/index.cjs.js +69 -1011
- package/dist/index.esm.js +70 -1012
- package/dist/index.min.js +1710 -1859
- package/dist/index.min.js.map +1 -1
- package/package.json +103 -103
package/README.md
CHANGED
|
@@ -1,127 +1,127 @@
|
|
|
1
|
-
# 素材库组件
|
|
2
|
-
|
|
3
|
-
## 使用组件
|
|
4
|
-
|
|
5
|
-
`安装依赖`
|
|
6
|
-
|
|
7
|
-
```
|
|
8
|
-
npm install @moment-design/material-library --save
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
`使用组件`
|
|
12
|
-
|
|
13
|
-
```ts
|
|
14
|
-
import MaterialLibrary from "@moment-design/material-library"
|
|
15
|
-
|
|
16
|
-
<MaterialLibrary
|
|
17
|
-
ref="refLMaterialLibrary"
|
|
18
|
-
:config="config"
|
|
19
|
-
@choose="(v) => (chooseDatas = v)"
|
|
20
|
-
></MaterialLibrary>
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
## API
|
|
24
|
-
|
|
25
|
-
Props
|
|
26
|
-
|
|
27
|
-
| 参数名 | 描述 | 类型 | 默认值 |
|
|
28
|
-
| -------------- | ---------------------------- | ----------------------------- | ------------------------------- |
|
|
29
|
-
| fileType | 素材类型限制 | number | 1[图片],2[文档],3[视频],4[音乐] |
|
|
30
|
-
| max | 素材最大数量 | number | 10 |
|
|
31
|
-
| dialog | 列表、弹窗样式 | DialogConfig | {} |
|
|
32
|
-
| scroll | 左侧分组、右侧内容滚动条高度 | ScrollConfig | {} |
|
|
33
|
-
| apis | 素材库相关接口 | ApisConfig | {} |
|
|
34
|
-
| customValidate | 自定义校验函数 | (datas) => (true 或 报错信息) | - |
|
|
35
|
-
|
|
36
|
-
DialogConfig
|
|
37
|
-
|
|
38
|
-
| 参数名 | 描述 | 类型 | 默认值 |
|
|
39
|
-
| ------- | --------------------------- | ------- | -------- |
|
|
40
|
-
| title | 弹窗标题 | string | 选择素材 |
|
|
41
|
-
| visible | 列表(false)、弹窗(true)样式 | boolean | false |
|
|
42
|
-
| width | 弹出框宽度 | number | 1160 |
|
|
43
|
-
|
|
44
|
-
ScrollConfig
|
|
45
|
-
|
|
46
|
-
| 参数名 | 描述 | 类型 | 默认值 |
|
|
47
|
-
| ------ | ------------------ | ------ | ------- |
|
|
48
|
-
| left | 左侧分组滚动条高度 | string | '430px' |
|
|
49
|
-
| right | 右侧内容滚动条高度 | string | '430px' |
|
|
50
|
-
|
|
51
|
-
ApisConfig
|
|
52
|
-
|
|
53
|
-
| 参数名 | 描述 | 类型 | 默认值 |
|
|
54
|
-
| ------------ | ------------------ | ---- | ------ |
|
|
55
|
-
| getGroupList | 获取分组列表 | api | - |
|
|
56
|
-
| postGroup | 新增、编辑分组 | api | - |
|
|
57
|
-
| deleteGroup | 删除分组 | api | - |
|
|
58
|
-
| getFileList | 获取分组下素材列表 | api | - |
|
|
59
|
-
| deleteFile | 删除分组下的素材 | api | - |
|
|
60
|
-
| moveFile | 移动分组 | api | - |
|
|
61
|
-
| uploadFile | 上传素材 | api | - |
|
|
62
|
-
|
|
63
|
-
Events
|
|
64
|
-
|
|
65
|
-
| 事件名 | 描述 | 参数 |
|
|
66
|
-
| ------ | ---------- | -------------- |
|
|
67
|
-
| choose | 选中的素材 | (datas: any[]) |
|
|
68
|
-
|
|
69
|
-
Expose
|
|
70
|
-
|
|
71
|
-
| 事件名 | 描述 | 参数 |
|
|
72
|
-
| ------ | ---------------------- | ---- |
|
|
73
|
-
| open | 主动触发打开选择素材库 | - |
|
|
74
|
-
|
|
75
|
-
## 示例数据
|
|
76
|
-
|
|
77
|
-
```js
|
|
78
|
-
const config = {
|
|
79
|
-
dialog: {
|
|
80
|
-
visible: false,
|
|
81
|
-
title: '选择素材',
|
|
82
|
-
width: 1160,
|
|
83
|
-
},
|
|
84
|
-
scroll: {
|
|
85
|
-
left: '560px',
|
|
86
|
-
right: '560px',
|
|
87
|
-
},
|
|
88
|
-
fileType: 1,
|
|
89
|
-
apis: useMaterialApis(),
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
const useMaterialApis = {
|
|
93
|
-
getGroupList,
|
|
94
|
-
postGroup,
|
|
95
|
-
deleteGroup,
|
|
96
|
-
getFileList,
|
|
97
|
-
deleteFile,
|
|
98
|
-
moveFile,
|
|
99
|
-
uploadFile,
|
|
100
|
-
};
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
## Interface
|
|
104
|
-
|
|
105
|
-
```js
|
|
106
|
-
export interface IMaterialLibrary {
|
|
107
|
-
dialog: {
|
|
108
|
-
visible: boolean,
|
|
109
|
-
title?: string,
|
|
110
|
-
width?: number,
|
|
111
|
-
};
|
|
112
|
-
scroll?: {
|
|
113
|
-
left?: string,
|
|
114
|
-
right?: string,
|
|
115
|
-
};
|
|
116
|
-
fileType?: 1 | 2 | 3 | 4;
|
|
117
|
-
apis: {
|
|
118
|
-
getGroupList: any,
|
|
119
|
-
postGroup: any,
|
|
120
|
-
deleteGroup: any,
|
|
121
|
-
getFileList: any,
|
|
122
|
-
deleteFile: any,
|
|
123
|
-
moveFile: any,
|
|
124
|
-
uploadFile: any,
|
|
125
|
-
};
|
|
126
|
-
}
|
|
127
|
-
```
|
|
1
|
+
# 素材库组件
|
|
2
|
+
|
|
3
|
+
## 使用组件
|
|
4
|
+
|
|
5
|
+
`安装依赖`
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
npm install @moment-design/material-library --save
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
`使用组件`
|
|
12
|
+
|
|
13
|
+
```ts
|
|
14
|
+
import MaterialLibrary from "@moment-design/material-library"
|
|
15
|
+
|
|
16
|
+
<MaterialLibrary
|
|
17
|
+
ref="refLMaterialLibrary"
|
|
18
|
+
:config="config"
|
|
19
|
+
@choose="(v) => (chooseDatas = v)"
|
|
20
|
+
></MaterialLibrary>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## API
|
|
24
|
+
|
|
25
|
+
Props
|
|
26
|
+
|
|
27
|
+
| 参数名 | 描述 | 类型 | 默认值 |
|
|
28
|
+
| -------------- | ---------------------------- | ----------------------------- | ------------------------------- |
|
|
29
|
+
| fileType | 素材类型限制 | number | 1[图片],2[文档],3[视频],4[音乐] |
|
|
30
|
+
| max | 素材最大数量 | number | 10 |
|
|
31
|
+
| dialog | 列表、弹窗样式 | DialogConfig | {} |
|
|
32
|
+
| scroll | 左侧分组、右侧内容滚动条高度 | ScrollConfig | {} |
|
|
33
|
+
| apis | 素材库相关接口 | ApisConfig | {} |
|
|
34
|
+
| customValidate | 自定义校验函数 | (datas) => (true 或 报错信息) | - |
|
|
35
|
+
|
|
36
|
+
DialogConfig
|
|
37
|
+
|
|
38
|
+
| 参数名 | 描述 | 类型 | 默认值 |
|
|
39
|
+
| ------- | --------------------------- | ------- | -------- |
|
|
40
|
+
| title | 弹窗标题 | string | 选择素材 |
|
|
41
|
+
| visible | 列表(false)、弹窗(true)样式 | boolean | false |
|
|
42
|
+
| width | 弹出框宽度 | number | 1160 |
|
|
43
|
+
|
|
44
|
+
ScrollConfig
|
|
45
|
+
|
|
46
|
+
| 参数名 | 描述 | 类型 | 默认值 |
|
|
47
|
+
| ------ | ------------------ | ------ | ------- |
|
|
48
|
+
| left | 左侧分组滚动条高度 | string | '430px' |
|
|
49
|
+
| right | 右侧内容滚动条高度 | string | '430px' |
|
|
50
|
+
|
|
51
|
+
ApisConfig
|
|
52
|
+
|
|
53
|
+
| 参数名 | 描述 | 类型 | 默认值 |
|
|
54
|
+
| ------------ | ------------------ | ---- | ------ |
|
|
55
|
+
| getGroupList | 获取分组列表 | api | - |
|
|
56
|
+
| postGroup | 新增、编辑分组 | api | - |
|
|
57
|
+
| deleteGroup | 删除分组 | api | - |
|
|
58
|
+
| getFileList | 获取分组下素材列表 | api | - |
|
|
59
|
+
| deleteFile | 删除分组下的素材 | api | - |
|
|
60
|
+
| moveFile | 移动分组 | api | - |
|
|
61
|
+
| uploadFile | 上传素材 | api | - |
|
|
62
|
+
|
|
63
|
+
Events
|
|
64
|
+
|
|
65
|
+
| 事件名 | 描述 | 参数 |
|
|
66
|
+
| ------ | ---------- | -------------- |
|
|
67
|
+
| choose | 选中的素材 | (datas: any[]) |
|
|
68
|
+
|
|
69
|
+
Expose
|
|
70
|
+
|
|
71
|
+
| 事件名 | 描述 | 参数 |
|
|
72
|
+
| ------ | ---------------------- | ---- |
|
|
73
|
+
| open | 主动触发打开选择素材库 | - |
|
|
74
|
+
|
|
75
|
+
## 示例数据
|
|
76
|
+
|
|
77
|
+
```js
|
|
78
|
+
const config = {
|
|
79
|
+
dialog: {
|
|
80
|
+
visible: false,
|
|
81
|
+
title: '选择素材',
|
|
82
|
+
width: 1160,
|
|
83
|
+
},
|
|
84
|
+
scroll: {
|
|
85
|
+
left: '560px',
|
|
86
|
+
right: '560px',
|
|
87
|
+
},
|
|
88
|
+
fileType: 1,
|
|
89
|
+
apis: useMaterialApis(),
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
const useMaterialApis = {
|
|
93
|
+
getGroupList,
|
|
94
|
+
postGroup,
|
|
95
|
+
deleteGroup,
|
|
96
|
+
getFileList,
|
|
97
|
+
deleteFile,
|
|
98
|
+
moveFile,
|
|
99
|
+
uploadFile,
|
|
100
|
+
};
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## Interface
|
|
104
|
+
|
|
105
|
+
```js
|
|
106
|
+
export interface IMaterialLibrary {
|
|
107
|
+
dialog: {
|
|
108
|
+
visible: boolean,
|
|
109
|
+
title?: string,
|
|
110
|
+
width?: number,
|
|
111
|
+
};
|
|
112
|
+
scroll?: {
|
|
113
|
+
left?: string,
|
|
114
|
+
right?: string,
|
|
115
|
+
};
|
|
116
|
+
fileType?: 1 | 2 | 3 | 4;
|
|
117
|
+
apis: {
|
|
118
|
+
getGroupList: any,
|
|
119
|
+
postGroup: any,
|
|
120
|
+
deleteGroup: any,
|
|
121
|
+
getFileList: any,
|
|
122
|
+
deleteFile: any,
|
|
123
|
+
moveFile: any,
|
|
124
|
+
uploadFile: any,
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
```
|