Commit feb36803380bd20a8e248bf9262f27e87b1e57b0

Authored by loveumiko
1 parent 381ac034

fix:上传组件增加删除功能

... ... @@ -24,8 +24,9 @@
24 24 :customRequest="customUploadIconPic"
25 25 :before-upload="beforeUploadIconPic"
26 26 >
27   - <div v-if="iconPic">
  27 + <div v-if="iconPic" class="relative">
28 28 <img :src="iconPic" class="m-auto fill-img" />
  29 + <CloseCircleOutlined class="absolute icon-delete" @click.stop="handleDelete" />
29 30 <div style="background-color: #ccc; margin-top: 20px">重新上传</div>
30 31 </div>
31 32 <div v-else>
... ... @@ -81,7 +82,7 @@
81 82 import { useMessage } from '/@/hooks/web/useMessage';
82 83 import type { FileItem } from '/@/components/Upload/src/typing';
83 84 import { iconUpload, getPlatForm, updatePlatForm, resetPlateInfo } from '/@/api/oem/index';
84   - import { PlusOutlined } from '@ant-design/icons-vue';
  85 + import { PlusOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
85 86 import { useUserStore } from '/@/store/modules/user';
86 87 import { createLocalStorage } from '/@/utils/cache/index';
87 88 import { Authority } from '/@/components/Authority';
... ... @@ -100,6 +101,7 @@
100 101 ContentUploadText,
101 102 Spin,
102 103 CustomUploadComp,
  104 + CloseCircleOutlined,
103 105 },
104 106 setup() {
105 107 const loading = ref(false);
... ... @@ -188,6 +190,11 @@
188 190 storage.set('platformInfo', newFieldValue);
189 191 }
190 192
  193 + // 删除浏览器ico图标
  194 + const handleDelete = () => {
  195 + iconPic.value = '';
  196 + };
  197 +
191 198 onMounted(async () => {
192 199 const res = await getPlatForm();
193 200 setFieldsValue(res);
... ... @@ -227,6 +234,7 @@
227 234 handleResetInfo,
228 235 handleSetBgImgUrl,
229 236 handleSetLogoImgUrl,
  237 + handleDelete,
230 238 };
231 239 },
232 240 });
... ... @@ -251,4 +259,12 @@
251 259 width: 100%;
252 260 height: 100%;
253 261 }
  262 +
  263 + .icon-delete {
  264 + top: -13px;
  265 + right: -13px;
  266 + color: rgb(146, 145, 145);
  267 + font-size: 1rem;
  268 + z-index: 9999;
  269 + }
254 270 </style>
... ...
1 1 <script setup name="CustomUploadComp" lang="ts">
2   - import { PlusOutlined } from '@ant-design/icons-vue';
  2 + import { PlusOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
3 3 import { Upload, Spin } from 'ant-design-vue';
4 4 import { ref, watchEffect } from 'vue';
5 5 import { useUpload } from './hooks/useUploadFile.hook';
... ... @@ -40,6 +40,12 @@
40 40 }
41 41 };
42 42
  43 + // 删除图片
  44 + const handleDelete = () => {
  45 + uploadImgUrl.value = '';
  46 + emit('setImg', uploadImgUrl.value);
  47 + };
  48 +
43 49 watchEffect(() => {
44 50 init();
45 51 });
... ... @@ -59,7 +65,10 @@
59 65 :customRequest="customUpload"
60 66 :before-upload="beforeUploadVerify"
61 67 >
62   - <img v-if="uploadImgUrl" class="fill-img" :src="uploadImgUrl" alt="avatar" />
  68 + <div v-if="uploadImgUrl" class="w-full h-full modal-div relative">
  69 + <img class="fill-img" :src="uploadImgUrl" alt="avatar" />
  70 + <CloseCircleOutlined class="absolute icon-delete" @click.stop="handleDelete" />
  71 + </div>
63 72 <div v-else>
64 73 <Spin v-if="uploadLoading" tip="正在上传中..." />
65 74 <PlusOutlined v-else />
... ... @@ -74,4 +83,12 @@
74 83 width: 100%;
75 84 height: 100%;
76 85 }
  86 +
  87 + .icon-delete {
  88 + top: -13px;
  89 + right: -13px;
  90 + color: rgb(146, 145, 145);
  91 + font-size: 1rem;
  92 + z-index: 9999;
  93 + }
77 94 </style>
... ...