@moment-design/material-library 0.1.9 → 0.1.11

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 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
+ ```
@@ -18,98 +18,98 @@
18
18
  color: #55585c;
19
19
  margin-bottom: 24px;
20
20
  }
21
- .l-material-library-content[data-v-0ecf57ca] {
21
+ .l-material-library-content[data-v-c6cf1646] {
22
22
  display: flex;
23
23
  align-items: center;
24
24
  justify-content: space-between;
25
25
  }
26
- .l-material-library-content .label span[data-v-0ecf57ca] {
26
+ .l-material-library-content .label span[data-v-c6cf1646] {
27
27
  color: red;
28
28
  position: relative;
29
29
  top: 2px;
30
30
  margin-right: 6px;
31
31
  }
32
- .l-material-library-content .input[data-v-0ecf57ca] {
32
+ .l-material-library-content .input[data-v-c6cf1646] {
33
33
  width: 390px;
34
34
  }
35
- .l-material-library-group[data-v-c01a8f7e] {
35
+ .l-material-library-group[data-v-d0efd9ca] {
36
36
  width: 230px;
37
37
  margin-right: 24px;
38
38
  }
39
- .l-material-library-group .header[data-v-c01a8f7e] {
39
+ .l-material-library-group .header[data-v-d0efd9ca] {
40
40
  margin-bottom: 16px;
41
41
  display: flex;
42
42
  align-items: center;
43
43
  justify-content: space-between;
44
44
  }
45
- .l-material-library-group .header .title[data-v-c01a8f7e] {
45
+ .l-material-library-group .header .title[data-v-d0efd9ca] {
46
46
  font-size: 16px;
47
47
  font-weight: 600;
48
48
  color: #12141a;
49
49
  }
50
- .l-material-library-group .footer .search[data-v-c01a8f7e] {
50
+ .l-material-library-group .footer .search[data-v-d0efd9ca] {
51
51
  margin-bottom: 8px;
52
52
  }
53
- .l-material-library-group .footer .group-items[data-v-c01a8f7e] {
53
+ .l-material-library-group .footer .group-items[data-v-d0efd9ca] {
54
54
  margin-top: 16px;
55
55
  }
56
- .l-material-library-group .footer .group-items .group-item[data-v-c01a8f7e] {
56
+ .l-material-library-group .footer .group-items .group-item[data-v-d0efd9ca] {
57
57
  height: 46px;
58
58
  display: flex;
59
59
  align-items: center;
60
60
  justify-content: space-between;
61
61
  cursor: pointer;
62
62
  }
63
- .l-material-library-group .footer .group-items .group-item[data-v-c01a8f7e]:hover {
63
+ .l-material-library-group .footer .group-items .group-item[data-v-d0efd9ca]:hover {
64
64
  background-color: #f2f3f5;
65
65
  }
66
- .l-material-library-group .footer .group-items .group-item.active[data-v-c01a8f7e] {
66
+ .l-material-library-group .footer .group-items .group-item.active[data-v-d0efd9ca] {
67
67
  background-color: #f4f7ff;
68
68
  }
69
- .l-material-library-group .footer .group-items .group-item .left[data-v-c01a8f7e] {
69
+ .l-material-library-group .footer .group-items .group-item .left[data-v-d0efd9ca] {
70
70
  display: flex;
71
71
  align-items: center;
72
72
  justify-content: space-between;
73
73
  width: 30px;
74
74
  padding-left: 8px;
75
75
  }
76
- .l-material-library-group .footer .group-items .group-item .left .folder[data-v-c01a8f7e] {
76
+ .l-material-library-group .footer .group-items .group-item .left .folder[data-v-d0efd9ca] {
77
77
  margin-right: 6px;
78
78
  width: 15px;
79
79
  height: 15px;
80
80
  position: relative;
81
81
  top: 1px;
82
82
  }
83
- .l-material-library-group .footer .group-items .group-item .center[data-v-c01a8f7e] {
83
+ .l-material-library-group .footer .group-items .group-item .center[data-v-d0efd9ca] {
84
84
  flex: 1;
85
85
  white-space: nowrap;
86
86
  overflow: hidden;
87
87
  text-overflow: ellipsis;
88
88
  }
89
- .l-material-library-group .footer .group-items .group-item .right[data-v-c01a8f7e] {
89
+ .l-material-library-group .footer .group-items .group-item .right[data-v-d0efd9ca] {
90
90
  width: 30px;
91
91
  padding-right: 16px;
92
92
  }
93
- .checkbox-all[data-v-7c7241de] {
93
+ .checkbox-all[data-v-444cf99a] {
94
94
  width: 200px;
95
95
  margin-top: -38px;
96
96
  background-color: #ffffff;
97
97
  padding-bottom: 6px;
98
98
  }
99
- .right-apps[data-v-7c7241de] {
99
+ .right-apps[data-v-444cf99a] {
100
100
  margin-top: 16px;
101
101
  display: flex;
102
102
  flex-wrap: wrap;
103
103
  }
104
- .right-apps .item[data-v-7c7241de] {
104
+ .right-apps .item[data-v-444cf99a] {
105
105
  width: calc(20% - 16px);
106
106
  margin-bottom: 16px;
107
107
  margin-right: 20px;
108
108
  }
109
- .right-apps .item[data-v-7c7241de]:nth-child(5n) {
109
+ .right-apps .item[data-v-444cf99a]:nth-child(5n) {
110
110
  margin-right: 0 !important;
111
111
  }
112
- .right-apps .item .header[data-v-7c7241de] {
112
+ .right-apps .item .header[data-v-444cf99a] {
113
113
  width: 100%;
114
114
  height: 168.5px;
115
115
  background-color: #f2f3f5;
@@ -118,10 +118,10 @@
118
118
  background-position: center;
119
119
  cursor: pointer;
120
120
  }
121
- .right-apps .item .header img[data-v-7c7241de] {
121
+ .right-apps .item .header img[data-v-444cf99a] {
122
122
  max-width: 100%;
123
123
  }
124
- .right-apps .item .footer[data-v-7c7241de] {
124
+ .right-apps .item .footer[data-v-444cf99a] {
125
125
  padding: 12px;
126
126
  display: flex;
127
127
  align-items: center;
@@ -129,35 +129,35 @@
129
129
  border: 1px solid #f2f3f5;
130
130
  border-radius: 0 0 4px 4px;
131
131
  }
132
- .right-apps .item .footer .checkbox[data-v-7c7241de] {
132
+ .right-apps .item .footer .checkbox[data-v-444cf99a] {
133
133
  width: 30px;
134
134
  position: relative;
135
135
  top: 2px;
136
136
  left: -6px;
137
137
  }
138
- .right-apps .item .footer .name[data-v-7c7241de] {
138
+ .right-apps .item .footer .name[data-v-444cf99a] {
139
139
  flex: 1;
140
140
  margin-left: -8px;
141
141
  overflow: hidden;
142
142
  }
143
- .right-apps .item .footer .name .title[data-v-7c7241de] {
143
+ .right-apps .item .footer .name .title[data-v-444cf99a] {
144
144
  cursor: pointer;
145
145
  white-space: nowrap;
146
146
  overflow: hidden;
147
147
  text-overflow: ellipsis;
148
148
  }
149
- .right-apps .item .footer .icon[data-v-7c7241de] {
149
+ .right-apps .item .footer .icon[data-v-444cf99a] {
150
150
  width: 20px;
151
151
  text-align: right;
152
152
  cursor: pointer;
153
153
  }
154
- .pagination[data-v-7c7241de] {
154
+ .pagination[data-v-444cf99a] {
155
155
  display: flex;
156
156
  justify-content: flex-end;
157
157
  width: 100%;
158
158
  margin-top: 16px;
159
159
  }
160
- .l-material-library-infos[data-v-7c7241de] {
160
+ .l-material-library-infos[data-v-444cf99a] {
161
161
  background-color: #ffffff;
162
162
  border-radius: 2px;
163
163
  padding: 16px;
@@ -193,11 +193,11 @@
193
193
  .operate-omit-list[data-v-0b1d01dd] {
194
194
  color: #1966ff;
195
195
  }
196
- .right-menu .l-material-library-infos[data-v-597e809b] {
196
+ .right-menu .l-material-library-infos[data-v-5a79d54b] {
197
197
  display: flex;
198
198
  align-items: center;
199
199
  }
200
- .right-menu .l-material-library-infos .name[data-v-597e809b] {
200
+ .right-menu .l-material-library-infos .name[data-v-5a79d54b] {
201
201
  margin-left: 6px;
202
202
  font-size: 14px;
203
203
  flex: 1;
@@ -206,13 +206,13 @@
206
206
  overflow: hidden;
207
207
  text-overflow: ellipsis;
208
208
  }
209
- .pagination[data-v-597e809b] {
209
+ .pagination[data-v-5a79d54b] {
210
210
  display: flex;
211
211
  justify-content: flex-end;
212
212
  width: 100%;
213
213
  margin-top: 16px;
214
214
  }
215
- .l-material-library-info[data-v-597e809b] {
215
+ .l-material-library-info[data-v-5a79d54b] {
216
216
  background-color: #ffffff;
217
217
  border-radius: 2px;
218
218
  padding: 16px;
@@ -221,37 +221,37 @@
221
221
  color: #86909c;
222
222
  line-height: 1.75;
223
223
  }
224
- .change-group-items[data-v-3777c371] {
224
+ .change-group-items[data-v-6511b8e9] {
225
225
  min-height: 350px;
226
226
  }
227
- .change-group-items .item[data-v-3777c371] {
227
+ .change-group-items .item[data-v-6511b8e9] {
228
228
  height: 46px;
229
229
  display: flex;
230
230
  align-items: center;
231
231
  justify-content: space-between;
232
232
  cursor: pointer;
233
233
  }
234
- .change-group-items .item[data-v-3777c371]:hover {
234
+ .change-group-items .item[data-v-6511b8e9]:hover {
235
235
  background-color: #f2f3f5;
236
236
  }
237
- .change-group-items .item.active[data-v-3777c371] {
237
+ .change-group-items .item.active[data-v-6511b8e9] {
238
238
  background-color: #f4f7ff;
239
239
  }
240
- .change-group-items .item .img[data-v-3777c371] {
240
+ .change-group-items .item .img[data-v-6511b8e9] {
241
241
  display: flex;
242
242
  align-items: center;
243
243
  justify-content: space-between;
244
244
  width: 30px;
245
245
  padding-left: 8px;
246
246
  }
247
- .change-group-items .item .img .folder[data-v-3777c371] {
247
+ .change-group-items .item .img .folder[data-v-6511b8e9] {
248
248
  margin-right: 6px;
249
249
  width: 15px;
250
250
  height: 15px;
251
251
  position: relative;
252
252
  top: 1px;
253
253
  }
254
- .change-group-items .item .name[data-v-3777c371] {
254
+ .change-group-items .item .name[data-v-6511b8e9] {
255
255
  flex: 1;
256
256
  white-space: nowrap;
257
257
  overflow: hidden;
@@ -285,40 +285,40 @@
285
285
  .l-material-library-upload .upload[data-v-4839e6a6] .mo-upload-progress {
286
286
  display: none;
287
287
  }
288
- .l-material-library-right-content[data-v-5e7ec24d] {
288
+ .l-material-library-right-content[data-v-4085b1b9] {
289
289
  flex: 1;
290
290
  }
291
- .l-material-library-right-content .header[data-v-5e7ec24d] {
291
+ .l-material-library-right-content .header[data-v-4085b1b9] {
292
292
  display: flex;
293
293
  justify-content: space-between;
294
294
  }
295
- .l-material-library-right-content .header .left[data-v-5e7ec24d] {
295
+ .l-material-library-right-content .header .left[data-v-4085b1b9] {
296
296
  display: flex;
297
297
  justify-content: space-between;
298
298
  }
299
- .l-material-library-right-content .header .more-icon-down[data-v-5e7ec24d] {
299
+ .l-material-library-right-content .header .more-icon-down[data-v-4085b1b9] {
300
300
  position: relative;
301
301
  top: -1px;
302
302
  margin-left: 6px;
303
303
  font-size: 15px;
304
304
  stroke-width: 5;
305
305
  }
306
- .l-material-library-right-content .toolbar[data-v-5e7ec24d] {
306
+ .l-material-library-right-content .toolbar[data-v-4085b1b9] {
307
307
  margin: 16px 0;
308
308
  display: flex;
309
309
  align-items: center;
310
310
  justify-content: space-between;
311
311
  }
312
- .l-material-library-right-content .toolbar .apps[data-v-5e7ec24d],
313
- .l-material-library-right-content .toolbar .menu[data-v-5e7ec24d] {
312
+ .l-material-library-right-content .toolbar .apps[data-v-4085b1b9],
313
+ .l-material-library-right-content .toolbar .menu[data-v-4085b1b9] {
314
314
  margin-left: 8px;
315
315
  font-size: 20px;
316
316
  stroke-width: 5;
317
317
  }
318
- .l-material-library-right-content .toolbar .apps[data-v-5e7ec24d]:hover,
319
- .l-material-library-right-content .toolbar .menu[data-v-5e7ec24d]:hover,
320
- .l-material-library-right-content .toolbar .apps.active[data-v-5e7ec24d],
321
- .l-material-library-right-content .toolbar .menu.active[data-v-5e7ec24d] {
318
+ .l-material-library-right-content .toolbar .apps[data-v-4085b1b9]:hover,
319
+ .l-material-library-right-content .toolbar .menu[data-v-4085b1b9]:hover,
320
+ .l-material-library-right-content .toolbar .apps.active[data-v-4085b1b9],
321
+ .l-material-library-right-content .toolbar .menu.active[data-v-4085b1b9] {
322
322
  color: #1966ff;
323
323
  cursor: pointer;
324
324
  }