bri-components 1.6.5 → 1.6.7

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.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/controls/base/BriUpload/BriUpload.vue +21 -8
  3. package/src/components/controls/base/BriUpload/BriUploadImage.vue +44 -51
  4. package/src/components/controls/base/BriUpload/uploadList.vue +227 -272
  5. package/src/components/controls/base/BriUpload/uploadMixin.js +5 -0
  6. package/src/components/small/DshDropdown.vue +4 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bri-components",
3
- "version": "1.6.5",
3
+ "version": "1.6.7",
4
4
  "author": "dengshanghui",
5
5
  "description": "a component lib for vue project",
6
6
  "main": "src/index.js",
package/src/components/controls/base/BriUpload/BriUpload.vue CHANGED
@@ -68,7 +68,7 @@
68
68
  ></dsh-icons>
69
69
 
70
70
  <span v-if="showMode !== 'inline'">
71
- 点击上传{{ subType === 'image' ? "图片" : "文件" }}
71
+ 点击上传{{ subTypeName }}
72
72
  </span>
73
73
  </template>
74
74
  </div>
@@ -148,6 +148,13 @@
148
148
  subType () {
149
149
  return this.selfPropsObj._fileType || "file";
150
150
  },
151
+ subTypeName () {
152
+ return this.subType === "image"
153
+ ? "图片"
154
+ : this.subType === "video"
155
+ ? "视频"
156
+ : "文件";
157
+ },
151
158
  showMode () {
152
159
  return this.isInTable
153
160
  ? this.selfPropsObj._inTableStyle === "list" && this.disabled
@@ -193,14 +200,15 @@
193
200
  },
194
201
  created () {},
