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

This commit is contained in:
X1627315083
2024-04-30 11:45:19 +08:00
parent 09c9b13f0a
commit 05fa4318c3
10 changed files with 179 additions and 128 deletions

View File

@@ -287,21 +287,25 @@
</div>
<div class="content_body_table scroll_style">
<div class="content_img_item" v-for="(img,index) in generateList[selectCode]" :key="img.id" :class="[img.status != 'Success'?'hideEvents':'']" v-show="img.status == 'Success'">
<div class="content_img_item" v-for="(img,index) in generateList[selectCode]" :key="img.id" :class="[img.status != 'Success'?'hideEvents':'']" v-show="img.status == 'Success'"
:draggable="!isGenerate[selectCode]" @dragstart="startDrag($event,index)" @dragover.prevent @drop="drop($event,index)">
<div :class="['content_img_item_block', selectImgList.indexOf(img.id) > -1 ? 'select_item_img' :'']">
<!-- <img v-show="img.status != 'Success'" :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" src="@/assets/images/homePage/loading.gif" alt=""> -->
<img :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" v-lazy="img.imgUrl">
<div class="img_item_hover">
<div class="img_operate_content">
<div class="img_operate_block">
<i v-if="!img.like" class="fi fi-rr-heart operate_icon" @click.stop="likeFile(img,'like')"></i>
<i v-else class="fi fi-sr-heart operate_icon" @click.stop="likeFile(img,'noLike')"></i>
<div class="img_operate_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
</div>
<div class="img_operate_content left" :class="[driver__.driver?'hideEvents':'']">
<div class="img_operate_block">
<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
</div>
<div class="img_operate_block">
<i v-if="!img.like" class="fi fi-rr-heart operate_icon" @click.stop="likeFile(img,'like')"></i>
<i v-else class="fi fi-sr-heart operate_icon" @click.stop="likeFile(img,'noLike')"></i>
</div>
</div>
</div>
@@ -474,6 +478,7 @@ export default defineComponent({
Printboard:'',
Models:''
})
let dragIdx:any=ref(0)
let getLibraryListInputTime:any = ref()
const options:any = ref([
]);
@@ -522,6 +527,7 @@ export default defineComponent({
isGenerate,
remGenerate,
remGenerateTime,
dragIdx,
getLibraryListInputTime,
props,
options,
@@ -785,7 +791,30 @@ export default defineComponent({
}
});
},
deleteGenerate(index:any){
if(this.isGenerate[this.selectCode])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[_this.selectCode].splice(index,1)
}
});
},
startDrag(event:any, index:any) {
this.dragIdx = index
},
drop(event:any, index:any) {
let _teams = this.generateList[this.selectCode] //将hotteams存起来
let _dragitem = _teams[this.dragIdx] //将被拖拽的那条数据存起来
_teams.splice(this.dragIdx, 1) //删除被拖拽的那条数据
_teams.splice(index, 0, _dragitem)
},
//批量删除图片
deleteBatchPic(){
if(!this.selectImgList.length){