forked from github/dataease
feat(数据大屏): 支持多选几个组件后,上下左右快速对齐
This commit is contained in:
parent
20cd55a1be
commit
6b3782a926
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user