最近接触了VUE，发现还挺好上手，所以本文基于VUE开发的思维导图工具，是结合时下最流行的思维导图模式开发的，可移动使用的工具。话不多说，界面如下：
主要实现核心代码如下：
<template>
<view class="body">
<view class="header">
<view style="margin-left: 5px;margin-top: 5px;width: 95%;display:inline-block;text-align: center;">
<el-row>
<el-col :span="8">
<label style="font-size: 14px;color: #FFFFFF;">导图名称</label>
<el-input v-model="formData.mindName" style="width: 100px;font-size: 14px"></el-input>
</el-col>
<el-col :span="8" style="">
<label style="font-size: 14px;color: #FFFFFF;">导图类型</label>
<el-select v-model="formData.mindType" style="width: 100px;font-size: 14px">
<el-option value="zsdt" label="知识导图"></el-option>
<el-option value="fwdt" label="服务导图"></el-option>
</el-select>
</el-col>
<el-col :span="8" style="">
<label style="font-size: 14px;color: #FFFFFF;">主题</label>
<el-select @change="set_theme" v-model="theme_value" style="width: 100px;font-size: 14px">
<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>
</view>
<view style="float:left;margin: 5px 5px 0px 20px;display:inline-block;text-align: center;">
<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="onRemoveNode" ><i class="el-icon-minus" ></i></el-button>
<el-button type="primary" class="noimpor-btn" @click="editNode" ><i class="el-icon-edit" ></i></el-button>
</view>
</view>
<js-mind :values="mind" :options="options" v-show="isShow" ref="jsMind" :height="mindHeight" ></js-mind>
<view class="gongneng" style="float:right;margin: 0px 0px 0px 0px;display:inline-block;text-align: center;">
</view>
<el-dialog
title="编辑节点"
:visible.sync="dialogVisible"
width="100%"
style="font-size: 10px;">
<el-form>
<el-row>
<el-col :span="10">
<el-form-item label="字体大小">
<el-input v-model="nodeOption.fontSize" style="width: 80%"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="字体加粗">
<el-select v-model="nodeOption.fontWeight" style="width: 100%">
<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="10">
<el-form-item label="字体样式">
<el-select v-model="nodeOption.fontStyle" style="width: 100%">
<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="10">
<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="10">
<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="2" 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>
</view>
</template>
<script>
export default {
data () {
return {
mmImg:"",//这是要保存的图片
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: '中心主题'
}
},
options: {
container: 'jsmind_container', // [必选] 容器的ID
editable: 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.jm
this.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 node
if (!selectedNode) {
this.$message({
type: 'warning',
message: '请先选择一个节点!'
})
return
}
let nodeid = this.jsMind.util.uuid.newid()
let topic = '子主题'
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.topic
this.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)
},
// 获取选中标签的 ID
get_selected_nodeid () {
let selectedNode = this.jm.get_selected_node()
if (selectedNode) {
return selectedNode.id
} else {
return null
}
},
}
}
</script>
<style>
.header{
background-color: #aaa;
height: 125px;
border-bottom: solid 1px #aaa;
z-index: 10;
}
.gongneng{
padding: 2% 0 0 0;
width: 100%;
height: 0px;
border: #eee solid 1px;
background-color: #f2f2f2;
}
</style>总结
本文实现移动开发，有点投机取巧，使用Hbuilder开发的好处是可以实现将程序挂载在Hbuilder网页上，同时会有唯一的网络链接，同时借用相关网站可以将网页变成二维码，然后发布二维码即可。
如果各位对源代码感兴趣，可以到我的主页下载。
版权声明：本文为Crazydoubao原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。