111

operationSupport/src/components/common/uploadList.vue

@@ -1,6 +1,12 @@
 <template>
     <div class="clickUpload">
-        <div class="clickUpText" :class="!typeVideo(item) && !typeIcon(item) ? 'fileName' : ''" v-for="item in uploadArr" :key="item">
+        <div
+            class="clickUpText ulrTrue"
+            :class="!typeVideo(item) && !typeIcon(item) ? 'fileName' : ''"
+            v-for="(item, index) in uploadArr"
+            :key="item"
+        >
+            <i class="el-icon-delete deletes" @click="delet(item, index)"></i>
             <video v-if="typeVideo(item)" :src="item"></video>
             <img v-else-if="typeIcon(item)" class="dataImg" :src="item" />
             <div v-else>{{ item }}</div>
@@ -92,6 +98,9 @@ export default {
         },
         clickFile() {
             this.$refs['upload'].$children[0].$refs.input.click();
+        },
+        delet(item, index) {
+            this.uploadArr.splice(index, 1);
         }
     }
 };
@@ -108,6 +117,7 @@ export default {
         border-radius: 5px;
         margin-right: 5px;
         z-index: 1;
+        position: relative;
         img.dataImg {
             width: 100%;
             height: 100%;
@@ -127,6 +137,22 @@ export default {
             height: 100%;
         }
     }
+
+    .deletes {
+        display: none;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        cursor: pointer;
+    }
+    .ulrTrue {
+        &:hover {
+            .deletes {
+                display: block;
+            }
+        }
+    }
     .fileName {
         height: initial !important;
         width: initial !important;