|
|
@@ -2,6 +2,7 @@
|
|
2
|
2
|
<div class="component-upload-image">
|
|
3
|
3
|
<el-upload
|
|
4
|
4
|
multiple
|
|
|
5
|
+ :disabled="disabled"
|
|
5
|
6
|
:action="uploadImgUrl"
|
|
6
|
7
|
list-type="picture-card"
|
|
7
|
8
|
:on-success="handleUploadSuccess"
|
|
|
@@ -22,7 +23,7 @@
|
|
22
|
23
|
</el-upload>
|
|
23
|
24
|
|
|
24
|
25
|
<!-- 上传提示 -->
|
|
25
|
|
- <div class="el-upload__tip" slot="tip" v-if="showTip">
|
|
|
26
|
+ <div class="el-upload__tip" slot="tip" v-if="showTip && !disabled">
|
|
26
|
27
|
请上传
|
|
27
|
28
|
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
|
|
28
|
29
|
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
|
|
|
@@ -79,7 +80,12 @@ export default {
|
|
79
|
80
|
type: Boolean,
|
|
80
|
81
|
default: true
|
|
81
|
82
|
},
|
|
82
|
|
- // 拖动排序
|
|
|
83
|
+ // 禁用组件(仅查看图片)
|
|
|
84
|
+ disabled: {
|
|
|
85
|
+ type: Boolean,
|
|
|
86
|
+ default: false
|
|
|
87
|
+ },
|
|
|
88
|
+ // 拖动排序
|
|
83
|
89
|
drag: {
|
|
84
|
90
|
type: Boolean,
|
|
85
|
91
|
default: true
|
|
|
@@ -100,7 +106,7 @@ export default {
|
|
100
|
106
|
}
|
|
101
|
107
|
},
|
|
102
|
108
|
mounted() {
|
|
103
|
|
- if (this.drag) {
|
|
|
109
|
+ if (this.drag && !this.disabled) {
|
|
104
|
110
|
this.$nextTick(() => {
|
|
105
|
111
|
const element = this.$refs.imageUpload?.$el?.querySelector('.el-upload-list')
|
|
106
|
112
|
Sortable.create(element, {
|
|
|
@@ -239,12 +245,17 @@ export default {
|
|
239
|
245
|
<style scoped lang="scss">
|
|
240
|
246
|
// .el-upload--picture-card 控制加号部分
|
|
241
|
247
|
::v-deep.hide .el-upload--picture-card {
|
|
242
|
|
- display: none;
|
|
|
248
|
+ display: none;
|
|
243
|
249
|
}
|
|
|
250
|
+
|
|
|
251
|
+::v-deep .el-upload-list--picture-card.is-disabled + .el-upload--picture-card {
|
|
|
252
|
+ display: none !important;
|
|
|
253
|
+}
|
|
|
254
|
+
|
|
244
|
255
|
// 去掉动画效果
|
|
245
|
256
|
::v-deep .el-list-enter-active,
|
|
246
|
257
|
::v-deep .el-list-leave-active {
|
|
247
|
|
- transition: all 0s;
|
|
|
258
|
+ transition: all 0s;
|
|
248
|
259
|
}
|
|
249
|
260
|
|
|
250
|
261
|
::v-deep .el-list-enter, .el-list-leave-active {
|