mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-17 22:08:25 +08:00
'支持双击节点内图片进行大图预览'
This commit is contained in:
wanglin25
51
README.md
51
README.md
@@ -93,7 +93,7 @@ npm run build
|
||||
|
||||
# 安装
|
||||
|
||||
> 当前仓库版本：0.2.14，当前npm版本：0.2.14
|
||||
> 当前仓库版本：0.2.15，当前npm版本：0.2.15
|
||||
|
||||
```bash
|
||||
npm i simple-mind-map
|
||||
@@ -205,30 +205,31 @@ v0.1.7+。切换模式为只读或编辑。
|
||||
|
||||
监听事件，事件列表：
|
||||
|
||||
| 事件名称 | 描述 | 回调参数 |
|
||||
| ------------------------- | --------------------- | ----------------------------------------------------- |
|
||||
| data_change | 渲染树数据变化，可以监听该方法获取最新数据 | data（当前渲染树数据） |
|
||||
| view_data_change（v0.1.1+） | 视图变化数据，比如拖动或缩放时会触发 | data（当前视图状态数据） |
|
||||
| back_forward | 前进或回退 | activeHistoryIndex（当前在历史数据数组里的索引）、length（当前历史数据数组的长度） |
|
||||
| draw_click | *画布的单击事件* | e（事件对象） |
|
||||
| svg_mousedown | svg画布的鼠标按下事件 | e（事件对象） |
|
||||
| mousedown | el元素的鼠标按下事件 | e（事件对象）、this（Event事件类实例） |
|
||||
| mousemove | el元素的鼠标移动事件 | e（事件对象）、this（Event事件类实例） |
|
||||
| drag | 如果是按住左键拖动的话会触发拖动事件 | e（事件对象）、this（Event事件类实例） |
|
||||
| mouseup | el元素的鼠标松开事件 | e（事件对象）、this（Event事件类实例） |
|
||||
| mousewheel | 鼠标滚动事件 | e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例） |
|
||||
| contextmenu | svg画布的鼠标右键菜单事件 | e（事件对象） |
|
||||
| node_click | 节点的单击事件 | this（节点实例）、e（事件对象） |
|
||||
| node_mousedown | 节点的鼠标按下事件 | this（节点实例）、e（事件对象） |
|
||||
| node_mouseup | 节点的鼠标松开事件 | this（节点实例）、e（事件对象） |
|
||||
| node_dblclick | 节点的双击事件 | this（节点实例）、e（事件对象） |
|
||||
| node_contextmenu | 节点的右键菜单事件 | e（事件对象）、this（节点实例） |
|
||||
| before_node_active | 节点激活前事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） |
|
||||
| node_active | 节点激活事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） |
|
||||
| expand_btn_click | 节点展开或收缩事件 | this（节点实例） |
|
||||
| before_show_text_edit | 节点文本编辑框即将打开事件 | |
|
||||
| hide_text_edit | 节点文本编辑框关闭事件 | textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表） |
|
||||
| scale | 放大缩小事件 | scale（缩放比例） |
|
||||
| 事件名称 | 描述 | 回调参数 |
|
||||
| ----------------------------- | ------------------------------------------ | ------------------------------------------------------------ |
|
||||
| data_change | 渲染树数据变化，可以监听该方法获取最新数据 | data（当前渲染树数据） |
|
||||
| view_data_change（v0.1.1+） | 视图变化数据，比如拖动或缩放时会触发 | data（当前视图状态数据） |
|
||||
| back_forward | 前进或回退 | activeHistoryIndex（当前在历史数据数组里的索引）、length（当前历史数据数组的长度） |
|
||||
| draw_click | *画布的单击事件* | e（事件对象） |
|
||||
| svg_mousedown | svg画布的鼠标按下事件 | e（事件对象） |
|
||||
| mousedown | el元素的鼠标按下事件 | e（事件对象）、this（Event事件类实例） |
|
||||
| mousemove | el元素的鼠标移动事件 | e（事件对象）、this（Event事件类实例） |
|
||||
| drag | 如果是按住左键拖动的话会触发拖动事件 | e（事件对象）、this（Event事件类实例） |
|
||||
| mouseup | el元素的鼠标松开事件 | e（事件对象）、this（Event事件类实例） |
|
||||
| mousewheel | 鼠标滚动事件 | e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例） |
|
||||
| contextmenu | svg画布的鼠标右键菜单事件 | e（事件对象） |
|
||||
| node_click | 节点的单击事件 | this（节点实例）、e（事件对象） |
|
||||
| node_mousedown | 节点的鼠标按下事件 | this（节点实例）、e（事件对象） |
|
||||
| node_mouseup | 节点的鼠标松开事件 | this（节点实例）、e（事件对象） |
|
||||
| node_dblclick | 节点的双击事件 | this（节点实例）、e（事件对象） |
|
||||
| node_contextmenu | 节点的右键菜单事件 | e（事件对象）、this（节点实例） |
|
||||
| before_node_active | 节点激活前事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） |
|
||||
| node_active | 节点激活事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） |
|
||||
| expand_btn_click | 节点展开或收缩事件 | this（节点实例） |
|
||||
| before_show_text_edit | 节点文本编辑框即将打开事件 | |
|
||||
| hide_text_edit | 节点文本编辑框关闭事件 | textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表） |
|
||||
| scale | 放大缩小事件 | scale（缩放比例） |
|
||||
| node_img_dblclick（v0.2.15+） | 节点内图片的双击事件 | this（节点实例）、e（事件对象） |
|
||||
|
||||
#### emit(event, ...args)
|
||||
|
||||
|
||||
@@ -1 +1 @@
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.81d632f4.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.228f2009.js" rel="prefetch"><link href="dist/js/chunk-35b0a040.cb76da7d.js" rel="prefetch"><link href="dist/css/app.5fdb3328.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.6fd71983.css" rel="preload" as="style"><link href="dist/js/app.9461eb7e.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.a15539d2.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.6fd71983.css" rel="stylesheet"><link href="dist/css/app.5fdb3328.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.a15539d2.js"></script><script src="dist/js/app.9461eb7e.js"></script></body></html>
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.81d632f4.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.228f2009.js" rel="prefetch"><link href="dist/js/chunk-35b0a040.cb76da7d.js" rel="prefetch"><link href="dist/css/app.c8de1c03.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.faba1249.css" rel="preload" as="style"><link href="dist/js/app.9bc33d3c.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.ce9e5522.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.faba1249.css" rel="stylesheet"><link href="dist/css/app.c8de1c03.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.ce9e5522.js"></script><script src="dist/js/app.9bc33d3c.js"></script></body></html>
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "simple-mind-map",
|
||||
"version": "0.2.14",
|
||||
"version": "0.2.15",
|
||||
"description": "一个简单的web在线思维导图",
|
||||
"authors": [
|
||||
{
|
||||
|
||||
@@ -367,6 +367,9 @@ class Node {
|
||||
if (this.nodeData.data.imageTitle) {
|
||||
node.attr('title', this.nodeData.data.imageTitle)
|
||||
}
|
||||
node.on('dblclick', (e) => {
|
||||
this.mindMap.emit('node_img_dblclick', this, e)
|
||||
})
|
||||
return {
|
||||
node,
|
||||
width: imgSize[0],
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
"@toast-ui/editor": "^3.1.5",
|
||||
"core-js": "^3.6.5",
|
||||
"element-ui": "^2.15.1",
|
||||
"v-viewer": "^1.6.4",
|
||||
"vue": "^2.6.11",
|
||||
"vue-router": "^3.5.1",
|
||||
"vuex": "^3.6.2"
|
||||
|
||||
@@ -4,11 +4,14 @@ import router from './router'
|
||||
import store from './store'
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import '@/assets/icon-font/iconfont.css';
|
||||
import '@/assets/icon-font/iconfont.css'
|
||||
import 'viewerjs/dist/viewer.css'
|
||||
import VueViewer from 'v-viewer'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.prototype.$bus = new Vue()
|
||||
Vue.use(ElementUI)
|
||||
Vue.use(VueViewer)
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<ShortcutKey></ShortcutKey>
|
||||
<Contextmenu v-if="mindMap" :mindMap="mindMap"></Contextmenu>
|
||||
<NodeNoteContentShow></NodeNoteContentShow>
|
||||
<NodeImgPreview v-if="mindMap" :mindMap="mindMap"></NodeImgPreview>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -28,7 +29,8 @@ import ShortcutKey from './ShortcutKey'
|
||||
import Contextmenu from './Contextmenu'
|
||||
import NodeNoteContentShow from './NodeNoteContentShow.vue'
|
||||
import { getData, storeData, storeConfig } from '@/api'
|
||||
import Navigator from './Navigator.vue';
|
||||
import Navigator from './Navigator.vue'
|
||||
import NodeImgPreview from './NodeImgPreview.vue'
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
@@ -48,7 +50,8 @@ export default {
|
||||
ShortcutKey,
|
||||
Contextmenu,
|
||||
NodeNoteContentShow,
|
||||
Navigator
|
||||
Navigator,
|
||||
NodeImgPreview
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
41
web/src/pages/Edit/components/NodeImgPreview.vue
Normal file
41
web/src/pages/Edit/components/NodeImgPreview.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<viewer :images="images">
|
||||
<img v-for="src in images" :key="src" :src="src" />
|
||||
</viewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
mindMap: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
images: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.mindMap.on("node_img_dblclick", this.onNodeTmgDblclick);
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.mindMap.off("node_img_dblclick", this.onNodeTmgDblclick);
|
||||
},
|
||||
methods: {
|
||||
onNodeTmgDblclick(node, e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
this.images = [node.nodeData.data.image];
|
||||
this.$viewerApi({
|
||||
images: this.images,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user