优化图表编辑器和图片裁剪工具样式

This commit is contained in:
pipipi-pikachu 2021-01-19 23:51:09 +08:00
parent c77dfb4c5a
commit 952ffb2206
2 changed files with 36 additions and 9 deletions

View File

@ -162,11 +162,16 @@ export default defineComponent({
tempRangeSize.value = { width, height }
}
document.onmouseup = () => {
document.onmouseup = e => {
isMouseDown = false
document.onmousemove = null
document.onmouseup = null
const endPageX = e.pageX
const endPageY = e.pageY
if(startPageX === endPageX && startPageY === endPageY) return
let width = tempRangeSize.value.width
let height = tempRangeSize.value.height
if(width % CELL_WIDTH > CELL_WIDTH * 0.5) width = width + (CELL_WIDTH - width % CELL_WIDTH)
@ -247,13 +252,31 @@ export default defineComponent({
}
.resizable {
position: absolute;
width: 8px;
height: 8px;
width: 12px;
height: 12px;
left: 0;
top: 0;
margin: -4px 0 0 -4px;
background-color: $themeColor;
margin: -9px 0 0 -9px;
cursor: nwse-resize;
&::after {
content: '';
position: absolute;
width: 4px;
height: 12px;
right: 0;
top: 0;
background-color: $themeColor;
}
&::before {
content: '';
position: absolute;
width: 12px;
height: 4px;
right: 0;
bottom: 0;
background-color: $themeColor;
}
}
table {
width: 100%;

View File

@ -39,8 +39,12 @@
:key="point"
@mousedown.stop="$event => scaleClipRange($event, point)"
>
<SvgWrapper width="12" height="12" fill="#fff" stroke="#666">
<path d="M 12 0 L 0 0 L 0 12 L 3 12 L 3 3 L 12 3 L 12 0 Z"></path>
<SvgWrapper width="12" height="12" fill="#fff" stroke="#333">
<path
stroke-width="0.3"
shape-rendering="crispEdges"
d="M 16 0 L 0 0 L 0 16 L 4 16 L 4 4 L 16 4 L 16 0 Z"
></path>
</SvgWrapper>
</div>
</div>
@ -288,8 +292,8 @@ export default defineComponent({
isSettingClipRange.value = true
let isMouseDown = true
const minWidth = 32 / props.width * 100
const minHeight = 32 / props.height * 100
const minWidth = 50 / props.width * 100
const minHeight = 50 / props.height * 100
const startPageX = e.pageX
const startPageY = e.pageY