上传进度组件添加取消上传相关功能（只是发出消息）和状态值

src/views/material/components/uploadList1.1.0.vue

@@ -15,7 +15,12 @@
       </div>
     </div>
     <div class="content" v-show="expandSwitch">
-      <div class="list-item"  v-for="(taskItem, index) in taskList" :key="index">
+      <div
+        class="list-item" 
+        v-for="(taskItem, index) in taskList"
+        :key="index"
+        v-show="taskItem.status === 'LOADING' || taskItem.status === 'FAIL'"
+        >
         <div class="left">
           <img class="type-icon" :src="uploadFieIconUrl" alt=""/>
           <span class="text">{{taskItem.title}}</span>
@@ -24,15 +29,16 @@
           <span :class="{
             'text-success': taskItem.status === 'SUCCESS',
             'text-fail': taskItem.status === 'FAIL',
-            'text-loading': taskItem.status === 'LOADING',
+            'text-loading': taskItem.status === 'LOADING' || taskItem.status === 'CANCELLED',
           }">
             {{taskItem.statusText}}
           </span>
           <span v-show="taskItem.ifKnowProgress && taskItem.status === 'LOADING'" class="progress-text">{{taskItem.progress}}</span>
           <img
-            v-show="taskItem.status !== 'SUCCESS'"
+            v-show="taskItem.status === 'LOADING' || taskItem.status === 'FAIL'"
             class="cancel-btn"
             :src="require('@/assets/images/icons/material_preview_upload_cancel@2x.png')"
+            @click="onClickCancel(index)"
           />
         </div>
         <div class="progress-bar" v-if="taskItem.ifKnowProgress && taskItem.status === 'LOADING'" :style="{width: taskItem.progress}"></div>
@@ -56,7 +62,7 @@ export default {
        *  title: String
        *  ifKnowProgress: Boolean // false则进度条效果是loading而不是具体进度
        *  progress：String // 进度，以百分号结尾。
-       *  status: 'SUCCESS' | 'FAIL' | 'LOADING' // 只影响statusText的样式，以及是否显示进度条。
+       *  status: 'SUCCESS' | 'FAIL' | 'LOADING' | 'CANCELLED'
        *  statusText
        * }
        */
@@ -90,7 +96,14 @@ export default {
       //     progress: '55%',
       //     status: 'FAIL',
       //     statusText: '失败',
-      //   }
+      //   },
+      //   {
+      //     title: '标题',
+      //     ifKnowProgress: false,
+      //     progress: '30%',
+      //     status: 'CANCELLED',
+      //     statusText: '已取消',
+      //   },
       // ]
     },
   },
@@ -120,7 +133,10 @@ export default {
   methods: {
     onClickExpand() {
       this.expandSwitch = !this.expandSwitch
-    }
+    },
+    onClickCancel(index) {
+      this.$emit('cancel-task', index)
+    },
   }
 }
 </script>