zero/blossom
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

编辑器右键菜单优化

Browse Source
This commit is contained in:
jasminexz 2023-08-15 16:11:01 +08:00
parent 6606c58231
commit bb990954b3
2 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
blossom-editor/src/renderer/src/views/article/ArticleIndex.vue
View File

@ -105,9 +105,10 @@
@image="cmw.commandImg()" @link="cmw.commandLink()">
</EditorTools>
</div>
<div class="editor-preview" @click.right="handleEditorClickRight" :style="{ fontFamily: editorConfig.fontFamily }">
<div class="editor-preview" :style="{ fontFamily: editorConfig.fontFamily }">
<div class="gutter-holder" :style="editorPreviewStyle.gutter"></div>
<div class="editor-codemirror" ref="EditorRef" :style="editorPreviewStyle.editor"></div>
<div class="editor-codemirror" ref="EditorRef" :style="editorPreviewStyle.editor"
@click.right="handleEditorClickRight"></div>
<div class="preview-marked bl-preview" ref="PreviewRef" :style="editorPreviewStyle.preview" v-html="articleHtml">
</div>
</div>
@ -719,6 +720,7 @@ const sycnScroll = (_event: Event | string, _source?: string, _lineno?: number,
//#region ----------------------------------------< 编辑器右键 >----------------------------------------
const editorRightMenu = ref<RightMenu>({ show: false, clientX: 0, clientY: 0 })
const rightMenuHeight = 215
const removeListenerRightMenu = () => {
document.body.removeEventListener('click', closeEditorRightMenu)
@ -730,8 +732,14 @@ const closeEditorRightMenu = () => {
}
const handleEditorClickRight = (event: MouseEvent) => {
//
editorRightMenu.value = { show: false, clientX: 0, clientY: 0 }
editorRightMenu.value = { show: true, clientX: event.clientX, clientY: event.clientY }
//
let y = event.clientY
if (document.body.clientHeight - event.clientY < rightMenuHeight) {
y = event.clientY - rightMenuHeight
}
editorRightMenu.value = { show: true, clientX: event.clientX, clientY: y }
setTimeout(() => {
document.body.addEventListener('click', closeEditorRightMenu)
}, 100)

6
blossom-editor/src/renderer/src/views/article/ArticleTreeTitle.vue
View File

@ -154,6 +154,7 @@ const handlClick = () => {
//#region ----------------------------------------< 右键菜单 >--------------------------------------
const rMenu = ref<RightMenu>({ show: false, clientX: 0, clientY: 0 })
const rMenuHeight = 275
onBeforeUnmount(() => {
document.body.removeEventListener('click', closeMenuShow)
@ -168,10 +169,9 @@ const closeMenuShow = () => {
const handleClickRight = (event: MouseEvent) => {
// TODO 固定的菜单高度, 每次增加右键菜单项时需要修改该值
let menuHeight = 275
let y = event.clientY
if (document.body.clientHeight - event.clientY < menuHeight) {
y = event.clientY - 275
if (document.body.clientHeight - event.clientY < rMenuHeight) {
y = event.clientY - rMenuHeight
}
rMenu.value = { show: true, clientX: event.clientX, clientY: y }
setTimeout(() => {