feat(数据大屏): 支持多选几个组件后,上下左右快速对齐

This commit is contained in:
wangjiahao 2024-01-12 18:44:04 +08:00
parent 20cd55a1be
commit 6b3782a926
2 changed files with 75 additions and 4 deletions

View File

@ -135,6 +135,11 @@ const decompose = () => {
menuOpt('decompose')
}
const alignment = params => {
composeStore.alignment(params)
snapshotStore.recordSnapshotCache('decompose')
}
// handleMouseDown areaData
const handleComposeMouseDown = e => {
e.preventDefault()
@ -147,10 +152,33 @@ const composeDivider = computed(() => {
</script>
<template>
<div class="context-menu-details" @mousedown="handleComposeMouseDown">
<div class="context-menu-base context-menu-details" @mousedown="handleComposeMouseDown">
<ul @mouseup="handleMouseUp">
<template v-if="areaData.components.length">
<li @mousedown="handleComposeMouseDown" @click="componentCompose">组合</li>
<el-dropdown
style="width: 100%"
trigger="hover"
effect="dark"
placement="right-start"
popper-class="context-menu-details"
>
<li>对齐</li>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item style="width: 118px" @click="alignment('left')"
>左对齐</el-dropdown-item
>
<el-dropdown-item style="width: 118px" @click="alignment('right')"
>右对齐</el-dropdown-item
>
<el-dropdown-item @click="alignment('top')">上对齐</el-dropdown-item>
<el-dropdown-item @click="alignment('bottom')">下对齐</el-dropdown-item>
<el-dropdown-item @click="alignment('transverse')">水平居中</el-dropdown-item>
<el-dropdown-item @click="alignment('direction')">垂直居中</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-divider class="custom-divider" />
<li @click="copy">复制</li>
<li @click="paste">粘贴</li>
@ -190,11 +218,13 @@ const composeDivider = computed(() => {
</div>
</template>
<style lang="less" scoped>
<style lang="less">
.context-menu-base {
width: 220px;
}
.context-menu-details {
z-index: 1000;
border: #434343 1px solid;
width: 220px;
ul {
padding: 4px 0;
background-color: #292929;
@ -205,6 +235,7 @@ const composeDivider = computed(() => {
}
li {
width: 100%;
font-size: 14px;
padding: 0 12px;
position: relative;
@ -225,7 +256,7 @@ const composeDivider = computed(() => {
}
&:hover {
background-color: #333;
background-color: #333 !important;
}
}
}

View File

@ -56,6 +56,46 @@ export const composeStore = defineStore('compose', {
// do updateGroupBorder
},
alignment: function (params) {
const { areaData } = this
if (areaData.components.length === 1) {
// 一个组件不进行组合直接释放
areaData.components = []
return
}
if (areaData.components.length > 0 && areaData.style.width === 0) {
// 计算组合区域
this.calcComposeArea()
}
const { left, top, width, height } = areaData.style
const areaRight = left + width
const areaTransverseCenter = left + width / 2 // 横向中心点
const areaBottom = top + height
const areaDirectionCenter = top + height / 2 // 纵向中心点
areaData.components.forEach(component => {
if (params === 'left') {
// 居左
component.style.left = left
} else if (params === 'right') {
// 居右
component.style.left = areaRight - component.style.width
} else if (params === 'top') {
// 居上
component.style.top = top
} else if (params === 'bottom') {
// 居下
component.style.top = areaBottom - component.style.height
} else if (params === 'transverse') {
// 横向居中
component.style.left = areaTransverseCenter - component.style.width / 2
} else if (params === 'direction') {
// 纵向
component.style.top = areaDirectionCenter - component.style.height / 2
}
})
},
compose: function (canvasId = 'canvas-main') {
const editor = this.editorMap[canvasId]
const { areaData } = this