vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue2使用思维导图jsmind

vue2使用思维导图jsmind的详细代码

作者:emoji111111

jsMind是一个基于Js的思维导图库,jsMind是一个纯JavaScript类库,用于创建、展示和操作思维导图,这篇文章主要给大家介绍了关于vue2使用思维导图jsmind的详细代码,需要的朋友可以参考下

1、首先安装

npm install vue-jsmind

2、在main.js 里面引入

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

3、页面使用

//后端返回的数据
data:[
    {rylx: "网格员", xgnr: "上报事件35件"}
    {rylx: "网格员", xgnr: "安全检查 53 户"}
]

最终结果

<template>
      <div id="jsmind_container_box"></div>
</template>

<script>
import rootIcon from '@/assets/images/img_ry.png'

export default {
    props: {
        data: {
            type: Array
        }
    },
    computed: {
        findParentId() {
            return function(item) {
                var parentItem = this.testData.filter(p => {
                    return item.rylx == p.topic
                })
                return parentItem[0].id
            }
        },
        uniqueItem() {
            return function(arr) {
                var uniqueArr = [...new Set(arr.map(item => item.rylx))].map(rylx =>
                    arr.find(item => item.rylx === rylx)
                )
                return uniqueArr
            }
        }
    },
    data() {
        return {
            testData: [],
            mind: {
                /* 元数据,定义思维导图的名称、作者、版本等信息 */
                meta: {
                    name: '思维导图',
                    author: '****',
                    version: '0.2'
                },
                /* 数据格式声明 */
                format: 'node_array',
                /* 数据内容 */
                data: []
            },
            styles: {
                level1: {
                    background: '#d7e2ff',
                    color: '#7581f8',
                    borderRadius: '80px',
                    fontWeight: 'bold',
                    boxShadow: 'none',
                    borderRadius: '80px',
                    fontSize: '14px',
                    border: 'none',
                    padding: '12px 20px'
                },
                level2: {
                    background: '#FFFFFF',
                    color: '#7581f8',
                    borderRadius: '80px',
                    fontWeight: '400',
                    boxShadow: 'none',
                    borderRadius: '80px',
                    border: '1px solid #7581f8',
                    fontSize: '14px',
                    color: '#7581f8',
                    padding: '8px 24px'
                }
            }
        }
    },
    mounted() {
        this.handleMind()
    },
    methods: {
        handleMind() {
            var that = this
            const root = {
                id: 'root',
                topic: '',
                'background-image': rootIcon,
                width: '200',
                height: '200',
                isroot: 'true'
            }
            var middleIndex = parseInt(that.data.length / 2)
            var newArr = this.uniqueItem(that.data)
            newArr.forEach((item, index) => {
                let query = {
                    id: String(index),
                    parentid: 'root',
                    topic: item.rylx,
                    direction: middleIndex == '1' ? 'right' : index < middleIndex ? 'left' : 'right'
                }

                that.testData.push(query)
            })
            that.data.forEach((item, index) => {
                if (item.xgnr.length) {
                    let childItem = {
                        id: index + '0',
                        parentid: this.findParentId(item),
                        topic: item.xgnr,
                        direction: 'left'
                    }
                    that.testData.push(childItem)
                }
            })

            that.testData.unshift(root)
            that.mind.data = that.testData
            that.init()
            that.applyStyles()
        },
        init() {
            var options = {
                container: 'jsmind_container_box',
                editable: false,
                view: {
                    engine: 'canvas', // 思维导图各节点之间线条的绘制引擎
                    line_width: 2, // 思维导图线条的粗细
                    line_color: '#D9D9D9' // 思维导图线条的颜色
                },
                layout: {
                    hspace: 80, // 节点之间的水平间距
                    vspace: 10, // 节点之间的垂直间距
                    pspace: 10 // 节点与连接线之间的水平间距(用于容纳节点收缩/展开控制器)
                }
            }
            this.jm = jsMind.show(options)
            this.jm.show(this.mind)
        },

        applyStyles() {
            const root = this.jm.get_root()._data.view
            root.element.style.borderRadius = '699px'
            root.element.style.backgroundSize = 'cover'
            root.element.style.boxShadow = 'none'
            this.repeatItem(this.jm.get_root().children, this.styles.level1)
        },
        repeatItem(nodes, style) {
            for (let i = 0; i < nodes.length; i++) {
                const node = nodes[i]
                node._data.view.element.style.color = style.color
                node._data.view.element.style.fontSize = style.fontSize
                node._data.view.element.style.borderRadius = style.borderRadius
                node._data.view.element.style.background = style.background
                node._data.view.element.style.fontWeight = style.fontWeight
                node._data.view.element.style.boxShadow = style.boxShadow
                node._data.view.element.style.border = style.border
                node._data.view.element.style.padding = style.padding
                if (nodes[i].children.length) {
                    this.repeatItem(nodes[i].children, this.styles.level2)
                }
            }
        }
    }
}
</script>
<style scoped>
#jsmind_container_box {
    width: 100%;
    height: 302px !important;
    border: 1px solid #d9d9d9;
}
</style>

总结 

到此这篇关于vue2使用思维导图jsmind的文章就介绍到这了,更多相关vue2使用思维导图jsmind内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文