处理视频组件的删除按钮

src/components/VideoUpload/index.vue

@@ -15,9 +15,8 @@
     >
       <!-- accept="video/mp4, video/ogg, video/flv,video/avi,video/wmv,video/rmvb" -->
       <!-- :disabled="fileList.length >= limit || uploadBtn" -->
-      <template #default>
+
       <i class="el-icon-plus"></i>
-      </template>
       <template #file="{ file }">
         <div style="height: 100%">
           <video
@@ -32,13 +31,8 @@
             >
               <i class="el-icon-video-play"></i>
             </span>
-            <!-- <span
-              class="el-upload-list__item-edit"
-              @click="handleEditVideo(file)"
-            >
-              <el-icon><Edit /></el-icon>
-            </span> -->
             <span
+              v-if="disabled"
               class="el-upload-list__item-delete"
               @click="handleRemove(file)"
             >
@@ -81,14 +75,6 @@
         controls="controls"
       ></video>
     </el-dialog>
-    <!-- <el-dialog v-model="editView" width="40%" append-to-body>
-      <el-input
-        type="textarea"
-        :rows="4"
-        v-model="editForm.url"
-        @input="editVideo"
-      ></el-input>
-    </el-dialog> -->
   </div>
 </template>
 
@@ -123,6 +109,11 @@ export default {
         return {};
       },
     },
+    // 表单禁用时是否显示删除按钮
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     showTip() {
@@ -311,7 +302,7 @@ export default {
 }
 .el-icon-delete {
   font-size: 18px !important;
-  color: rgb(243, 143, 130);
+  // color: rgb(243, 143, 130);
 }
 .el-input >>> .el-textarea__inner {
   font-size: 18px !important;