195
202
  methods: {
196
- clickUpload () {
197
- if (!this.disabled) {
198
- this.$refs.input.click();
199
- }
200
- },
201
203
  clickDeteItem (fileItem, fileIndex) {
202
- this.curValList.splice(fileIndex, 1);
203
- this.curValList = [...this.curValList];
204
+ this.$Modal.confirm({
205
+ title: "提示",
206
+ content: `确定删除${fileItem.name || "此文件"}吗？`,
207
+ onOk: () => {
208
+ this.curValList.splice(fileIndex, 1);
209
+ this.curValList = [...this.curValList];
210
+ }
211
+ });
204
212
  },
205
213
  handleEditName (fileItem) {
206
214
  this.$https({
@@ -231,6 +239,11 @@
231
239
  }
232
240
  },
233
241
 
242
+ clickUpload () {
243
+ if (!this.disabled) {
244
+ this.$refs.input.click();
245
+ }
246
+ },
234
247
  handleChange (event) {
235
248
  if (event.target.files) {
236
249
  this.dealUpload(event.target.files);
package/src/components/controls/base/BriUpload/BriUploadImage.vue CHANGED
@@ -149,8 +149,7 @@
149
149
  _canAction: false, // 是否使用操作图标
150
150
  _cropper: false, // 使用裁剪
151
151
  _useBorderRadius: false, // 用圆角
152
-
153
- _requestOssType: "", //
152
+ _imageResizeConfig: undefined,
154
153
  _aliOssType: "binaryMultipartUpload", // 阿里云上传方式
155
154
 
156
155
  ...this.propsObj
@@ -184,9 +183,6 @@
184
183
  h: 100
185
184
  };
186
185
  },
187
- requestOssType () {
188
- return this.selfPropsObj._requestOssType;
189
- },
190
186
 
191
187
  modalPropsObj () {
192
188
  return {
@@ -207,6 +203,29 @@
207
203
  },
208
204
  created () {},
209
205
  methods: {
206
+ // 点击文件预览
207
+ handlePreview (file) {
208
+ let viewerImage = this.$refs.viewerImage;
209
+ let viewer = new Viewer(viewerImage, {
210
+ url: "data-original",
211
+ hidden: function () {
212
+ viewer.destroy();
213
+ },
214
+ loop: false,
215
+ zIndex: 2147483647
216
+ });
217
+ viewer.show();
218
+ },
219
+ // 点击文件删除 - fileList服务器的数据列表
220
+ handleRemove (file) {
221
+ this.uploadType = "file"; // 删除后可以重新上传
222
+ this.curVal = "";
223
+ this.change(this.value);
224
+ },
225
+ change (...params) {
226
+ this.$emit("change", ...params);
227
+ },
228
+
210
229
  handleChange (event) {
211
230
  if (event.target.files.length) {
212
231
  const file = event.target.files[0];
@@ -242,11 +261,18 @@
242
261
  },
243
262
  // 提交裁剪后的图片
244
263
  submitCropImage () {
245
- const cropImg = this.$refs.cropperDom.getCroppedCanvas().toDataURL(); // base64格式
246
- this.dealPostImage(cropImg);
264
+ this.dealPostImage(this.$refs.cropperDom.getCroppedCanvas().toDataURL()); // base64格式
247
265
 
248
266
  this.closeAvatarModal();
249
267
  },
268
+ // 处理图片的提交
269
+ dealPostImage (fileData) {
270
+ this.handlePost((ossType) => {
271
+ return ossType === "local"
272
+ ? this.dataURLtoFile(fileData, "") // 本地上传，将图片Base64转成文件
273
+ : Buffer.from(fileData.split(",")[1], "base64"); // 阿里上传，object类型
274
+ });
275
+ },
250
276
  successCb (response, res) {
251
277
  this.curVal = res.data.downloadUrl;
252
278
  this.$emit("change", res);
@@ -260,26 +286,6 @@
260
286
  // get image data for post processing, e.g. upload or setting image src
261
287
  this.cropImg = this.$refs.cropperDom.getCroppedCanvas().toDataURL(); // base64格式
262
288
  },
263
- // 处理图片的提交
264
- dealPostImage (data) {
265
- // 本地上传
266
- if (this.requestOssType === "local") {
267
- const imgFile = this.dataURLtoFile(data, ""); // 将图片Base64转成文件
268
- this.handlePost(imgFile); // object类型
269
- // {
270
- // lastModified: 1752065308269
271
- // name: ".png"
272
- // size: 528557
273
- // type: "image/png"
274
- // webkitRelativePath: ""
275
- // }
276
- }
277
- // 阿里上传用
278
- else {
279
- const dataBuffer = Buffer.from(data.split(",")[1], "base64");
280
- this.handlePost(dataBuffer); // object类型
281
- }
282
- },
283
289
  // 将图片Base64转成文件
284
290
  dataURLtoFile (dataurl, filename) {
285
291
  // 获取文件扩展名称
@@ -292,30 +298,15 @@
292
298
  while (n--) {
293
299
  u8arr[n] = bstr.charCodeAt(n);
294
300
  }
295
- return new File([u8arr], `${filename}.${extension}`, { type: mime });
296
- },
297
301
 
298
- // 点击文件预览
299
- handlePreview (file) {
300
- let viewerImage = this.$refs.viewerImage;
301
- let viewer = new Viewer(viewerImage, {
302
- url: "data-original",
303
- hidden: function () {
304
- viewer.destroy();
305
- },
306
- loop: false,
307
- zIndex: 2147483647
308
- });
309
- viewer.show();
310
- },
311
- // 点击文件删除 - fileList服务器的数据列表
312
- handleRemove (file) {
313
- this.uploadType = "file"; // 删除后可以重新上传
314
- this.curVal = "";
315
- this.change(this.value);
316
- },
317
- change (...params) {
318
- this.$emit("change", ...params);
302
+ return new File([u8arr], `${filename}.${extension}`, { type: mime });
303
+ // {
304
+ // lastModified: 1752065308269
305
+ // name: ".png"
306
+ // size: 528557
307
+ // type: "image/png"
308
+ // webkitRelativePath: ""
309
+ // }
319
310
  },
320
311
 
321
312
  // 打开修改头像
@@ -344,9 +335,9 @@
344
335
  width: 100%;
345
336
 
346
337
  &-img {
338
+ float: left;
347
339
  width: 100px;
348
340
  height: 100px;
349
- float: left;
350
341
  background-repeat: no-repeat;
351
342
  background-position: center;
352
343
  background-size: contain;
@@ -357,7 +348,9 @@
357
348
  overflow: hidden;
358
349
 
359
350
  &-action {
351
+ font-weight: 600;
360
352
  color: @themeColor;
353
+ // color: #ffffff;
361
354
  cursor: pointer;
362
355
  }
363
356
 
package/src/components/controls/base/BriUpload/uploadList.vue CHANGED
@@ -3,39 +3,38 @@
3
3
  uploadList: true,
4
4
  [`uploadList-${showMode}`]: true
5
5
  }">
6
- <!-- 普通文本模式 -->
7
- <template v-if="showMode ==='old'">
8
- <!-- 有值 -->
6
+ <!-- 有值 -->
7
+ <template v-if="files.length">
8
+ <!-- 在表格中展开、普通文本模式 -->
9
9
  <div
10
- v-if="files.length"
10
+ v-if="['old', 'tableList'].includes(showMode)"
11
11
  ref="viewerImage"
12
- :class="[
13
- 'uploadList-list',
14
- `uploadList-list-${subType}`
15
- ]"
12
+ :class="{
13
+ 'uploadList-list-image': subType === 'image',
14
+ 'uploadList-list-file': subType !== 'image'
15
+ }"
16
16
  >
17
17
  <div
18
18
  v-for="(fileItem, fileIndex) in files"
19
19
  :key="fileItem._key || fileItem._id"
20
- :class="{
21
- 'item': subType !== 'file',
22
- [`item-${subType}`]: true
23
- }"
20
+ class="item"
24
21
  >
25
22
  <!-- 展示图 -->
26
- <div class="item-show">
23
+ <template>
27
24
  <img
28
25
  v-if="fileItem.mimetype.includes('image')"
26
+ class="item-img"
29
27
  :data-original="fileItem.url"
30
28
  :src="$imageResize(fileItem.url, imageResizeConfig)"
31
29
  :alt="fileItem.name"
32
30
  >
33
31
  <img
34
32
  v-else
33
+ class="item-img"
35
34
  :src="getFileImage(fileItem)"
36
35
  :alt="fileItem.name"
37
36
  >
38
- </div>
37
+ </template>
39
38
 
40
39
  <!-- 展示名称 -->
41
40
  <p class="item-name">{{ fileItem.name }}</p>
@@ -50,84 +49,49 @@
50
49
  </div>
51
50
  </div>
52
51
 
53
- <!-- 无值 -->
54
- <div
55
- v-else
56
- class="uploadList-old-odata"
57
- >
58
- <span>{{ emptyShowVal }}</span>
59
- </div>
60
- </template>
61
-
62
- <!-- 在表格中展开 -->
63
- <template v-else-if="showMode ==='tableList'">
64
- <!-- 有值 -->
65
- <div
66
- v-if="files.length"
67
- ref="viewerImage"
68
- :class="[
69
- 'uploadList-list',
70
- `uploadList-list-${subType}`
71
- ]"
72
- >
52
+ <!-- 框内方式 -->
53
+ <template v-else>
54
+ <!-- 图片类型 -->
73
55
  <div
74
- v-for="(fileItem, fileIndex) in files"
75
- :key="fileItem._key || fileItem._id"
76
- :class="{
77
- 'item': subType !== 'file',
78
- [`item-${subType}`]: true
79
- }"
56
+ v-if="subType === 'image'"
57
+ ref="viewerImage"
58
+ class="uploadList-inline-list"
80
59
  >
