fix: 修改删除按钮，压缩图片

src/views/project/items/components/Card/index.vue

@@ -79,11 +79,10 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { renderIcon, goDialog, requireUrl, requireFallbackImg } from '@/utils'
+import { renderIcon, requireUrl, requireFallbackImg } from '@/utils'
 import { icon } from '@/plugins'
 import { AppleControlBtn } from '@/components/AppleControlBtn'
 import { useMessage, useDialog } from 'naive-ui'
-import { DialogEnum } from '@/enums/pluginEnum'
 
 const {
   EllipsisHorizontalCircleSharpIcon,
@@ -99,7 +98,7 @@ const {
 const dialog = useDialog()
 const message = useMessage()
 
-const emit = defineEmits(['resize'])
+const emit = defineEmits(['delete', 'resize'])
 
 const props = defineProps({
   cardData: Object
@@ -160,20 +159,19 @@ const selectOptions = [
 ]
 
 const handleSelect = (key: string) => {
-  console.log(key)
+  switch (key) {
+    case 'delete':
+      deleteHanlde()
+      break;
+  
+    default:
+      break;
+  }
 }
 
 // 删除处理
 const deleteHanlde = () => {
-  goDialog({
-    type: DialogEnum.delete,
-    promise: true,
-    onPositiveCallback: () =>
-      new Promise(res => setTimeout(() => res(1), 1000)),
-    promiseResCallback: (e: any) => {
-      window.$message.success('删除成功')
-    }
-  })
+  emit('delete', props.cardData)
 }
 
 // 放大处理

src/views/project/items/components/List/index.vue

@@ -6,8 +6,12 @@
       cols="2 s:2 m:3 l:4 xl:4 xxl:4"
       responsive="screen"
     >
-      <n-grid-item v-for="item in list" :key="item.id">
-        <Card :cardData="item" @resize="resizeHandle" />
+      <n-grid-item v-for="(item, index) in list" :key="item.id">
+        <Card
+          :cardData="item"
+          @resize="resizeHandle"
+          @delete="deleteHandle($event, index)"
+        />
       </n-grid-item>
     </n-grid>
   </div>
@@ -18,11 +22,13 @@
 import { reactive, ref } from 'vue'
 import { Card } from '../Card/index'
 import { ModalCard } from '../ModalCard/index'
- 
+import { goDialog } from '@/utils'
+import { DialogEnum } from '@/enums/pluginEnum'
 import { icon } from '@/plugins'
+
 const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5
 
-const list = reactive([
+const list = ref([
   {
     id: 1,
     title: '物料1',
@@ -53,6 +59,20 @@ const list = reactive([
 const modalData = ref({})
 const modalShow = ref(false)
 
+// 删除
+const deleteHandle = (cardData: object, index: number) => {
+  goDialog({
+    type: DialogEnum.delete,
+    promise: true,
+    onPositiveCallback: () =>
+      new Promise(res => setTimeout(() => res(1), 1000)),
+    promiseResCallback: (e: any) => {
+      window.$message.success('删除成功')
+      list.value.splice(index, 1)
+    }
+  })
+}
+
 // 关闭 modal
 const closeModal = () => {
   modalShow.value = false
@@ -63,7 +83,6 @@ const resizeHandle = (cardData: object) => {
   modalShow.value = true
   modalData.value = cardData
 }
-
 </script>
 
 <style lang="scss" scoped>