首页 > 其他分享 >vue2 手写思维导图编辑器,支持图片和节点拖拽(1)

vue2 手写思维导图编辑器,支持图片和节点拖拽(1)

时间:2024-01-25 15:03:02浏览次数:24  
标签:逻辑 vue 导图 节点 编辑器 vue2 拖拽

效果图:

支持图片粘贴和布局重新计算

可拖拽:

 

代码结构

DigitalXmindDialog.vue //弹框
VueXmind// 脑图编辑器
index.vue //主体编辑器
XmindNode.vue  // 节点文件
XmindSvgLine.vue  // 脑图底部的svg 线段绘画板
NodeAttributes.vue // 右侧主题设置模块
XmindStyleMixins // 样式设置逻辑
XmindDateSaveMixins // 数据保存逻辑
KeyboardShortcutMixins // 快捷键逻辑
  import {
    executeXmindNodePosition,
    CalculateDragUtil,
    selectNodeByTreeNode,
  } from './util' // 位置计算逻辑

  

 

标签:逻辑,vue,导图,节点,编辑器,vue2,拖拽
From: https://www.cnblogs.com/nfan/p/17987165

相关文章

  • Vue2入门之超详细教程十六-过滤器
    Vue2入门之超详细教程十六-过滤器1、简介过滤器定义:对要显示的数据进行特点格式化后再显示(适用于一些简单逻辑的处理)语法:1.注册过滤器:Vue.filter(name,callback)或newVue(filters:{})2.使用过滤器:{{xxx|郭琪琪名}}或v-bind:属性="xxx|过滤器名称"备注:1.过......
  • Vue2
    Vue2createApp:每个应用都是通过createApp函数创建的create:页面渲染前执行mount:页面渲染后执行v-bind:支持额外的值类型如字符串、对象或数组<buttonv-bind:disabled="isDisabled">Biwin</button><!--简写--><button:disabled="isDisabled">Biwin</bu......
  • sed流编辑器
    sed流编辑器特点类似vim编辑器一行一行的读取文件的内容将内容放入模式空间处理,处理完成后在将内容打印在屏幕上,默认不在原文件上进行修改格式sed[选项][n1[,n2]]function选项选项解释-n安静模式(只显示特殊处理行)-e接多条命令(例如:-e....-e....)-r......
  • vue2 组件的使用
    基本使用写组件......
  • vue2项目使用jsencrypt.js实现分段加密解密
    安装:npminstall jsencrypt安装:npminstall js-base64组件:demo.vue<template></template><script>import{SM4Encrypt,SM4Decrypt}from'@/assets/des.js'importtestImportJsonfrom'@/assets/data.json'exportdefault{......
  • 编写简易斜45度地图编辑器
    最近在研究cocos2dx的地图,最开始使用的是Tiled,这个编辑器做比较小的地图还是比较强大的,不过做大地图的时候,有一些功能不太方便并且有缺陷(包括刷图繁琐以及坐标体系过于复杂,导致寻路比较看起来很不平滑)。于是就酝酿着自己写一个斜45度的地图编辑器。     现在的自己老是不能......
  • Vue笔记(基于Vue2)
    Vue笔记(基于Vue2)笔记所用版本为VueCLIv5.0.8,对个人开发项目中所用到的部分进行记录,除Vue外可能含部分其他技术的内容查看下方目录来确定有无需要的内容目录Vue笔记(基于Vue2)安装目录构成常用插件ElementUI(页面组件库)axiosi18n(多语言)moment(时间日期)UUID(通用唯一标......
  • Vue3与Vue2的深度对比:你不可不知的差异!
    Vue3框架的优点特点首次渲染更快diff算法更快内存占用更少打包体积更小更好的Typescript支持CompositionAPI 组合API一、生命周期对于生命周期来说,整体上变化不大,只是大部分生命周期钩子名称上+“on”,功能上是类似的。不过有一点需要注意,Vue3在组合式API(CompositionAPI,下......
  • web安全思维导图(白帽子)
    web安全思维导图(白帽子)客户端脚本安全服务端应用安全白帽子讲web安全安全运营体系建设......
  • 在vue2中使用leaflet.AnimatedMarker来移动某个目标
    需求是:点击某个按钮后让扫描仪沿着某条线移动进行扫描效果:  扫描仪是沿着河流移动的,河流的生成方式通过geojson数据生成,geojson里包含了河流的一些点位的经纬度,扫描仪根据经纬度来移动leaflet:1.9.4 leaflet.AnimatedMarker:1.0.0 1.引入 importLfrom'leaf......