ソースを参照

图片上传组件新增disabled属性

RuoYi 11 ヶ月 前
コミット
056cf94082
共有2 個のファイルを変更した18 個の追加7 個の削除を含む
  1. 2 2
      ruoyi-ui/src/components/FileUpload/index.vue
  2. 16 5
      ruoyi-ui/src/components/ImageUpload/index.vue

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

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

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

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