删除文件夹/文件添加确认删除弹出确认框

src/views/govern/device/fileService/index.vue

@@ -64,15 +64,20 @@
                         <el-button v-if="item?.type == 'file'" size="small" @click="handleDownLoad(item)" circle>
                             <el-icon><Download /></el-icon>
                         </el-button>
-                        <el-button
-                            v-if="activePath && activePath != '/'"
-                            type="danger"
-                            @click="handleDelDirOrFile(item)"
-                            size="small"
-                            circle
+                        <el-popconfirm
+                            width="220"
+                            confirm-button-text="确认"
+                            cancel-button-text="取消"
+                            :title="item?.type == 'file' ? '是否确认删除当前文件?' : '是否确认删除当前文件夹?'"
+                            @confirm="handleDelDirOrFile(item)"
+                            @cancel="cancelEvent"
                         >
-                            <el-icon><Delete /></el-icon>
-                        </el-button>
+                            <template #reference>
+                                <el-button v-if="activePath && activePath != '/'" type="danger" size="small" circle>
+                                    <el-icon><Delete /></el-icon>
+                                </el-button>
+                            </template>
+                        </el-popconfirm>
                     </div>
                     <img v-if="item?.type == 'dir'" @click="handleIntoDir(item)" src="@/assets/img/wenjianjia.svg" />
                     <img
@@ -355,6 +360,8 @@ const handleDelDirOrFile = (row: any) => {
         }
     })
 }
+//取消删除
+const cancelEvent = () => {}
 
 //下载文件
 const fileRef = ref()