vue + antV G6 （GraphIn组件） 实现节点badges（徽标/消息通知）

相信大家在用G6的时候，其他功能都实现了，但是需求要在节点上加一些展示东西，这时候你去自定义节点，发现badges（徽标/消息通知）无法实现

实现后的效果图：

 在antV官方给出了基于react+G6实现的graphin的react组件，这时候在vue项目中用react组件，实在是有点不太对（能实现但完全不建议）

Graphin官网：https://graphin.antv.vision/graphin

可以用react框架先实现图谱功能，然后打包完后，将build文件放到vue项目中的public中，在页面使用ifarme嵌入即可

        react -- demo效果

 

 react -- demo  代码

         用到一些方法：比如传递数据到外部 window.parent.postMessage（）

                                接受外部数据触发渲染window.addEventListener（‘message’,callback）

        

vue项目引入build文件，将打包好的react组件build文件放到vue的public中

        

 页面中使用iframe嵌入

        

 vue中主要用到的方法：this.iframeWin = this.$refs.iframe.contentWindow

                触发：this.iframeWin.postMessage();

这样就不用担心因为框架的问题，实现不了的功能，前端所见即所得，实现需求肯定是有办法的～～～ng，react，vue全都一样，都可以用同样的方式解决，有简单的可以大家一起讨论～