mirror of
https://github.com/dreamstarsky/runbin.git
synced 2026-05-15 14:23:07 +00:00
Feat: Auto-scroll editor to cursor when content changes
新增功能:编辑器自动滚动跟随 1.修改了 CodePage.vue 文件,移除了父容器的 overflow-auto 样式 2.配置了 CodeMirror 的 updateListener, 监听文档变化 3.当光标位置变化时, 使用 scrollIntoView 将视图滚动到底部, 优化输入体验
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="bg-[#282c34] text-md flex justify-center items-center w-[100vw] flex-1 min-h-0">
|
||||
<div class="w-3/4 h-3/4 bg-[#282c34] text-sm scale-133 flex">
|
||||
<div class="w-3/4 h-full min-w-0 overflow-auto">
|
||||
<div class="w-3/4 h-full min-w-0 ">
|
||||
<div ref="editorContainer" class="w-full h-full">
|
||||
</div>
|
||||
</div>
|
||||
@@ -125,6 +125,22 @@ onMounted(() => {
|
||||
cpp(),
|
||||
ls,
|
||||
indentUnit.of(" "),
|
||||
// ✨✨✨ 1. 新增:强制编辑器高度 100%,让它自己管理滚动条 ✨✨✨
|
||||
EditorView.theme({
|
||||
"&": { height: "100%" },
|
||||
".cm-scroller": { overflow: "auto" }
|
||||
}),
|
||||
|
||||
// ✨✨✨ 2. 修改:滚动逻辑 ✨✨✨
|
||||
EditorView.updateListener.of((update) => {
|
||||
if (update.docChanged && update.selectionSet) {
|
||||
const cursorParams = update.state.selection.main.head;
|
||||
update.view.dispatch({
|
||||
// 改为 "bottom":强制光标始终露出在视野底部
|
||||
effects: EditorView.scrollIntoView(cursorParams, { y: "bottom" })
|
||||
});
|
||||
}
|
||||
}),
|
||||
keymap.of([
|
||||
{ key: "Tab", run: indentMore },
|
||||
{ key: "Shift-Tab", run: indentLess },
|
||||
|
||||
Reference in New Issue
Block a user