Explorar el Código

图片上传组件新增disabled属性

RuoYi hace 11 meses
padre
commit
056cf94082

+ 2 - 2
ruoyi-ui/src/components/FileUpload/index.vue

@@ -84,7 +84,7 @@ export default {
84 84
       type: Boolean,
85 85
       default: false
86 86
     },
87
-      // 拖动排序
87
+    // 拖动排序
88 88
     drag: {
89 89
       type: Boolean,
90 90
       default: true
@@ -102,7 +102,7 @@ export default {
102 102
     }
103 103
   },
104 104
   mounted() {
105
-    if (this.drag) {
105
+    if (this.drag && !this.disabled) {
106 106
       this.$nextTick(() => {
107 107
         const element = this.$refs.uploadFileList?.$el || this.$refs.uploadFileList
108 108
         Sortable.create(element, {

+ 16 - 5
ruoyi-ui/src/components/ImageUpload/index.vue

@@ -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 {