@moment-design/material-library 0.1.12 → 0.1.14

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