zero/blossom
1
0
Fork 0
mirror of https://github.com/blossom-editor/blossom synced 2024-11-17 22:48:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化编辑器与预览之间的拖动条

Browse Source
This commit is contained in:
jasminexz 2023-09-05 19:01:27 +08:00
parent 8ff0f213bd
commit 0d76d6798d
2 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
blossom-editor/src/renderer/src/views/article/scripts/editor-preview-resize.ts
View File

@ -18,6 +18,9 @@ export const useResize = (
// editor 距离应用左侧的距离
const targetLeft = targetRect.left
resizeDividerRef.value!.style.borderLeft = '2px dashed var(--el-color-primary)'
document.body.style.cursor = 'ew-resize'
const onMousemove = (e: MouseEvent) => {
const x = Math.max(0, e.clientX - targetLeft)
editorRef.value!.style.width = `${x}px`
@ -25,6 +28,8 @@ export const useResize = (
}
const onMouseup = () => {
document.body.style.cursor = 'auto'
resizeDividerRef.value!.style.borderLeft = '2px solid var(--el-border-color)'
document.removeEventListener('mousemove', onMousemove)
document.removeEventListener('mouseup', onMouseup)
}

4
blossom-editor/src/renderer/src/views/article/styles/article-index.scss
View File

@ -103,11 +103,11 @@
height: 100%;
border-left: 2px solid var(--el-border-color);
margin-left: 1px;
cursor: ew-resize;
z-index: 3;
cursor: ew-resize;
&:hover {
border-left: 2px dashed var(--el-color-primary);
border-left: 2px dashed var(--el-color-primary) !important;
}
}