mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-24 03:47:44 +08:00
129 lines
3.1 KiB
Vue
129 lines
3.1 KiB
Vue
<template>
|
|
<div
|
|
class="noteContentViewer customScrollbar"
|
|
ref="noteContentViewer"
|
|
:style="{
|
|
left: this.left + 'px',
|
|
top: this.top + 'px',
|
|
visibility: show ? 'visible' : 'hidden'
|
|
}"
|
|
@click.stop
|
|
@mousedown.stop
|
|
@mousemove.stop
|
|
@mouseup.stop
|
|
></div>
|
|
</template>
|
|
|
|
<script>
|
|
import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer'
|
|
import '@toast-ui/editor/dist/toastui-editor-viewer.css'
|
|
|
|
/**
|
|
* @Author: 王林
|
|
* @Date: 2021-06-24 22:53:54
|
|
* @Desc: 节点备注内容显示
|
|
*/
|
|
export default {
|
|
name: 'NodeNoteContentShow',
|
|
props: {
|
|
mindMap: {
|
|
type: Object,
|
|
default() {
|
|
return null
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
editor: null,
|
|
show: false,
|
|
left: 0,
|
|
top: 0,
|
|
node: null
|
|
}
|
|
},
|
|
created() {
|
|
this.$bus.$on('showNoteContent', this.onShowNoteContent)
|
|
this.$bus.$on('hideNoteContent', this.hideNoteContent)
|
|
document.body.addEventListener('click', this.hideNoteContent)
|
|
this.$bus.$on('node_active', this.hideNoteContent)
|
|
this.$bus.$on('scale', this.onScale)
|
|
this.$bus.$on('translate', this.onScale)
|
|
this.$bus.$on('svg_mousedown', this.hideNoteContent)
|
|
this.$bus.$on('expand_btn_click', this.hideNoteContent)
|
|
},
|
|
mounted() {
|
|
this.mindMap.el.appendChild(this.$refs.noteContentViewer)
|
|
this.initEditor()
|
|
},
|
|
beforeDestroy() {
|
|
this.$bus.$off('showNoteContent', this.onShowNoteContent)
|
|
this.$bus.$off('hideNoteContent', this.hideNoteContent)
|
|
document.body.removeEventListener('click', this.hideNoteContent)
|
|
this.$bus.$off('node_active', this.hideNoteContent)
|
|
this.$bus.$off('scale', this.onScale)
|
|
this.$bus.$off('translate', this.onScale)
|
|
this.$bus.$off('svg_mousedown', this.hideNoteContent)
|
|
this.$bus.$off('expand_btn_click', this.hideNoteContent)
|
|
},
|
|
methods: {
|
|
// 显示备注浮层
|
|
onShowNoteContent(content, left, top, node) {
|
|
this.node = node
|
|
this.editor.setMarkdown(content)
|
|
this.handleALink()
|
|
this.updateNoteContentPosition(left, top)
|
|
this.show = true
|
|
},
|
|
|
|
// 超链接新窗口打开
|
|
handleALink() {
|
|
const list = this.$refs.noteContentViewer.querySelectorAll('a')
|
|
Array.from(list).forEach(a => {
|
|
a.setAttribute('target', '_blank')
|
|
})
|
|
},
|
|
|
|
// 更新位置
|
|
updateNoteContentPosition(left, top) {
|
|
this.left = left
|
|
this.top = top
|
|
},
|
|
|
|
// 画布缩放事件
|
|
onScale() {
|
|
if (!this.node || !this.show) return
|
|
const { left, top } = this.node.getNoteContentPosition()
|
|
this.updateNoteContentPosition(left, top)
|
|
},
|
|
|
|
// 隐藏备注浮层
|
|
hideNoteContent() {
|
|
this.show = false
|
|
},
|
|
|
|
// 初始化编辑器
|
|
initEditor() {
|
|
if (!this.editor) {
|
|
this.editor = new Viewer({
|
|
el: this.$refs.noteContentViewer
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.noteContentViewer {
|
|
position: fixed;
|
|
background-color: #fff;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
|
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
}
|
|
</style>
|