81
- <!-- 展示图 -->
82
- <div class="item-show">
83
- <img
84
- v-if="fileItem.mimetype.includes('image')"
85
- :data-original="fileItem.url"
86
- :src="$imageResize(fileItem.url, imageResizeConfig)"
87
- :alt="fileItem.name"
88
- >
89
- <img
90
- v-else
91
- :src="getFileImage(fileItem)"
92
- :alt="fileItem.name"
93
- >
94
- </div>
95
-
96
- <!-- 展示名称 -->
97
- <p class="item-name">{{ fileItem.name }}</p>
60
+ <div
61
+ v-for="(fileItem, fileIndex) in files"
62
+ :key="fileItem.url"
63
+ class="item"
64
+ >
65
+ <template>
66
+ <img
67
+ v-if="fileItem.mimetype.includes('image')"
68
+ :data-original="fileItem.url"
69
+ :src="$imageResize(fileItem.url, imageResizeConfig)"
70
+ :alt="fileItem.name"
71
+ >
72
+ <img
73
+ v-else
74
+ :src="getFileImage(fileItem)"
75
+ :alt="fileItem.name"
76
+ >
77
+ </template>
98
78
 
99
- <!-- 图标 -->
100
- <dsh-icons
101
- class="item-action"
102
- item-class="item-action-icon"
103
- :list="$getOperationList(getBtns(fileItem))"
104
- @click="$dispatchEvent($event, fileItem, fileIndex)"
105
- ></dsh-icons>
79
+ <dsh-icons
80
+ class="item-action"
81
+ item-class="item-action-icon"
82
+ :list="$getOperationList(getBtns(fileItem))"
83
+ @click="$dispatchEvent($event, fileItem, fileIndex)"
84
+ ></dsh-icons>
85
+ </div>
106
86
  </div>
