perf: 优化UI

This commit is contained in:
pipipi-pikachu 2021-06-05 14:01:18 +08:00
parent f713957048
commit 85ce023845
2 changed files with 18 additions and 12 deletions

View File

@ -1,19 +1,18 @@
<template>
<div class="element-positopn-panel">
<div class="title">层级</div>
<ButtonGroup class="row">
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="置顶层">
<Button style="flex: 1;" @click="orderElement(handleElement, 'top')"><IconSendToBack /></Button>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="置底层">
<Button style="flex: 1;" @click="orderElement(handleElement, 'bottom')"><IconBringToFrontOne /></Button>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="上移一层">
<Button style="flex: 1;" @click="orderElement(handleElement, 'up')"><IconBringToFront /></Button>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下移一层">
<Button style="flex: 1;" @click="orderElement(handleElement, 'down')"><IconSentToBack /></Button>
</Tooltip>
<Button style="flex: 1;" @click="orderElement(handleElement, 'top')"><IconSendToBack class="btn-icon" /> 置于顶层</Button>
<Button style="flex: 1;" @click="orderElement(handleElement, 'bottom')"><IconBringToFrontOne class="btn-icon" /> 置于底层</Button>
</ButtonGroup>
<ButtonGroup class="row">
<Button style="flex: 1;" @click="orderElement(handleElement, 'up')"><IconBringToFront class="btn-icon" /> 上移一层</Button>
<Button style="flex: 1;" @click="orderElement(handleElement, 'down')"><IconSentToBack class="btn-icon" /> 下移一层</Button>
</ButtonGroup>
<Divider />
<div class="title">对齐</div>
<ButtonGroup class="row">
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐">
<Button style="flex: 1;" @click="alignElementToCanvas('left')"><IconAlignLeft /></Button>
@ -260,9 +259,15 @@ export default defineComponent({
align-items: center;
margin-bottom: 10px;
}
.title {
margin-bottom: 10px;
}
.label {
text-align: center;
}
.btn-icon {
margin-right: 3px;
}
.icon-btn {
cursor: pointer;
}

View File

@ -100,6 +100,7 @@ export default defineComponent({
font-size: 12px;
flex-shrink: 0;
display: flex;
user-select: none;
}
.tab {
flex: 1;