ibms/src/components/common/jsmind.vue

<!--
    initData(基础参数配置,实际数据): 由父组件调用，成功后返回jsmind实例
    @event {选中节点} selectNode 派发事件selectNode
-->
<template>
    <div class="h100">
        <div :id="id" style="width:100%;height:100%;"></div>
    </div>
</template>
<script>
    import "@/assets/js/jsmind.js"
    import "@/assets/css/jsmind.css"
    export default {
        name: "jsMindComponent",
        props: {
            id: {
                type: String,
                default: function createRandomId() {
                    return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
                }
            },
        },
        data() {
            return {
                jm: ""
            }
        },
        created() {
            console.log(111)
        },
        mounted() {
            console.log(jsMind)
        },
        methods: {
            initData(options, data) {
                let el = {
                        container: this.id,
                        editable: true, //是否启用编辑
                        theme: "greensea", //主题
                        mode: "side", //显示模式
                        support_html: true //是否支持节点里的HTML元素
                    },
                    option = Object.assign({
                        container: this.id,
                        editable: true,
                        theme: 'orange'
                    }, options);
                this.jm = new jsMind(el)
                this.jm.show(data)
                console.log(this.jm)
                this.jm.view.container.addEventListener('click', this.click)
                this.jm.view.container.addEventListener('mouseover', this.hoverElement)
                return this.jm
            },
            hoverElement(e) {
                console.log()
                let nodeid = e.target.getAttribute('nodeid')
                if (!!nodeid) {
                    e.target.setAttribute('title', e.target.innerHTML)
                }
            },
            click(e) {
                let event = e || window.event,
                    target = event.target || event.srcEvent,
                    val = target.innerHTML;
                console.log(event, target, target)
                if (target.nodeName == "JMEXPANDER") {
                    console.log(target.innerHTML)
                    //-为展开
                    if (val == "-") {
                        console.log(this.jm.get_node(target.getAttribute("nodeid")))
                        this.$emit("openNode", this.jm.get_node(target.getAttribute("nodeid")))
                    } else {
                    }
                }
            }
        }
    }
</script>
<style lang="scss" scoped>

</style>