github/poster-design
1
0
Fork 0
mirror of https://github.com/palxiao/poster-design.git synced 2025-07-15 16:02:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: convert CompListWrap component to composition API

Browse Source
This commit is contained in:
IchliebedichZhu 2024-03-13 23:56:43 +00:00
parent 6ee1ab78ed
commit 7538b6b2ac
1 changed files with 35 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/modules/panel/wrap/CompListWrap.vue
View File

@ -34,7 +34,13 @@
<ul v-if="state.currentCategory" v-infinite-scroll="load" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto"> <ul v-if="state.currentCategory" v-infinite-scroll="load" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
<classHeader :is-back="true" @back="back">{{ state.currentCategory.name }}</classHeader> <classHeader :is-back="true" @back="back">{{ state.currentCategory.name }}</classHeader>
<el-space fill wrap :fillRatio="30" direction="horizontal" class="list"> <el-space fill wrap :fillRatio="30" direction="horizontal" class="list">
<div v-for="(item, i) in state.list" :key="i + 'i'" class="list__item" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)"> <div
v-for="(item, i) in state.list" :key="i + 'i'"
class="list__item" draggable="false"
@mousedown="dragStart($event, item)" @mousemove="mousemove"
@mouseup="mouseup" @click.stop="selectItem(item)"
@dragstart="dragStart($event, item)"
>
<!-- <edit-model :isComp="true" @action="action($event, item, i)"> --> <!-- <edit-model :isComp="true" @action="action($event, item, i)"> -->
<el-image class="list__img" :src="item.cover" fit="contain" lazy loading="lazy" /> <el-image class="list__img" :src="item.cover" fit="contain" lazy loading="lazy" />
<!-- </edit-model> --> <!-- </edit-model> -->
@ -98,7 +104,7 @@ onMounted(async () => {
} }
} }
}) })
const mouseup = (e: any) => { const mouseup = (e: MouseEvent) => {
e.preventDefault() e.preventDefault()
// setTimeout(() => { // setTimeout(() => {
isDrag = false isDrag = false
@ -185,7 +191,7 @@ const dragStart = async (e: MouseEvent, { id, width, height, cover }: TGetCompLi
} }
} }
const selectItem = async (item: any) => { const selectItem = async (item: TGetCompListResult) => {
if (isDrag) { if (isDrag) {
return return
} }
@ -193,11 +199,11 @@ const dragStart = async (e: MouseEvent, { id, width, height, cover }: TGetCompLi
tempDetail = tempDetail || (await getCompDetail({ id: item.id, type: 1 })) tempDetail = tempDetail || (await getCompDetail({ id: item.id, type: 1 }))
// let group = JSON.parse(tempDetail.data) // let group = JSON.parse(tempDetail.data)
const group: any = await getComponentsData(tempDetail.data) const group: any = await getComponentsData(tempDetail.data)
let parent: any = { x: 0, y: 0 } let parent: Record<string, any> = { x: 0, y: 0 }
const { width: pW, height: pH } = store.getters.dPage const { width: pW, height: pH } = store.getters.dPage
Array.isArray(group) && Array.isArray(group) &&
group.forEach((element: any) => { group.forEach((element) => {
element.type === 'w-group' && (parent = element) element.type === 'w-group' && (parent = element)
}) })
if (parent.isContainer) { if (parent.isContainer) {