vue使用jsMind思维导图类库

效果展现

一、安装

npm install vue-jsmind

二、在main.js中引入

import jm from 'vue-jsmind'
Vue.use(jm)
if (window.jsMind) {console.log('wind')Vue.prototype.jsMind = window.jsMind
}

三、使用

<template><div><div class="header"><div style="margin-top: 10px;width: 50%;display:inline-block;"><el-row><el-col :span="6"><label>导图编码：</label><el-input v-model="formData.mindCode" style="width: 150px"></el-input></el-col><el-col :span="6"><label>导图名称：</label><el-input v-model="formData.mindName" style="width: 150px"></el-input></el-col><el-col :span="6"><label>导图类型：</label><el-select v-model="formData.mindType"  style="width: 150px"><el-option value="zsdt" label="知识导图"></el-option><el-option value="fwdt" label="服务导图"></el-option></el-select></el-col><el-col :span="6"><label>主题：</label><el-select @change="set_theme" v-model="theme_value" style="width: 150px"><el-option value="">default</el-option><template v-for="(item,index) in themOptions"><el-option :key="index" :value="item" :label="item"></el-option></template></el-select></el-col></el-row></div><div style="float: right;margin: 10px 20px 0px 0px;display:inline-block;"><el-button type="primary" class="noimpor-btn" @click='zoomOut' ref="zoomOut"><i class="el-icon-zoom-out"></i> 缩小</el-button><el-button type="primary" class="noimpor-btn" @click='zoomIn' ref="zoomIn"><i class="el-icon-zoom-in"></i> 放大</el-button><el-button type="primary" class="noimpor-btn" @click="addNode"><i class="el-icon-plus"></i> 添加节点</el-button><el-button type="primary" class="noimpor-btn" @click="editNode"><i class="el-icon-edit"></i> 编辑节点</el-button><el-button type="primary" class="noimpor-btn" @click="onRemoveNode"><i class="el-icon-minus"></i> 删除节点</el-button><!--<el-button type="primary" class="noimpor-btn" @click='changeOption'><i class="el-icon-thumb"></i> 改变布局方向</el-button>--><el-divider direction="vertical"></el-divider><el-button type="primary" class="common-btn" @click='saveMind'><i class="el-icon-s-claim"></i> 保存</el-button><el-button type="primary" class="danger-btn" @click='deleteMind' :disabled="formData.id === ''?true:false"><i class="el-icon-delete"></i> 删除</el-button></div></div><js-mind :values="mind" :options="options" v-show="isShow" ref="jsMind" :height="mindHeight" ></js-mind><div class="footer"></div><el-dialogtitle="编辑节点":visible.sync="dialogVisible"width="30%"><el-form><el-row><el-col :span="8"><el-form-item label="字体大小"><el-input v-model="nodeOption.fontSize" style="width: 60%"></el-input></el-form-item></el-col><el-col :span="8"><el-form-item label="字体加粗"><el-select v-model="nodeOption.fontWeight" style="width: 60%"><el-option value="normal" label="标准"></el-option><el-option value="bold" label="粗体"></el-option><el-option value="bolder" label="更粗"></el-option></el-select></el-form-item></el-col><el-col :span="8"><el-form-item label="字体样式"><el-select v-model="nodeOption.fontStyle" style="width: 60%"><el-option value="normal" label="标准"></el-option><el-option value="italic" label="斜体"></el-option><el-option value="oblique" label="倾斜"></el-option></el-select></el-form-item></el-col></el-row><el-row><el-col :span="8"><el-form-item label="背景颜色"><el-color-picker v-model="nodeOption.bgColor" show-alpha :predefine="predefineColors" size="mini"></el-color-picker></el-form-item></el-col><el-col :span="8"><el-form-item label="字体颜色"><el-color-picker v-model="nodeOption.fontColor" show-alpha :predefine="predefineColors" size="mini"></el-color-picker></el-form-item></el-col></el-row><el-row><el-form-item label="节点内容"><el-input type="textarea" :rows="5" v-model="nodeOption.content" style="width:85%;"></el-input></el-form-item></el-row></el-form><span slot="footer" class="dialog-footer"><el-button type="primary" class="common-btn" @click="sureEditNode">确 定</el-button></span></el-dialog></div>
</template><script>
export default {data () {return {drawer: false,dialogVisible: false,direction: 'rtl',theme_value: '',nodeOption: {content: '',bgColor: '',fontColor: '',fontSize: '',fontWeight: '',fontStyle: ''},mindHeight: '800px',themOptions: ['primary', 'warning', 'danger', 'success', 'info', 'greensea', 'nephrite', 'belizehole', 'wisteria', 'asphalt', 'orange', 'pumpkin', 'pomegranate', 'clouds', 'asbestos'],mind: {meta: {name: 'jsMind remote',author: 'hizzgdev@163.com',version: '0.2'},format: 'node_tree',data: {id: 'root',topic: 'jsMind'}},options: {container: 'jsmind_container', // [必选] 容器的IDeditable: false, // [可选] 是否启用编辑theme: 'orange' // [可选] 主题},formData: {id: '',mindCode: '',mindName: '',mindType: '',mindData: '',mindOptions: ''},mindOptions: {theme: ''},treeData: [],defaultProps: {children: 'children',label: 'name'},color: 'rgba(255, 69, 0, 0.68)',predefineColors: ['#ff4500','#ff8c00','#ffd700','#90ee90','#00ced1','#1e90ff','#c71585','rgba(255, 69, 0, 0.68)','rgb(255, 120, 0)','hsv(51, 100, 98)','hsva(120, 40, 94, 0.5)','hsl(181, 100%, 37%)','hsla(209, 100%, 56%, 0.73)','#c7158577'],isShow: true}},created () {this.mindHeight = (document.body.clientHeight - 90) + 'px'},mounted () {this.jm = this.$refs.jsMind.jmthis.jm.enable_edit()this.jm.enable_event_handle('dblclick')},methods: {// 缩小zoomOut () {if (this.jm.view.zoomOut()) {this.$refs.zoomOut.disabled = false} else {this.$refs.zoomOut.disabled = true}},// 放大zoomIn () {if (this.jm.view.zoomIn()) {this.$refs.zoomIn.disabled = false} else {this.$refs.zoomIn.disabled = true}},// 新增节点addNode () {let selectedNode = this.jm.get_selected_node() // as parent of new nodeif (!selectedNode) {this.$message({type: 'warning',message: '请先选择一个节点!'})return}let nodeid = this.jsMind.util.uuid.newid()let topic = 'new Node'this.jm.add_node(selectedNode, nodeid, topic)},// 编辑节点editNode () {let selectedId = this.get_selected_nodeid()if (!selectedId) {this.$message({type: 'warning',message: '请先选择一个节点!'})return}let nodeObj = this.jm.get_node(selectedId)this.nodeOption.content = nodeObj.topicthis.nodeOption.bgColor = nodeObj.data['background-color']this.nodeOption.fontColor = nodeObj.data['foreground-color']this.nodeOption.fontSize = nodeObj.data['font-size']this.nodeOption.fontWeight = nodeObj.data['font-weight']this.nodeOption.fontStyle = nodeObj.data['font-style']this.dialogVisible = true},sureEditNode () {let selectedId = this.get_selected_nodeid()this.jm.update_node(selectedId, this.nodeOption.content)this.jm.set_node_font_style(selectedId, this.nodeOption.fontSize, this.nodeOption.fontWeight, this.nodeOption.fontStyle)this.jm.set_node_color(selectedId, this.nodeOption.bgColor, this.nodeOption.fontColor)this.nodeOption = {content: '',bgColor: '',fontColor: '',fontSize: '',fontWeight: '',fontStyle: ''}this.dialogVisible = false},// 删除节点onRemoveNode () {let selectedId = this.get_selected_nodeid()if (!selectedId) {this.$message({type: 'warning',message: '请先选择一个节点!'})return}this.jm.remove_node(selectedId)},// 布局方向changeOption () {if (this.options.mode === 'side') {this.options = {mode: 'full'}} else {this.options = {mode: 'side'}}},// 选择主题颜色set_theme () {this.jm.set_theme(this.theme_value)},// 获取选中标签的 IDget_selected_nodeid () {let selectedNode = this.jm.get_selected_node()if (selectedNode) {return selectedNode.id} else {return null}},getMind (mindCode) {let url = process.env.VUE_APP_BASE_CRUD_PATH + `/api/jsmind/get/` + mindCodethis.$axios.get(url).then(res => {this.formData = res.resultif (this.formData.mindOptions !== '') {this.theme_value = JSON.parse(this.formData.mindOptions).themethis.set_theme()}this.jm.show(JSON.parse(res.result.mindData))}).catch(err => {console.log(err)})},saveMind () {if (this.formData.mindCode === '') {this.$message({ type: 'warning', message: '导图编码不能为空!' })return}if (this.formData.mindName === '') {this.$message({ type: 'warning', message: '导图名称不能为空!' })return}this.mindOptions.theme = this.theme_valuethis.formData.mindOptions = JSON.stringify(this.mindOptions)this.formData.mindData = JSON.stringify(this.jm.get_data())let url = process.env.VUE_APP_BASE_CRUD_PATH + `/api/jsmind/save`this.$axios.post(url, JSON.stringify(this.formData), {headers: {'Content-Type': 'application/json;charset=UTF-8'}}).then(res => {if (res.resultCode === 500) {this.$message({type: 'error',message: '导图编码已存在!'})}if (res.resultCode === 200) {this.$message({type: 'success',message: '保存成功!'})}}).catch(err => {console.log(err)})},deleteMind () {this.$confirm('您确定要删除该导图吗？', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {let url = process.env.VUE_APP_BASE_CRUD_PATH + `/api/jsmind/delete/` + this.formData.idthis.$axios.post(url).then(res => {if (res.resultCode === 200) {this.$message({type: 'success',message: '删除成功!'})}this.$router.push('/jsmind')location.reload()}).catch(err => {console.log(err)})}).catch(() => {})}}
}
</script><style>
.header{height: 60px;background-color: #eee;border-bottom: solid 1px #aaa;z-index: 100;
}.footer{position: absolute;bottom: 0;width: 100%;height: 30px;overflow: hidden;background-color: #f2f2f2;border-top: solid 1px #bbb;}
</style>

vue使用jsMind思维导图类库相关推荐

【Vue】Vue基础总结思维导图
Vue基础主要包括指令.过滤器(filters).侦听器(watch).计算属性(computed).自定义属性(props).生命周期及生命周期函数.组件之间的数据共享.ref引用.创建工程化Vue ...
Vue 源码思维导图
Vue 思维导图(二)
Vue思维导图笔记 vue2.0的思维导图整理 Vue.js学习思维导图一览本图覆盖Vue.js学习所有基本知识点,有需要的同学可以保存到本地进行缩放,如有问题欢迎批评指正
22款思维导图软件开源软件
思维导图软件 XMind XMind是一款同样开源且跨平台的思维导图软件,XMind 在功能上一点也不逊色于 FreeMind,某些方面,XMind 甚至更加具有优势.XMind 支持中文简繁体. X ...
在vue中使用jsmind生成思维导图
在vue中使用jsmind生成思维导图前景: 项目中有涉及到多层级的数据结构,思维导图的方式更方便查看数据的关系技术实现:jsmind 实现效果: 安装 npm i jsmind 代码 <t ...
vue data数据修改_Vue 超清晰思维导图（7张），详细知识点梳理！
Vue思维导图目录 MVC与MVVM的区别 Vue基本代码结构 Vue指令 Vue组件 class和style动态绑定 computed计算属性 EventBus filter过滤器方法 Vue是一套 ...
vue纯手写思维导图，拒绝插件(cv即用)
vue纯手写思维导图,拒绝插件(cv即用) 已完成功能点:折叠.放大.缩小.移动后续增加功能点:添加.删除先看结果: 有这么个需求,按照层级关系,把表格放在思维导图上,我第一时间想到用插件,但是找 ...
iris流程图_GitHub - LeoIris/vue: vue源码逐行注释分析+40多m的vue源码程序流程图思维导图（diff部分待后续更新）...
vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了 .这个vue源码逐行分析,我基本每 ...
思维导图Vue组件 mindmap
开箱即用的思维导图Vue组件 GitHub 在线演示:https://mindnode.5xin.xyz/
vue的matcher_一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构
1.前言本文内容讲解的内容:一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构. 2. Vue 全家桶先来张 Vue 全家桶总图: 3. Vue 细分如下源码 ...

vue使用jsMind思维导图类库

效果展现

一、安装

二、在main.js中引入

三、使用

vue使用jsMind思维导图类库相关推荐

最新文章

热门文章