107
- </div>
108
87
 
109
- <!-- 无值 -->
110
- <div
111
- v-else
112
- class="uploadList-inline-nodata"
113
- >
114
- <span>{{ emptyShowVal }}</span>
115
- </div>
116
- </template>
117
-
118
- <!-- 新展示方式 -->
119
- <template v-else>
120
- <!-- 文件类型 -->
121
- <div
122
- v-if="subType === 'file'"
123
- ref="viewerImage"
124
- >
125
- <!-- 有值 -->
126
- <template v-if="files.length">
88
+ <!-- 文件类型 -->
89
+ <div v-else>
127
90
  <dsh-dropdown
91
+ ref="dshdropdown"
92
+ class="uploadList-inline-dropdown"
128
93
  :list="files"
129
94
  trigger="hover"
130
- class="uploadList-inline-dropdown"
131
95
  >
132
96
  <div :class="{
133
97
  'uploadList-inline-dropdown-fileName': true,
@@ -145,19 +109,21 @@
145
109
  slot-scope="{ dropdownItem, dropdownIndex }"
146
110
  class="uploadList-inline-dropdown-item"
147
111
  >
148
- <img
149
- v-if="dropdownItem.mimetype.includes('image')"
150
- :data-original="dropdownItem.url"
151
- :src="$imageResize(dropdownItem.url, imageResizeConfig)"
152
- :alt="dropdownItem.name"
153
- class="item-img"
154
- >
155
- <img
156
- v-else
157
- :src="getFileImage(dropdownItem)"
158
- :alt="dropdownItem.name"
159
- class="item-img"
160
- >
112
+ <template>
113
+ <img
114
+ v-if="dropdownItem.mimetype.includes('image')"
115
+ class="item-img"
116
+ :data-original="dropdownItem.url"
117
+ :src="$imageResize(dropdownItem.url, imageResizeConfig)"
118
+ :alt="dropdownItem.name"
119
+ >
120
+ <img
121
+ v-else
122
+ class="item-img"
123
+ :src="getFileImage(dropdownItem)"
124
+ :alt="dropdownItem.name"
125
+ >
126
+ </template>
161
127
 
162
128
  <p class="item-name">{{ dropdownItem.name }}</p>
163
129
 
@@ -169,60 +135,20 @@
169
135
  ></dsh-icons>
170
136
  </div>
171
137
  </dsh-dropdown>
172
- </template>
173
-
174
- <!-- 无值 -->
175
- <span
176
- v-else
177
- class="uploadList-inline-nodata"
178
- >
179
- {{ emptyShowVal }}
180
- </span>
181
- </div>
182
-
183
- <!-- 图片类型 -->
184
- <template v-else>
185
- <!-- 有值 -->
186
- <div
187
- v-if="files.length"
188
- ref="viewerImage"
189
- class="uploadList-inline-list"
190
- >
191
- <div
192
- v-for="(fileItem, fileIndex) in files"
193
- :key="fileItem.url"
194
- class="item"
195
- >
196
- <img
197
- v-if="fileItem.mimetype.includes('image')"
198
- :data-original="fileItem.url"
199
- :src="$imageResize(fileItem.url, imageResizeConfig)"
200
- :alt="fileItem.name"
201
- >
202
- <img
203
- v-else
204
- :src="getFileImage(fileItem)"
205
- :alt="fileItem.name"
206
- >
207
-
208
- <dsh-icons
209
- class="item-action"
210
- item-class="item-action-icon"
211
- :list="$getOperationList(getBtns(fileItem))"
212
- @click="$dispatchEvent($event, fileItem, fileIndex)"
213
- ></dsh-icons>
214
- </div>
215
138
  </div>
