附件展开与收起

src/business/platform/file/attachment/index.vue

@@ -55,7 +55,6 @@
         />
       </template>
     </template>
-
     <ul
       v-if="$utils.isNotEmpty(items)"
       :class="[
@@ -77,7 +76,7 @@
         @update="updateSort"
       >
         <li
-          v-for="(file, index) in items"
+          v-for="(file, index) in displayedList"
           :key="index"
           :class="['el-upload-list__item', focusing ? 'focusing' : '']"
           tabindex="0"
@@ -166,6 +165,14 @@
         </li>
       </vue-draggable>
     </ul>
+    <el-button
+      v-if="shouldShowButton"
+      @click="toggleExpand"
+      type="text"
+      :icon="isExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
+    >
+      {{ isExpanded ? '收起' : '展开' }}
+    </el-button>
   </div>
 </template>
 <script>
@@ -176,6 +183,7 @@ import {
 } from '@/business/platform/file/constants/fileTypes'
 import { uploadFile } from '@/api/platform/file/attachment'
 import VueDraggable from 'vuedraggable'
+import { debounce } from 'lodash'
 
 export default {
   name: 'ibps-attachment-selector',
@@ -259,7 +267,8 @@ export default {
         disabled: false,
         animation: 200,
         axis: 'y'
-      }
+      },
+      isExpanded: false
     }
   },
   computed: {
@@ -277,9 +286,22 @@ export default {
     toolsWidth() {
       const length = this.editable ? 3 : 1
       return 30 * length + 'px'
+    },
+    shouldShowButton() {
+      return this.items.length > 5
+    },
+    displayedList() {
+      return this.isExpanded ? this.items : this.items.slice(0, 5)
     }
   },
   methods: {
+    toggleExpand: debounce(
+      function () {
+        this.isExpanded = !this.isExpanded
+      },
+      300,
+      { immediate: true }
+    ),
     init() {
       this.fileList = []
     },
@@ -355,7 +377,11 @@ export default {
       if (this.fileSize && file.size > this.fileSize) {
         this.$message.closeAll()
         this.$message({
-          message: `上传文件的尺寸大于${this.$utils.formatSize(this.fileSize, 2, ['B', 'K', 'M', 'G', 'TB'])}`,
+          message: `上传文件的尺寸大于${this.$utils.formatSize(
+            this.fileSize,
+            2,
+            ['B', 'K', 'M', 'G', 'TB']
+          )}`,
           type: 'warning'
         })
         return false