G6Board

npm i @wangankeji/vue-g6board

<template>
  <g6-board ref="board" :options="options" :data="data" :edit-mode="editMode" />
</template>
<script>
import { defineOptions } from "@wangankeji/vue-g6board";

export default {
  components: { G6Board },
  data() {
    return {
      options: defineOptions({}),
      data: {
        nodes: [],
        edges: []
      },
      editMode: false
    };
  }
};
</script>

{
  "graph": G6.Graph
}

{
  "value": 100,
  "event": MouseWhellEvent,
  "graph": G6.Graph
}

{
  "type": "",
  "item": {},
  "data": {},
  "graph": G6.Graph
}

--contextmenu-color: #000;
--contextmenu-background: #fff;
--contextmenu-shadow: 2px 2px 5px 1px #e6e5e5;

--contextmenu-title-color: #000;
--contextmenu-title-background: none;
--contextmenu-title-border-color: #dbdadaaa;

--contextmenu-hover-color: blue;
--contextmenu-hover-background: rgb(215, 239, 247);

--contextmenu-gutter-background: #dbdada88;

--contextmenu-separeator-color: #ebebeb transparent #fffefec7 transparent;