feat(basic-upload): add preview-delete event

添加预览Modal中删除文件的事件 close: #835
vbenjs · Jun 30, 2021 · 49e72a8 · 49e72a8
1 parent 6f845b5
commit 49e72a8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/components/Upload/src/BasicUpload.vue b/src/components/Upload/src/BasicUpload.vue
@@ -32,6 +32,7 @@
       :value="fileList"
       @register="registerPreviewModal"
       @list-change="handlePreviewChange"
+      @delete="handlePreviewDelete"
     />
   </div>
 </template>
@@ -50,7 +51,7 @@
     name: 'BasicUpload',
     components: { UploadModal, UploadPreviewModal, Icon, Tooltip },
     props: uploadContainerProps,
-    emits: ['change', 'delete'],
+    emits: ['change', 'delete', 'preview-delete'],
 
     setup(props, { emit, attrs }) {
       const { t } = useI18n();
@@ -97,6 +98,10 @@
         emit('delete', record);
       }
 
+      function handlePreviewDelete(url: string) {
+        emit('preview-delete', url);
+      }
+
       return {
         registerUploadModal,
         openUploadModal,
@@ -108,6 +113,7 @@
         showPreview,
         bindValue,
         handleDelete,
+        handlePreviewDelete,
         t,
       };
     },

diff --git a/src/components/Upload/src/UploadPreviewModal.vue b/src/components/Upload/src/UploadPreviewModal.vue
@@ -24,7 +24,7 @@
   export default defineComponent({
     components: { BasicModal, FileList },
     props: previewProps,
-    emits: ['list-change', 'register'],
+    emits: ['list-change', 'register', 'delete'],
     setup(props, { emit }) {
       const [register, { closeModal }] = useModalInner();
       const { t } = useI18n();
@@ -50,7 +50,8 @@
       function handleRemove(record: PreviewFileItem) {
         const index = fileListRef.value.findIndex((item) => item.url === record.url);
         if (index !== -1) {
-          fileListRef.value.splice(index, 1);
+          const removed = fileListRef.value.splice(index, 1);
+          emit('delete', removed[0].url);
           emit(
             'list-change',
             fileListRef.value.map((item) => item.url)