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

src/component/HomePage/scaleImage.vue

@@ -25,8 +25,10 @@
 				<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
 				<i v-else class="fi fi-sr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
 			</div>
+			
+			
 		</div>
-		<div class="scaleImage_nav">
+		<div class="scaleImage_nav" @keydown="handleKeyDown">
 			<div class="nav_left">
 				<i class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
 			</div>
@@ -118,11 +120,13 @@ export default defineComponent({
 			this.scaleImageIndex = index
 			if(dialogueIndex)this.robotAssits = dialogueIndex
 			// let scaleImageList = this.store.state.UploadFilesModule.moodboard
+			document.addEventListener('keydown',this.setKeydown)
 		},
 		cancelDsign(){
 			this.scaleImage = false
 			this.scaleImageList = []
 			this.scaleImageIndex = 0
+			document.removeEventListener('keydown',this.setKeydown)
 		},
 		lastStep(){
 			
@@ -150,7 +154,13 @@ export default defineComponent({
 			}else{
 				parent.likeFile(item,str)
 			}
-			
+		},
+		setKeydown(event:any){
+			if(event.keyCode == 37){
+				this.lastStep()
+			}else if(event.keyCode == 39){
+				this.nextStep()
+			}
 		}
     },
 });
@@ -177,6 +187,9 @@ export default defineComponent({
 	.ant-modal-btn{
 		
 	}
+	.fi-rr-down-to-line,.fi-rr-arrow-small-right,.fi-rr-arrow-small-left{
+		font-size: 2rem;
+	}
     .scaleImage_btn {
 		.collection_closeIcon{
 			position: absolute;
@@ -219,7 +232,6 @@ export default defineComponent({
 		margin-top: calc(5rem*1.2);
 		position: relative;
 		max-width: calc(50rem*1.2);
-
 		img{
 			width: auto;
 			height: 100%;
@@ -249,6 +261,7 @@ export default defineComponent({
 				color: #fff;
 			}
 		}
+		
 	}
 	.scaleImage_content:hover{
 		.img_operate_block{
@@ -264,11 +277,22 @@ export default defineComponent({
 		width: 100%;
 		.nav_left,.nav_right{
 			cursor: pointer;
+			top: 50%;
 			i{
+				display: flex;
+				font-size: 4rem;
 				transition: .3s all;
 				color: rgba(0, 0, 0, .5);
 			}
 		}
+		// .nav_left{
+		// 	left: 0;
+		// 	transform: translate(-200%,-50%);
+		// }
+		// .nav_right{
+		//     right: 0;
+		// 	transform: translate(200%,-50%);
+		// }
 		.nav_left:hover,.nav_right:hover{
 			i{
 				color: rgba(0, 0, 0, 1);