• vis 右键节点展开菜单

    案例菜单（案例菜单组件为自定义测试组件，有多余代码，仅供参考）

    功能点如下：

    1. 右键展开菜单，点击请求节点数据，或展开下级菜单

    2. 拖动节点或画布，菜单跟随节点

    3. 缩放画布，菜单同步缩放

    4. 对其它或者空白区域进行操作时，关闭菜单

    主要流程：

    监听右键-》获取鼠标点击节点所在位置-》将给位置赋值给菜单

    步骤1： network.on("oncontext", (e) => {}）

    其中步骤2获取节点位置可通过vis的api获取

    1. 获取鼠标点击处画布中的位置，e.pointer.DOM
    2. 根据在画布中的点击位置返回节点id，nodeId = network.getNodeAt(e.pointer.DOM)
    3. 通过节点id获取节点中心点在画布中的位置，network.getPositions(nodeId)，返回的是对象

    代码如下

    1. <template>
    2.   <div>
    3.     <div id="mynetwork" class="mynetwork2" :style="{ width: width, height: height }"></div>
    4.     <CustomMenu
    5.       v-if="menuShow"
    6.       :menuTop="menuTop"
    7.       :menuLeft="menuLeft"
    8.       :menuScale="menuScale"
    9.       :menuShow="menuShow"
    10.       :nodeType="nodeType"
    11.       @closeMenu="hideCircle"
    12.     />
    13.   </div>
    14. </template>
    15.  
    16. <script>
    17. // const vis = require("vis-network/dist/vis-network.min.js");
    18. import vis from "vis";
    19. // import _ from "lodash";
    20. import CustomMenu from "./customMenu.vue";
    21.  
    22. var network = null;
    23. let menuTimer = null; //右键菜单
    24. export default {
    25.   components: { CustomMenu },
    26.   computed: {
    27.     styleFun: function() {
    28.       console.log(this.menuScale, this.menuLeft, this.menuTop, "menuScale");
    29.       var str = `left: ${this.menuLeft}; top: ${this.menuTop};transform:scale(${this.menuScale})`;
    30.       return str;
    31.     },
    32.   },
    33.   props: {
    34.     width: {
    35.       type: String,
    36.       default: "100%",
    37.     },
    38.     height: {
    39.       type: String,
    40.       default: "100%",
    41.     },
    42.   },
    43.   data() {
    44.     return {
    45.       menuShow: false, //自定义右键菜单
    46.       menuLeft: 0,
    47.       menuTop: 0,
    48.       menuScale: 0,
    49.       nodeType: null,
    50.       selectedNode: null, //选中节点
    51.       // 节点
    52.       nodes: new vis.DataSet([
    53.         {
    54.           id: 1,
    55.           label: "Node 1",
    56.           image: {
    57.             selected: require("@/assets/people-opened.png"),
    58.             unselected: require("@/assets/people-def.png"),
    59.           },
    60.         },
    61.         {
    62.           id: 2,
    63.           label: "Node 2",
    64.           image: {
    65.             selected: require("@/assets/people-opened.png"),
    66.             unselected: require("@/assets/people-def.png"),
    67.           },
    68.         },
    69.  
    70.         {
    71.           id: 3,
    72.           label: "Node 3",
    73.           image: {
    74.             selected: require("@/assets/people-opened.png"),
    75.             unselected: require("@/assets/people-def.png"),
    76.           },
    77.         },
    78.  
    79.         {
    80.           id: 4,
    81.           label: "Node 4",
    82.           image: {
    83.             selected: require("@/assets/people-opened.png"),
    84.             unselected: require("@/assets/people-def.png"),
    85.           },
    86.         },
    87.  
    88.         {
    89.           id: 5,
    90.           label: "Node 5",
    91.           title: "5",
    92.           image: {
    93.             selected: require("@/assets/people-opened.png"),
    94.             unselected: require("@/assets/people-def.png"),
    95.           },
    96.         },
    97.       ]),
    98.       //  边
    99.       edges: new vis.DataSet([
    100.         { id: 1, from: 1, to: 3 },
    101.         { id: 2, from: 1, to: 3 },
    102.         { id: 5, from: 3, to: 1 },
    103.         { from: 1, to: 2, title: "1-2", label: "1-2" },
    104.         { from: 2, to: 4 },
    105.         { from: 2, to: 5 },
    106.         // { from: 3, to: 3 },
    107.       ]),
    108.     };
    109.   },
    110.   mounted() {
    111.     this.init();
    112.   },
    113.   methods: {
    114.     init() {
    115.       // create a network
    116.       var container = document.getElementById("mynetwork");
    117.       var data = {
    118.         nodes: this.nodes,
    119.         edges: this.edges,
    120.       };
    121.  
    122.       var options = {
    123.         interaction: {
    124.           dragNodes: true,
    125.           // dragView: true,
    126.           hideEdgesOnDrag: false,
    127.           // hideEdgesOnZoom: false,
    128.           hideNodesOnDrag: false,
    129.           hover: true,
    130.           hoverConnectedEdges: true,
    131.           keyboard: {
    132.             enabled: false,
    133.             speed: { x: 10, y: 10, zoom: 0.02 },
    134.             bindToWindow: true, //设置为false，确保键盘快捷键仅在具有焦点的关系图实例上工作
    135.           },
    136.           multiselect: true, //长时间单击（或触摸）以及控件单击将添加到’选择中‘。
    137.           navigationButtons: false, //如果为true，则在关系图canvas上绘制导航按钮。这些按钮是HTML，可以使用CSS自定义样式。
    138.           selectable: true, //用户可以选择节点和边。
    139.           selectConnectedEdges: true, //在选中节点时，与其连接的边将高亮（高亮色）显示
    140.           tooltipDelay: 300, //提示框显示的延迟时间（毫秒）
    141.           zoomView: true,
    142.         },
    143.  
    144.         layout: {
    145.           randomSeed: 1, //配置每次生成的节点位置都一样，参数为数字1、2等
    146.         },
    147.         nodes: {
    148.           // shape: "circularImage",
    149.           shape: "image",
    150.           // opacity:0.1,
    151.           // borderWidth: 0,
    152.           size: 23,
    153.           color: {
    154.             // border: "rgba(255, 255, 255, 1)",
    155.             background: "rgba(102, 51, 255, 0)",
    156.           },
    157.           font: {
    158.             color: "#fff",
    159.           },
    160.           shadow: {
    161.             enabled: true,
    162.             // color: "rgba(255, 215, 0, 0.8)",
    163.             color: "rgba(153, 102, 204, 0.8)",
    164.             size: 40,
    165.             x: 0,
    166.             y: 0,
    167.           },
    168.           chosen: {
    169.             label: false,
    170.             // node: function(values, id, selected, hovering) {
    171.             node: function(values) {
    172.               values.shadowColor = "rgba(255, 215, 0, 0.8)";
    173.             },
    174.           },
    175.         },
    176.         edges: {
    177.           hoverWidth: 0,
    178.           shadow: true,
    179.           arrows: {
    180.             to: {
    181.               enabled: true,
    182.               type: "arrow",
    183.             },
    184.           },
    185.           color: {
    186.             color: "#525A81",
    187.             highlight: "#FFBA30",
    188.             hover: "#FFBA30",
    189.             // inherit: "from",
    190.             opacity: 1.0,
    191.           },
    192.           font: {
    193.             color: "#fff",
    194.             size: 12, // px
    195.             strokeWidth: 0, // px
    196.           },
    197.         },
    198.       };
    199.       network = new vis.Network(container, data, options);
    200.       // 事件监听
    201.       this.networkEvent();
    202.     },
    203.     // 拓扑网络监听事件
    204.     networkEvent() {
    205.       const _this = this;
    206.       //单击
    207.       network.on("click", (e) => {
    208.         console.log("单击：", e);
    209.         this.hideCircle();
    210.       });
    211.       // 单击鼠标右键
    212.       network.on("oncontext", (e) => {
    213.         console.log(e);
    214.         // 获取节点 id
    215.         var nodeId = network.getNodeAt(e.pointer.DOM);
    216.         console.log(nodeId, this.nodes.get(nodeId));
    217.         console.log("单击：", network.getPositions(nodeId));
    218.  
    219.         e.event.preventDefault();
    220.         if (_this.menuShow) {
    221.           this.hideCircle();
    222.           setTimeout(() => {
    223.             if (nodeId) {
    224.               this.selectedNode = nodeId;
    225.               this.changeMenuPosition(e);
    226.             } else {
    227.               this.hideCircle();
    228.             }
    229.           }, 0);
    230.         } else {
    231.           if (nodeId) {
    232.             this.selectedNode = nodeId;
    233.             this.changeMenuPosition(e);
    234.           } else {
    235.             this.hideCircle();
    236.           }
    237.         }
    238.       });
    239.  
    240.       //  鼠标缩放事件
    241.       network.on("zoom", (e) => {
    242.         console.log(e);
    243.         // this.$emit("changeZoom", e.scale);
    244.       });
    245.     },
    246.     getNodePosition() {
    247.       // console.log(e);
    248.       var nodeId = this.selectedNode;
    249.       // 通过节点id 获取节点中心点的在画布的位置
    250.       let nodePosition = network.getPositions(nodeId);
    251.       // console.log(nodePosition, "nodePosition");
    252.       // 坐标转化
    253.       nodePosition = network.canvasToDOM(nodePosition[nodeId]);
    254.       return nodePosition;
    255.     },
    256.     // 设置环形位置
    257.     setCirclePostion(x, y, scale) {
    258.       this.menuShow = true;
    259.       this.menuLeft = Math.floor(x) + "px";
    260.       this.menuTop = Math.floor(y) + "px";
    261.       this.menuScale = scale;
    262.     },
    263.     // 更新右键菜单位置
    264.     changeMenuPosition(e) {
    265.       menuTimer = setInterval(() => {
    266.         // 获取缩放尺寸
    267.         let scale = network.getScale();
    268.         let nodePosition = this.getNodePosition(e);
    269.         // console.log("nodePosition:", nodePosition);
    270.         this.setCirclePostion(
    271.           /*
    272.            *转换的坐标为相对容器DOM的坐标
    273.            *82菜单半径
    274.            */
    275.           nodePosition.x - 82,
    276.           nodePosition.y - 82,
    277.           scale
    278.         );
    279.       }, 10);
    280.     },
    281.     // 隐藏圆环选项
    282.     hideCircle(status) {
    283.       window.clearInterval(menuTimer);
    284.       // clearInterval(menuTimer);
    285.       this.menuShow = false;
    286.       if (status) {
    287.         //圆环菜单单击隐藏，修改该节点和连接边的展开参数
    288.         let edges = [];
    289.         this.nodes.updateOnly({
    290.           id: this.selectedNode,
    291.           open: true,
    292.           // changEdge: e.edges[0]
    293.         });
    294.         edges = network.getConnectedEdges(this.selectedNode);
    295.  
    296.         if (edges.length > 0) {
    297.           edges.forEach((item) => {
    298.             this.edges.updateOnly({
    299.               id: item,
    300.               open: true,
    301.               // length: 600
    302.             });
    303.           });
    304.         }
    305.  
    306.         var option = {
    307.           scale: 1.0,
    308.           offset: { x: 0, y: 0 },
    309.           animation: {
    310.             duration: 1000,
    311.             easingFunction: "easeInOutQuad",
    312.           },
    313.         };
    314.  
    315.         network.focus(this.selectedNode, option);
    316.       }
    317.     },
    318.   },
    319.   beforeDestroy() {
    320.     window.clearInterval(menuTimer);
    321.   },
    322. };
    323. </script>
    324.  
    325. <style lang="less" scoped>
    326. .box,
    327. .mynetwork2 {
    328.   height: 100%;
    329.   background-color: #2a004a;
    330. }
    331.  
    332. .cricle {
    333.   position: absolute;
    334.   left: 0px;
    335.   top: 0px;
    336.   width: 100px;
    337.   height: 100px;
    338.   border: 30px solid rgba(200, 200, 200, 0.7);
    339.   border-radius: 50px;
    340.   box-sizing: border-box;
    341.   z-index: 10;
    342.   // display: none;
    343.  
    344.   span {
    345.     position: absolute;
    346.     left: 0;
    347.     right: 0;
    348.     width: 30px;
    349.     height: 20px;
    350.     line-height: 20px;
    351.     text-align: center;
    352.     font-size: 10px;
    353.     cursor: pointer;
    354.     &:hover {
    355.       color: #1b68ff;
    356.     }
    357.  
    358.     &:nth-child(1) {
    359.       left: 5px;
    360.       top: -25px;
    361.     }
    362.  
    363.     &:nth-child(2) {
    364.       left: 37px;
    365.       top: -5px;
    366.     }
    367.  
    368.     &:nth-child(3) {
    369.       left: 37px;
    370.       top: 25px;
    371.     }
    372.  
    373.     &:nth-child(4) {
    374.       left: 5px;
    375.       top: 44px;
    376.     }
    377.  
    378.     &:nth-child(5) {
    379.       left: -27px;
    380.       top: 25px;
    381.     }
    382.  
    383.     &:nth-child(6) {
    384.       left: -27px;
    385.       top: -5px;
    386.     }
    387.   }
    388. }
    389. </style>

    菜单代码如下

    1. <template>
    2.   <div id="ring-option" class="custom-menu" :style="styleFun" @contextmenu.prevent.capture>
    3.     
    4.     <div class="inner-ring">
    5.       <div
    6.         :class="['innerWrapper', innerWrapperClass[index]]"
    7.         v-for="(item, index) in optionData"
    8.         :key="index"
    9.       >
    10.         <div
    11.           :class="[
    12.             'innerRingOption',
    13.             innerOptionClass[index],
    14.             startRun ? 'start-animation' + (index + 1) : '',
    15.           ]"
    16.         >
    17.           
    18.         div>
    19.       div>
    20.     div>
    21.  
    22.     
    23.  
    24.     <div class="out-ring" @click="cl('ccc', 2)">
    25.       <div
    26.         :class="['outWrapper', 'outWrapper' + index]"
    27.         v-for="(item, index) in outOptionData"
    28.         :key="index"
    29.       >
    30.         <div
    31.           @click="cl(index, 1)"
    32.           :class="['outRingOption', 'outOption' + index, classObject + (index + 1)]"
    33.         >
    34.           <div class="out-option-bg" @click="cl(index, 2)">div>
    35.         div>
    36.       div>
    37.     div>
    38.     
    39.  
    40.     <div class="inner-option-list" v-if="showOptionListInner">
    41.       <div
    42.         :class="['option-item', { ashFont: startOut == 1 }]"
    43.         v-for="(item, index) in optionData"
    44.         :key="index"
    45.         @click.stop="close(index + 1, true)"
    46.       >
    47.         {{ item.name }}
    48.       div>
    49.     div>
    50.  
    51.     
    52.     
    53.     <div class="out-option-list" v-if="showOptionListOut" @click="cl('aa', 2)">
    54.       <div
    55.         class="option-item"
    56.         v-for="(item, index) in outOptionData"
    57.         :key="index"
    58.         @click.stop="getExtraList(item.key)"
    59.       >
    60.         {{ item.value }}
    61.       div>
    62.     div>
    63.   div>
    64. template>
    65.  
    66. <script>
    67. // import Bus from "bus";
    68.  
    69. // import { getExtra } from "@/api/api.js";
    70.  
    71. export default {
    72.   props: {
    73.     menuTop: String,
    74.     menuLeft: String,
    75.     menuScale: Number,
    76.     menuShow: Boolean,
    77.     nodeType: String,
    78.     delayTime: Number,
    79.   },
    80.   data() {
    81.     return {
    82.       startRun: false,
    83.       // showDefaultOption: true,
    84.       showOptionListInner: false,
    85.       optionTimeInner: null,
    86.       innerWrapperClass: ["left-top", "right-top", "right-bottom", "left-bottom"],
    87.       innerOptionClass: [
    88.         "left-top-ring",
    89.         "right-top-ring",
    90.         "right-bottom-ring",
    91.         "left-bottom-ring",
    92.       ],
    93.       optionData: [{ name: "一度" }, { name: "二度" }, { name: "三度" }, { name: "定向扩展" }],
    94.       // 外圈
    95.       startOut: 0, //3:不动，1：展开；2收回
    96.       optionTimeOut: null,
    97.       outOptionData: [
    98.         // { value: "同行" },
    99.         // { value: "同航班" },
    100.         // { value: "同酒店" },
    101.         // { value: "同网吧" },
    102.         // { value: "同火车" }
    103.       ],
    104.       showOptionListOut: false,
    105.       hasClickOutOption: false, //默认只有点击'选项'才有交互，点击圆盘不交互
    106.     };
    107.   },
    108.   computed: {
    109.     styleFun: function() {
    110.       console.log(this.menuScale, this.menuLeft, this.menuTop, "menuScale");
    111.       var str = `left: ${this.menuLeft}; top: ${this.menuTop};transform:scale(${this.menuScale})`;
    112.       return str;
    113.     },
    114.     scaleFun: function() {
    115.       console.log(this.menuScale);
    116.       var scale = this.menuScale;
    117.       return `transform:scale(${scale})`;
    118.     },
    119.     classObject: function() {
    120.       let classStr = "";
    121.       console.log("this.startOut:", this.startOut);
    122.       if (this.startOut == 1) {
    123.         classStr = "start-out";
    124.       } else if (this.startOut == 2) {
    125.         classStr = "end-out";
    126.       }
    127.       return classStr;
    128.     },
    129.   },
    130.   watch: {
    131.     menuLeft() {
    132.       // console.log(n);
    133.       // this.startRun = false;
    134.       this.runAnimation();
    135.     },
    136.   },
    137.   mounted() {
    138.     this.runAnimation();
    139.     clearTimeout(this.optionTime);
    140.     this.optionTime = setTimeout(() => {
    141.       this.showOptionListInner = true;
    142.       // this.showDefaultOption = false;
    143.       // console.log("this.showOptionListInner:", this.showOptionListInner);
    144.     }, 1000);
    145.   },
    146.   methods: {
    147.     runAnimation() {
    148.       // const ringDom = document.querySelectorAll(".innerRingOption");
    149.       let delayTime = this.delayTime || 500;
    150.       setTimeout(() => {
    151.         this.startRun = true;
    152.       }, delayTime);
    153.     },
    154.     close(e, n) {
    155.       console.log("++++++", e);
    156.       if (n) {
    157.         this.hasClickOutOption = n;
    158.       }
    159.       if (e < 4) {
    160.         this.$bus.emit("busGetNodes", e);
    161.         this.$emit("closeMenu", true);
    162.         // } else if (e == 4 && this.nodeType == "person") {
    163.       } else if (e == 4) {
    164.         console.log("21:", this.startOut);
    165.         clearTimeout(this.optionTimeOut);
    166.         if (this.startOut == 0 || this.startOut == 2) {
    167.           this.getExtraLabel(); //获取外圈数据
    168.         } else if (this.startOut == 1) {
    169.           this.startOut = 2; //关闭外圈
    170.           this.showOptionListOut = false; //隐藏外圈字
    171.         }
    172.         console.log("22:", this.startOut);
    173.       }
    174.     },
    175.     getExtraList(e) {
    176.       this.startOut = 0; //关闭外圈
    177.       this.showOptionListOut = false; //隐藏外圈字
    178.       this.$emit("closeMenu", true);
    179.       this.$bus.emit("busGetExtraNodes", e);
    180.       console.log("----", e);
    181.     },
    182.     cl(e, d) {
    183.       // 测试
    184.       // 通过判断点击的位置和各区块的位置界限判断点击事件
    185.       // 或者 点击字 执行操作，点击圆环其它地方，关闭圆环
    186.       console.log("----", e, d);
    187.     },
    188.     getExtraLabel() {
    189.       // getExtra(this.nodeType).then(res => {
    190.       //   this.outOptionData = res;
    191.       //   console.log(res, this.outOptionData);
    192.       //   if (this.outOptionData.length > 0) {
    193.       //     this.startOut = 1; //展开外圈
    194.       //     this.optionTimeOut = setTimeout(() => {
    195.       //       this.showOptionListOut = true; //显示外圈字
    196.       //     }, 1000);
    197.       //   }
    198.       // });
    199.     },
    200.   },
    201.   destroyed() {
    202.     clearTimeout(this.optionTime);
    203.   },
    204. };
    205. script>
    206.  
    207. <style lang="less" scoped>
    208. @bordercolor: rgba(69, 77, 116);
    209.  
    210. @keyframes rorateOption {
    211.   0% {
    212.     opacity: 0;
    213.   }
    214.  
    215.   100% {
    216.     opacity: 1;
    217.   }
    218. }
    219.  
    220. @keyframes rorateOption1 {
    221.   0% {
    222.     transform: rotate(-90deg);
    223.     opacity: 0;
    224.   }
    225.  
    226.   100% {
    227.     transform: rotate(0deg);
    228.     opacity: 1;
    229.   }
    230. }
    231.  
    232. @keyframes rorateOption2 {
    233.   0% {
    234.     transform: rotate(-180deg);
    235.     opacity: 0;
    236.   }
    237.  
    238.   100% {
    239.     transform: rotate(0deg);
    240.     opacity: 1;
    241.   }
    242. }
    243.  
    244. @keyframes rorateOption3 {
    245.   0% {
    246.     transform: rotate(-270deg);
    247.     opacity: 0;
    248.   }
    249.  
    250.   100% {
    251.     transform: rotate(0deg);
    252.     opacity: 1;
    253.   }
    254. }
    255.  
    256. .custom-menu {
    257.   width: 164px;
    258.   height: 164px;
    259.   position: absolute;
    260.   // 内圈
    261.   .innerWrapper {
    262.     width: 82px;
    263.     height: 82px;
    264.     position: absolute;
    265.     // overflow: hidden;
    266.  
    267.     .innerRingOption {
    268.       //82px为圆环
    269.       // width: 82px;
    270.       // height: 82px;
    271.       width: 164px;
    272.       height: 164px;
    273.       //   border: 20px solid #45b7ff;
    274.       border-style: solid;
    275.       border-width: 41px;
    276.       border-color: transparent;
    277.       border-radius: 50%;
    278.       position: absolute;
    279.       opacity: 0;
    280.       transition-duration: 0.3s;
    281.       //   &:hover {
    282.       //     border-width: 50px;
    283.       //   }
    284.     }
    285.  
    286.     .left-top-ring {
    287.       border-top-color: @bordercolor;
    288.  
    289.       .option-item {
    290.         left: 27px;
    291.         top: -27px;
    292.       }
    293.     }
    294.     .right-top-ring {
    295.       border-right-color: @bordercolor;
    296.       transform: rotate(-90deg);
    297.       right: 0;
    298.  
    299.       .option-item {
    300.         left: 93px;
    301.         top: 22px;
    302.       }
    303.     }
    304.  
    305.     .right-bottom-ring {
    306.       border-bottom-color: @bordercolor;
    307.       transform: rotate(-180deg);
    308.       right: 0;
    309.       bottom: 0;
    310.  
    311.       .option-item {
    312.         left: 27px;
    313.         top: 90px;
    314.       }
    315.     }
    316.  
    317.     .left-bottom-ring {
    318.       border-left-color: @bordercolor;
    319.       transform: rotate(-270deg);
    320.       bottom: 0;
    321.  
    322.       .option-item {
    323.         left: -32px;
    324.         top: 21px;
    325.         width: 30px;
    326.       }
    327.     }
    328.  
    329.     .option-item {
    330.       position: absolute;
    331.       color: #fff;
    332.       cursor: pointer;
    333.     }
    334.  
    335.     // .option-item:hover {
    336.     //   // color: @bordercolor;
    337.     //   color: #45b7ff;
    338.     //   font-weight: bold;
    339.     //   // font-size: 18px;
    340.     // }
    341.  
    342.     .start-animation1 {
    343.       animation-name: rorateOption;
    344.       animation-duration: 0.3s;
    345.       animation-fill-mode: forwards;
    346.     }
    347.  
    348.     .start-animation2 {
    349.       animation-name: rorateOption1;
    350.       animation-duration: 0.3s;
    351.       animation-fill-mode: forwards;
    352.     }
    353.  
    354.     .start-animation3 {
    355.       animation-name: rorateOption2;
    356.       animation-duration: 0.3s;
    357.       animation-fill-mode: forwards;
    358.     }
    359.  
    360.     .start-animation4 {
    361.       animation-name: rorateOption3;
    362.       animation-duration: 0.3s;
    363.       animation-fill-mode: forwards;
    364.     }
    365.   }
    366.   .left-top {
    367.     left: 0;
    368.     top: 0;
    369.   }
    370.  
    371.   .right-top {
    372.     // left: 82px;
    373.     right: 0;
    374.     top: 0;
    375.   }
    376.  
    377.   .right-bottom {
    378.     // left: 82px;
    379.     // top: 82px;
    380.     right: 0;
    381.     bottom: 0;
    382.   }
    383.  
    384.   .left-bottom {
    385.     left: 0;
    386.     bottom: 0;
    387.     // top: 82px;
    388.   }
    389.  
    390.   .inner-option-list {
    391.     position: relative;
    392.     width: 164px;
    393.     height: 164px;
    394.  
    395.     .option-item {
    396.       position: absolute;
    397.       cursor: pointer;
    398.       color: #fff;
    399.       // font-size: 14px;
    400.       &:first-child {
    401.         left: 68px;
    402.         top: 14px;
    403.       }
    404.  
    405.       &:nth-child(2) {
    406.         left: 129px;
    407.         top: 63px;
    408.         width: 22px;
    409.       }
    410.  
    411.       &:nth-child(3) {
    412.         left: 68px;
    413.         top: 131px;
    414.       }
    415.  
    416.       &:nth-child(4) {
    417.         left: 9px;
    418.         top: 62px;
    419.         width: 30px;
    420.       }
    421.     }
    422.  
    423.     .option-item:hover {
    424.       color: #6b05e8;
    425.       // font-weight: bold;
    426.       // font-size: 18px;
    427.     }
    428.  
    429.     .ashFont {
    430.       color: #969ecf;
    431.     }
    432.   }
    433.  
    434.   // 打开
    435.   @keyframes optionOutStart1 {
    436.     0% {
    437.       // transform: rotate(0deg) skewX(18deg);
    438.       opacity: 0;
    439.     }
    440.  
    441.     100% {
    442.       // transform: rotate(72deg) skewX(20deg);
    443.       opacity: 1;
    444.     }
    445.   }
    446.  
    447.   @keyframes optionOutStart2 {
    448.     0% {
    449.       transform: rotate(0deg) skewX(20deg);
    450.       opacity: 0;
    451.     }
    452.  
    453.     100% {
    454.       transform: rotate(72deg) skewX(20deg);
    455.       opacity: 1;
    456.     }
    457.   }
    458.  
    459.   @keyframes optionOutStart3 {
    460.     0% {
    461.       transform: rotate(0deg) skewX(20deg);
    462.       opacity: 0;
    463.     }
    464.  
    465.     100% {
    466.       transform: rotate(144deg) skewX(20deg);
    467.       opacity: 1;
    468.     }
    469.   }
    470.  
    471.   @keyframes optionOutStart4 {
    472.     0% {
    473.       transform: rotate(0deg) skewX(20deg);
    474.       opacity: 0;
    475.     }
    476.  
    477.     100% {
    478.       transform: rotate(216deg) skewX(20deg);
    479.       opacity: 1;
    480.     }
    481.   }
    482.  
    483.   @keyframes optionOutStart5 {
    484.     0% {
    485.       transform: rotate(0deg) skewX(20deg);
    486.       opacity: 0;
    487.     }
    488.  
    489.     100% {
    490.       transform: rotate(288deg) skewX(20deg);
    491.       opacity: 1;
    492.     }
    493.   }
    494.  
    495.   // 关闭
    496.   @keyframes optionOutClose1 {
    497.     0% {
    498.       // transform: rotate(0deg) skewX(20deg);
    499.       opacity: 1;
    500.     }
    501.  
    502.     100% {
    503.       // transform: rotate(0deg) skewX(20deg);
    504.       opacity: 0;
    505.     }
    506.   }
    507.  
    508.   @keyframes optionOutClose2 {
    509.     0% {
    510.       transform: rotate(72deg) skewX(20deg);
    511.       opacity: 1;
    512.     }
    513.  
    514.     100% {
    515.       transform: rotate(0deg) skewX(20deg);
    516.       opacity: 0;
    517.     }
    518.   }
    519.  
    520.   @keyframes optionOutClose3 {
    521.     0% {
    522.       transform: rotate(144deg) skewX(20deg);
    523.       opacity: 1;
    524.     }
    525.  
    526.     100% {
    527.       transform: rotate(0deg) skewX(20deg);
    528.       opacity: 0;
    529.     }
    530.   }
    531.  
    532.   @keyframes optionOutClose4 {
    533.     0% {
    534.       transform: rotate(216deg) skewX(20deg);
    535.       opacity: 1;
    536.     }
    537.  
    538.     100% {
    539.       transform: rotate(0deg) skewX(20deg);
    540.       opacity: 0;
    541.     }
    542.   }
    543.  
    544.   @keyframes optionOutClose5 {
    545.     0% {
    546.       transform: rotate(288deg) skewX(20deg);
    547.       opacity: 1;
    548.     }
    549.  
    550.     100% {
    551.       transform: rotate(0deg) skewX(20deg);
    552.       opacity: 0;
    553.     }
    554.   }
    555.  
    556.   // 外圈
    557.   .outWrapper {
    558.     width: 246px;
    559.     height: 246px;
    560.     position: absolute;
    561.     left: -41px;
    562.     top: -41px;
    563.     overflow: hidden;
    564.     border-radius: 50%;
    565.     .outRingOption {
    566.       width: 246px;
    567.       height: 246px;
    568.       position: absolute;
    569.       transition-duration: 1s;
    570.       // border: 1px solid #fff;
    571.       overflow: hidden;
    572.       transform: rotate(0deg) skewX(20deg);
    573.       transform-origin: 246px 246px;
    574.       top: -123px;
    575.       left: -123px;
    576.       opacity: 0;
    577.       // pointer-events: auto;
    578.       animation-duration: 1s;
    579.       animation-fill-mode: forwards;
    580.     }
    581.     .out-option-bg {
    582.       width: 246px;
    583.       height: 246px;
    584.       position: absolute;
    585.       border: 41px solid;
    586.       border-radius: 50%;
    587.       // border-color: #464e75a3;
    588.       border-color: #454d74;
    589.       right: -123px;
    590.       bottom: -123px;
    591.       transform: skewX(-18deg);
    592.       // pointer-events: auto;
    593.     }
    594.  
    595.     // .out-option-bg:hover {
    596.     //   border-color: #ff0000;
    597.     // }
    598.  
    599.     // 打开
    600.     .start-out1 {
    601.       animation-name: optionOutStart1;
    602.     }
    603.  
    604.     .start-out2 {
    605.       animation-name: optionOutStart2;
    606.     }
    607.     .start-out3 {
    608.       animation-name: optionOutStart3;
    609.     }
    610.     .start-out4 {
    611.       animation-name: optionOutStart4;
    612.     }
    613.     .start-out5 {
    614.       animation-name: optionOutStart5;
    615.     }
    616.  
    617.     // 关闭
    618.     .end-out1 {
    619.       animation-name: optionOutClose1;
    620.     }
    621.  
    622.     .end-out2 {
    623.       animation-name: optionOutClose2;
    624.     }
    625.  
    626.     .end-out3 {
    627.       animation-name: optionOutClose3;
    628.     }
    629.  
    630.     .end-out4 {
    631.       animation-name: optionOutClose4;
    632.     }
    633.  
    634.     .end-out5 {
    635.       animation-name: optionOutClose5;
    636.     }
    637.   }
    638.  
    639.   .out-option-list {
    640.     position: absolute;
    641.     width: 246px;
    642.     height: 246px;
    643.     left: -41px;
    644.     top: -41px;
    645.     // pointer-events: none;
    646.     .option-item {
    647.       position: absolute;
    648.       cursor: pointer;
    649.       color: #fff;
    650.       // pointer-events: none;
    651.       &:first-child {
    652.         left: 25px;
    653.         top: 56px;
    654.         transform: rotate(-56deg);
    655.       }
    656.  
    657.       &:nth-child(2) {
    658.         left: 138px;
    659.         top: 18px;
    660.         /* width: 22px; */
    661.         transform: rotate(20deg);
    662.       }
    663.  
    664.       &:nth-child(3) {
    665.         left: 212px;
    666.         top: 94px;
    667.         width: 22px;
    668.       }
    669.       &:nth-child(4) {
    670.         left: 138px;
    671.         top: 212px;
    672.         /* width: 30px; */
    673.         transform: rotate(-14deg);
    674.       }
    675.  
    676.       &:nth-child(5) {
    677.         left: 24px;
    678.         top: 177px;
    679.         /* width: 30px; */
    680.         transform: rotate(50deg);
    681.       }
    682.     }
    683.  
    684.     .option-item:hover {
    685.       color: #6b05e8;
    686.       // font-weight: bold;
    687.       // font-size: 18px;
    688.     }
    689.   }
    690. }
    691. style>

    效果如下

    存在问题

    1. dom元素展开的菜单会遮盖节点

    2. 遮盖超过实际展示的部分

    解决：用canvas绘画菜单（解决2），在initRedraw、beforeDrawing、afterDrawing触发事件中执行绘画

    一、visjs的安装及简单使用

    二、 配置项

    三、 公共API

    四、 事件监听

    五、自定义右键菜单

  • 相关阅读:
    RabbitMQ入门教程（安装，管理插件，Publisher/Consumer/交换机/路由/队列/绑定关系，及如何保证100%投递等）
    kubernetes node 节点管理
    FreeSWITCH 与 Asterisk(译)
    【微机原理笔记】第 7 章 - 常用数字接口电路
    ajax请求的时候get 和post方式的区别？
    android获取进程内存使用信息、一键加速（内存清理）与进程重要级别解析
    外边距合并出现bug的两种情况
    服务器SMP、NUMA、MPP体系学习笔记。
    URLSearchParams快速解析URL查询参数
    网络安全和隐私保护技术
  • 原文地址：https://blog.csdn.net/YouZi_X/article/details/126910157