amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2024-11-25 03:18:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: scroll mehod reword

Browse Source
This commit is contained in:
JimQing 2020-07-12 18:33:46 +08:00
parent b8a99e75cf
commit 67c38d8127
1 changed files with 39 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/view/CodemirrorEditor.vue
View File

@ -19,7 +19,13 @@
<textarea id="editor" type="textarea" placeholder="Your markdown text here." v-model="source"> <textarea id="editor" type="textarea" placeholder="Your markdown text here." v-model="source">
</textarea> </textarea>
</el-col> </el-col>
<el-col :span="12" class="preview-wrapper" id="preview" :class="{'preview-wrapper_night': nightMode && isCoping}"> <el-col
:span="12"
class="preview-wrapper"
id="preview"
ref="preview"
:class="{'preview-wrapper_night': nightMode && isCoping}"
>
<section id="output-wrapper" :class="{'output_night': nightMode && !backLight}"> <section id="output-wrapper" :class="{'output_night': nightMode && !backLight}">
<div class="preview"> <div class="preview">
<section id="output" v-html="output"> <section id="output" v-html="output">
@ -193,26 +199,41 @@ export default {
}) })
} }
}, },
// 左右栏同步滚动
leftAndRightScroll() { leftAndRightScroll() {
const _this = this; const scrollCB = text=> {
const previewRef = document.getElementById('preview'); let source, target;
previewRef.addEventListener("scroll", function callback() { clearTimeout(this.timeout);
clearTimeout(_this.timeout) if (text === 'preview') {
source = this.$refs.preview.$el;
target = document.getElementsByClassName('CodeMirror-scroll')[0];
this.editor.off('scroll', editorScrollCB);
this.timeout = setTimeout(()=> {
this.editor.on('scroll', editorScrollCB);
}, 300);
} else if (text === 'editor') {
source = document.getElementsByClassName('CodeMirror-scroll')[0];
target = this.$refs.preview.$el;
target.removeEventListener("scroll", previewScrollCB, false);
this.timeout = setTimeout(()=> {
target.addEventListener("scroll", previewScrollCB, false);
}, 300);
}
let source = this let percentage = source.scrollTop / (source.scrollHeight - source.offsetHeight);
let target = this.id === 'preview' ? document.getElementsByClassName('CodeMirror-scroll')[0] : previewRef; let height = percentage * (target.scrollHeight - target.offsetHeight);
target.removeEventListener("scroll", callback, false); target.scrollTo(0, height);
let percentage = source.scrollTop / (source.scrollHeight - source.offsetHeight) };
let height = percentage * (target.scrollHeight - target.offsetHeight) const editorScrollCB = ()=> {
target.scrollTo(0, height) scrollCB('editor');
};
const previewScrollCB = ()=> {
scrollCB('preview');
};
_this.timeout = setTimeout(()=> { this.$refs.preview.$el.addEventListener("scroll", previewScrollCB, false);
target.addEventListener("scroll", callback, false); this.editor.on('scroll', editorScrollCB);
}, 300)
}, false);
}, },
onEditorRefresh() { onEditorRefresh() {
this.editorRefresh(); this.editorRefresh();
@ -232,8 +253,8 @@ export default {
'initCssEditorEntity']) 'initCssEditorEntity'])
}, },
mounted() { mounted() {
this.leftAndRightScroll();
setTimeout(() => { setTimeout(() => {
this.leftAndRightScroll();
PR.prettyPrint() PR.prettyPrint()
}, 300); }, 300);
} }