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

feat: multipleBoards horizontal roll

Browse Source
This commit is contained in:
ShawnPhang 2024-04-18 19:09:23 +08:00
parent b739528c21
commit 4e5b92ff77
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/modules/layout/multipleBoards/multipleBoards.vue
View File

@ -3,15 +3,15 @@
* @Date: 2024-04-11 17:27:58 * @Date: 2024-04-11 17:27:58
* @Description: 多画板操作界面 * @Description: 多画板操作界面
* @LastEditors: ShawnPhang <https://m.palxp.cn> * @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2024-04-16 22:58:33 * @LastEditTime: 2024-04-17 11:53:48
--> -->
<template> <template>
<div :style="{ position, bottom: -1 * st + 'px', left: sl + 'px' }" :class="['artboards', isFold ? 'fold' : 'unfold']"> <div :style="{ position, bottom: -1 * st + 'px', left: sl + 'px' }" :class="['artboards', isFold ? 'fold' : 'unfold']">
<div class="wrap"> <div ref="listRef" class="wrap">
<div v-if="isFold" v-show="dLayouts.length > 0" class="btn" @click="isFold = !isFold">画板 {{ index + 1 }}/{{ dLayouts.length }} <i class="icon sd-zhankai" /></div> <div v-if="isFold" v-show="dLayouts.length > 0" class="btn" @click="isFold = !isFold">画板 {{ index + 1 }}/{{ dLayouts.length }} <i class="icon sd-zhankai" /></div>
<div class="list" v-else> <div class="list" v-else>
<span @click="isFold = !isFold" class="icon-btn"><i class="icon sd-zhankai" /></span> <span @click="isFold = !isFold" class="icon-btn"><i class="icon sd-zhankai" /></span>
<div v-for="(l, li) in dLayouts" :key="'l' + li" :style="{width: getPW(l.global)+'px'}" @click="selectPoster(li)" :class="['item-box', index == li ? 'item-select' : 'item-default']"> <div v-for="(l, li) in dLayouts" :key="'l' + li" :style="{ width: getPW(l.global) + 'px' }" @click="selectPoster(li)" :class="['item-box', index == li ? 'item-select' : 'item-default']">
<div <div
class="mini-poster" class="mini-poster"
:style="{ :style="{
@ -53,6 +53,7 @@ const position: Ref = ref('absolute') // sticky
const isFold = ref(true) const isFold = ref(true)
const st = ref(0) const st = ref(0)
const sl = ref(0) const sl = ref(0)
const listRef: Ref<HTMLElement | null> = ref(null)
const index = computed(() => canvasStore.dCurrentPage) const index = computed(() => canvasStore.dCurrentPage)
const { dZoom, dPage } = storeToRefs(canvasStore) const { dZoom, dPage } = storeToRefs(canvasStore)
const { dWidgets, dLayouts } = storeToRefs(widgetStore) const { dWidgets, dLayouts } = storeToRefs(widgetStore)
@ -80,11 +81,16 @@ let mainEl: any = null
onMounted(async () => { onMounted(async () => {
await nextTick() await nextTick()
mainEl = document.getElementById('main') mainEl = document.getElementById('main')
mainEl.addEventListener('scroll', function (e: any) {
mainEl.addEventListener('scroll', function (e) {
st.value = mainEl.scrollTop st.value = mainEl.scrollTop
sl.value = mainEl.scrollLeft sl.value = mainEl.scrollLeft
}) })
listRef.value?.addEventListener('wheel', (event) => {
event.preventDefault()
// 使用滚轮横向滚动
listRef.value.scrollLeft += event.deltaY
})
}) })
/** 计算变换量 */ /** 计算变换量 */