library generate增加删除和拖拽移动位置功能 图片放大添加键盘事件调整按钮大小

src/component/HomePage/PrintboardUpload.vue

@@ -132,7 +132,7 @@
 						<!-- <img v-show="item.status != 'Success'" src="@/assets/images/homePage/loading.gif" alt=""> -->
 						<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
 						<div
-							class="delete_like_file_block"
+							class="delete_like_file_block left1"
 							:class="[driver__.driver?'hideEvents':'']"
 						>
 							<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
@@ -141,6 +141,9 @@
 						<div class="delete_like_file_block left"  :class="[driver__.driver?'hideEvents':'']">
 							<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
 						</div>
+						<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
+							<span class="icon iconfont icon-shanchu operate_icon"></span>
+						</div>
 						<div class="pin_block">
 							<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
 						</div>
@@ -160,13 +163,13 @@
     </div>
 </template>
 <script lang="ts">
-import { defineComponent,h,ref,computed,inject, nextTick } from 'vue'
+import { defineComponent,h,ref,computed,inject,createVNode, nextTick } from 'vue'
 import { LoadingOutlined } from '@ant-design/icons-vue';
 import {getCookie} from '@/tool/cookie'
 import {getUploadUrl} from '@/tool/util'
 import {useStore} from 'vuex'
 import { Https } from "@/tool/https";
-import { message,Upload} from 'ant-design-vue';
+import { Modal,message,Upload} from 'ant-design-vue';
 import Cropper from '@/component/HomePage/Cropper.vue'
 import Material from '@/component/HomePage/Material.vue'
 import Generate from "@/component/HomePage/Generate.vue";
@@ -174,6 +177,7 @@ import GO from "@/tool/GO";
 import { useI18n } from 'vue-i18n';
 import { openGuide,driverObj__ } from "@/tool/guide";
 import scaleImage from "@/component/HomePage/scaleImage.vue";
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import axios from 'axios'
 import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow';
 
@@ -467,7 +471,21 @@ export default defineComponent({
 			}
 
 		},
-
+		deleteGenerate(index:any){
+			if(this.isGenerate)return
+			let _this = this
+            Modal.confirm({
+                title: this.t('LibraryPage.jsContent1'),
+                icon: createVNode(ExclamationCircleOutlined),
+                okText: 'Yes',
+                cancelText: 'No',
+				mask:false,
+                centered:true,
+                onOk() {
+					_this.generateList.splice(index,1)
+                }
+            });
+		},
         
         customRequest(data:any){
             let new_data = {
@@ -1110,36 +1128,6 @@ export default defineComponent({
             }
         }
     }
-	.delete_like_file_block{
-		display: none;
-		width: calc(3.2rem*1.2);
-		height: calc(3.2rem*1.2);
-		background: rgba(0,0,0,0.6);
-		border-radius: calc(0.4rem*1.2);
-		position: absolute;
-		top: calc(0.9rem*1.2);
-		right: calc(0.9rem*1.2);
-		text-align: center;
-		line-height: calc(3.2rem*1.2);
-		left: auto;
-		&.left{
-			left: calc(.9rem*1.2);
-		}
-		.icon-shanchu{
-			font-size: calc(1.6rem*1.2);
-			color: #fff;
-		}
-		i{
-			font-size: calc(1.6rem*1.2);
-			color: #fff;
-			&.fi-rr-heart{
-
-			}
-			&.fi-sr-heart{
-				color: red;
-			}
-		}
-	}
 	
 	.modal_right{
 		flex: 1;