216
-
217
- <!-- 无值 -->
218
- <span
219
- v-else
220
- class="uploadList-inline-nodata"
221
- >
222
- {{ emptyShowVal }}
223
- </span>
224
139
  </template>
225
140
  </template>
141
+
142
+ <!-- 无值 -->
143
+ <div
144
+ v-else
145
+ :class="{
146
+ 'uploadList-nodata-old': ['old'].includes(showMode),
147
+ 'uploadList-nodata': !['old'].includes(showMode)
148
+ }"
149
+ >
150
+ <span>{{ emptyShowVal }}</span>
151
+ </div>
226
152
  </div>
227
153
  </template>
228
154
 
@@ -278,6 +204,9 @@
278
204
  type: "canDelete",
279
205
  customIcon: "bico-shanchu",
280
206
  size: "14",
207
+ style: {
208
+ color: "#ed4014"
209
+ },
281
210
  event: "clickDeleteItem"
282
211
  },
283
212
  canEdit: {
@@ -334,7 +263,7 @@
334
263
  // 点击文件预览 -file服务器的数据列表
335
264
  clickPreview (operationItem, fileItem, fileIndex) {
336
265
  if (fileItem.mimetype.includes("image")) {
337
- const viewerImage = this.$refs.viewerImage;
266
+ const viewerImage = this.$refs.viewerImage || this.$refs.dshdropdown.$refs.listPanelDom;
338
267
  const findIndex = this.files
339
268
  .filter(valItem => valItem.mimetype.includes("image"))
340
269
  .findIndex(valItem => valItem.url === fileItem.url);
@@ -459,118 +388,114 @@
459
388
  </script>
460
389
 
461
390
  <style lang="less" scoped>
391
+ @keyframes toTop {
392
+ from {
393
+ top: 100%;
394
+ }
395
+
396
+ to {
397
+ top: 0;
398
+ }
399
+ }
400
+
462
401
  .uploadList {
463
402
  width: 100%;
464
403
  overflow: auto;
465
404
 
466
405
  &-list {
467
- display: flex;
468
- flex-wrap: nowrap;
469
-
470
- .item {
471
- flex: 0 0 120px;
472
- height: 120px;
473
- margin-right: 10px;
474
- border-radius: @borderRadius;
475
- background: #f4f5fa;
476
- text-align: center;
477
- overflow: hidden;
478
- display: inline-flex;
479
- flex-direction: column;
480
- justify-content: space-between;
481
- position: relative;
406
+ // 其它子类型时
407
+ &-image {
408
+ display: flex;
409
+ flex-wrap: nowrap;
482
410
 
483
- &-show {
484
- display: flex;
411
+ .item {
412
+ flex: 0 0 120px;
413
+ height: 120px;
414
+ margin-right: 10px;
415
+ border-radius: @borderRadius;
416
+ background: #f4f5fa;
417
+ text-align: center;
485
418
  overflow: hidden;
486
- align-items: center;
487
- justify-content: center;
488
- flex: 2;
489
- min-height: 50px;
419
+ display: inline-flex;
420
+ flex-direction: column;
421
+ justify-content: space-between;
422
+ position: relative;
490
423
 
491
- img {
492
- max-width: 100%;
493
- max-height: 100%;
424
+ &-img {
425
+ flex: 1;
426
+ min-height: 50px;
427
+ overflow: hidden;
494
428
  }
495
- }
496
-
497
- &-name {
498
- padding: 0 8px;
499
- overflow: hidden;
500
- text-overflow: ellipsis;
501
- white-space: nowrap;
502
- color: @themeColor;
503
- }
504
429
 
505
- &-action {
506
- position: absolute;
507
- right: 0px;
508
- top: 0px;
509
- left: 0px;
510
- bottom: 0px;
511
- background-color: @placeholderColor;
512
- display: none !important;
513
- align-items: center;
514
- justify-content: center;
430
+ &-name {
431
+ padding: 2px 8px;
432
+ color: @themeColor;
433
+ white-space: nowrap;
434
+ text-overflow: ellipsis;
435
+ overflow: hidden;
436
+ }
515
437
 
516
- &-icon {
517
- width: 22px;
518
- height: 22px;
519
- line-height: 22px;
520
- color: #fff;
438
+ &-action {
439
+ display: none;
440
+ position: absolute;
441
+ right: 0px;
442
+ top: 0px;
443
+ left: 0px;
444
+ bottom: 0px;
445
+ background-color: @placeholderColor;
521
446
  }
522
- }
523
447
 
524
- &:hover {
525
- .item-action {
526
- display: flex !important;
448
+ &:hover {
449
+ .item-action {
450
+ display: flex;
451
+ justify-content: center;
452
+ align-items: center;
453
+ }
527
454
  }
528
455
  }
529
456
  }
530
457
 
531
- // file 模式
458
+ // file子类型时
532
459
  &-file {
460
+ display: flex;
533
461
  flex-direction: column;
462
+ // flex-wrap: nowrap;
534
463
 
535
- .item-file {
464
+ .item {
536
465
  flex: 0 0 100%;
537
466
  height: auto;
467
+ margin: 0px;
468
+ padding: 4px 8px;
469
+ border-radius: 0px;
470
+ background: transparent;
538
471
  display: flex;
539
472
  flex-direction: row;
540
473
  justify-content: space-between;
541
474
  align-items: center;
542
- border-radius: 0px;
543
- margin: 0px;
544
- padding: 2px 0;
545
- background: transparent;
546
475
 
547
- .item {
548
- &-show {
549
- flex: 0 0 22px;
550
- min-height: 20px;
551
- img {
552
- width: 22px;
553
- height: 22px;
554
- }
555
- }
556
-
557
- &-name {
558
- flex: 1;
559
- text-align: left;
560
- color: @textColor;
561
- }
476
+ &-img {
477
+ width: 22px;
478
+ height: 22px;
479
+ }
562
480
 
563
- &-action {
564
- position: static;
565
- display: flex !important;
566
- background: transparent;
567
- white-space: nowrap;
481
+ &-name {
482
+ flex: 1;
483
+ min-width: 100px;
484
+ padding: 2px 8px;
485
+ text-align: left;
486
+ color: @textColor;
487
+ // white-space: normal;
488
+ word-wrap: break-word; /* 或 overflow-wrap: break-word; */
489
+ word-break: break-all; /* 这会在任何字符边界处断行 */
490
+ overflow: hidden;
491
+ }
568
492
 
569
- &-icon {
570
- color: @contentColor;
571
- width: 16px;
572
- }
573
- }
493
+ &-action {
494
+ // width: 80px;
495
+ background: transparent;
496
+ white-space: nowrap;
497
+ position: static;
498
+ display: flex !important;
574
499
  }
575
500
 
576
501
  &:hover {
@@ -580,24 +505,25 @@
580
505
  }
581
506
  }
582
507
 
583
- // 普通文件
584
- &-old {
585
- margin: 16px;
508
+ &-nodata {
509
+ padding-left: 7px;
510
+ line-height: 32px;
511
+ color: @placeholderColor;
586
512
 
587
- &-nodata {
513
+ &-old {
588
514
  width: 100%;
589
515
  height: 100%;
590
516
  text-align: center;
591
517
  line-height: 120px;
592
518
  color: @placeholderColor;
593
519
  white-space: nowrap;
594
-
595
- span {
596
- margin-left: 5px;
597
- }
598
520
  }
599
521
  }
600
522
 
523
+ &-old {
524
+ margin: 16px;
525
+ }
526
+
601
527
  &-inline {
602
528
  height: 32px;
603
529
  line-height: 32px;
@@ -629,23 +555,19 @@
629
555
  }
630
556
 
631
557
  &-name {
632
- white-space: nowrap;
633
- overflow: hidden;
634
- text-overflow: ellipsis;
635
- margin: 0 8px;
636
558
  flex: 1;
559
+ margin: 0 8px;
637
560
  text-align: left;
561
+ // white-space: normal;
562
+ // word-wrap: break-word; /* 或 overflow-wrap: break-word; */
563
+ word-break: break-all; /* 这会在任何字符边界处断行 */
564
+ overflow: hidden;
638
565
  }
639
566
 
640
567
  &-action {
641
568
  display: flex;
642
569
  align-items: center;
643
570
  justify-content: flex-end;
644
-
645
- &-icon {
646
- width: 16px;
647
- color: @contentColor;
648
- }
649
571
  }
650
572
  }
651
573
  }
@@ -675,49 +597,82 @@
675
597
  }
676
598
 
677
599
  &-action {
600
+ display: none !important;
678
601
  position: absolute;
679
602
  left: 0;
680
603
  right: 0;
681
604
  top: 0;
682
605
  bottom: 0;
683
- display: none !important;
684
606
  background-color: @placeholderColor;
685
607
  color: #fff;
686
- align-items: center;
687
- justify-content: center;
688
- flex-wrap: wrap;
608
+ }
689
609
 
690
- &-icon {
691
- width: 16px;
692
- height: 16px;
693
- font-size: 16px !important;
694
- margin: 0px;
610
+ &:hover {
611
+ .item-action {
612
+ display: flex !important;
613
+ align-items: center;
614
+ justify-content: center;
615
+ flex-wrap: wrap;
616
+ animation: toTop 0.1s;
695
617
  }
696
618
  }
697
-
698
- @keyframes toTop {
699
- from {
700
- top: 100%;
619
+ }
620
+ }
621
+ }
622
+ }
623
+ </style>
624
+ <style lang="less">
625
+ .uploadList {
626
+ &-list {
627
+ &-image {
628
+ .item {
629
+ &-action {
630
+ &-icon {
631
+ width: 22px;
632
+ height: 22px;
633
+ line-height: 22px;
634
+ color: #fff;
701
635
  }
636
+ }
637
+ }
638
+ }
702
639
 
703
- to {
704
- top: 0;
640
+ // file类型时
641
+ &-file {
642
+ .item {
643
+ &-action {
644
+ &-icon {
645
+ width: 16px;
646
+ color: @themeColor;
705
647
  }
706
648
  }
649
+ }
650
+ }
651
+ }
707
652
 
708
- &:hover {
709
- .item-action {
710
- display: flex !important;
711
- animation: toTop 0.1s;
653
+ &-inline {
654
+ &-dropdown-item {
655
+ .item {
656
+ &-action {
657
+ &-icon {
658
+ width: 16px;
659
+ color: @themeColor;
712
660
  }
713
661
  }
714
662
  }
715
663
  }
716
664
 
717
- &-nodata {
718
- padding-left: 7px;
719
- line-height: 32px;
720
- color: @placeholderColor;
665
+ &-list {
666
+ .item {
667
+ &-action {
668
+ &-icon {
669
+ width: 16px;
670
+ height: 16px;
671
+ margin: 0px;
672
+ font-size: 16px !important;
673
+ }
674
+ }
675
+ }
721
676
  }
722
677
  }
723
678
  }
package/src/components/controls/base/BriUpload/uploadMixin.js CHANGED
@@ -41,6 +41,11 @@ export default {
41
41
  callback: res => {
42
42
  this.uploadType = "file";
43
43
 
44
+ // BriUploadImage使用时，file参数是个函数
45
+ if (typeof file === "function") {
46
+ file = file(res.ossType);
47
+ }
48
+
44
49
  if (res.ossType === "ali-oss") {
45
50
  // 上传到阿里云res
46
51
  if (this.aliOssType === "binaryMultipartUpload") {
package/src/components/small/DshDropdown.vue CHANGED
@@ -19,6 +19,7 @@
19
19
  <!-- 下拉面板 -->
20
20
  <div
21
21
  v-if="list.length"
22
+ ref="listPanelDom"
22
23
  slot="list"
23
24
  :class="['DshDropdown-list', menuClass]"
24
25
  >
@@ -51,9 +52,9 @@
51
52
  v-for="(dropdownItem, dropdownIndex) in showList"
52
53
  :key="dropdownItem._id || dropdownItem._key || dropdownItem.type"
53
54
  :class="{
54
- 'list-item': true,
55
- 'list-item-disabled': dropdownItem.disabled
56
- }"
55
+ 'list-item': true,
56
+ 'list-item-disabled': dropdownItem.disabled
57
+ }"
57
58
  :name="dropdownItem.name"
58
59
  :disabled="dropdownItem.disabled"
59
60
  :divided="dropdownItem.divided"