소스 검색

图片上传组件新增disabled属性

RuoYi 3 달 전
부모
커밋
9ee89f7085
2개의 변경된 파일13개의 추가작업 그리고 3개의 파일을 삭제
  1. 1 1
      src/components/FileUpload/index.vue
  2. 12 2
      src/components/ImageUpload/index.vue

+ 1 - 1
src/components/FileUpload/index.vue

@@ -214,7 +214,7 @@ function listToString(list, separator) {
 
 // 初始化拖拽排序
 onMounted(() => {
-  if (props.drag) {
+  if (props.drag && !props.disabled) {
     nextTick(() => {
       const element = proxy.$refs.uploadFileList?.$el || proxy.$refs.uploadFileList
       Sortable.create(element, {

+ 12 - 2
src/components/ImageUpload/index.vue

@@ -2,6 +2,7 @@
   <div class="component-upload-image">
     <el-upload
       multiple
+      :disabled="disabled"
       :action="uploadImgUrl"
       list-type="picture-card"
       :on-success="handleUploadSuccess"
@@ -21,7 +22,7 @@
       <el-icon class="avatar-uploader-icon"><plus /></el-icon>
     </el-upload>
     <!-- 上传提示 -->
-    <div class="el-upload__tip" v-if="showTip">
+    <div class="el-upload__tip" v-if="showTip && !disabled">
       请上传
       <template v-if="fileSize">
         大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
@@ -82,6 +83,11 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
+  // 禁用组件(仅查看图片)
+  disabled: {
+    type: Boolean,
+    default: false
+  },
   // 拖动排序
   drag: {
     type: Boolean,
@@ -225,7 +231,7 @@ function listToString(list, separator) {
 
 // 初始化拖拽排序
 onMounted(() => {
-  if (props.drag) {
+  if (props.drag && !props.disabled) {
     nextTick(() => {
       const element = proxy.$refs.imageUpload?.$el?.querySelector('.el-upload-list')
       Sortable.create(element, {
@@ -245,4 +251,8 @@ onMounted(() => {
 :deep(.hide .el-upload--picture-card) {
     display: none;
 }
+
+:deep(.el-upload.el-upload--picture-card.is-disabled) {
+  display: none !important;
+} 
 </style>