vue-tree-chart树形组件的实现(含鼠标右击事件)

基于 vue-tree-chart，生成项目效果预览，包含鼠标右击事件；

er-radius: 0;border-color:transparent #ccc transparent transparent;transform: translate3d(1px,0,0)}.node{position: relative; display: inline-block;margin: 0 1em;box-sizing: border-box; text-align: center;}.node:hover{color: #2d8cf0;cursor: pointer;}.node .person{position: relative; display: inline-block;z-index: 2;width:6em; overflow: hidden;}.node .person .avat{display: block;width:4em;height: 4em;margin:auto;overflow:hidden; background:#fff;border:1px solid #ccc;box-sizing: border-box;}.node .person .avat:hover{ border: 1px solid #2d8cf0;}.node .person .avat img{width:100%;height: 100%;}.node .person .name{height:2em;line-height: 2em;overflow: hidden;width:100%;}.node.hasMate::after{content: "";position: absolute;left:2em;right:2em;top:2em;border-top:2px solid #ccc;z-index: 1;}.node .paeson_name{transform: rotate(90deg);position: absolute; top: 68px;right: 39px;width: 88px;text-align: center;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}.landscape{transform:translate(-100%,0) rotate(-90deg);transform-origin: 100% 0;}.landscape .node{text-align: left;height: 8em;width:8em;right: 18px;}.landscape .person{position: absolute; transform: rotate(90deg);height: 4em;top:4em;left: 2.5em;}.landscape .person .avat{position: absolute;left: 0;border-radius: 2em;border-width:2px;}.landscape .person .name{height: 4em; line-height: 4em;}.landscape .hasMate{position: relative;}.landscape .hasMate .person{position: absolute; }.landscape .hasMate .person:first-child{left:auto; right:-4em;}.landscape .hasMate .person:last-child{left: -4em;margin-left:0;}</style>

新建一个组件，调用组件并增加鼠标右击事件：

<template>  <div id="app">    <TreeChart :json="data" :class="{landscape: 1}" @click-node="clickNode" />    <div class="gl_prs_ctn" :style='[contextstyle]'>          <ul class='gl_prs_li'>              <li >添加</li>              <li >详情</li>              <li >编辑</li>              <li >删除</li>          </ul>    </div>    </div></template><script>import TreeChart from "./treechar";export default {  name: 'app',  components: {    TreeChart  },  data() {    return {      data: {        name: 'root',        image_url: "https://www.easck.com/d/file/p/2022/04-17/20220417063144102409.jpg",        class: ["rootNode"],        children: [          {            name: 'children1',            image_url: "https://www.easck.com/d/file/p/2022/04-17/20220417063144102409.jpg"          },          {            name: 'children2',            image_url: "https://www.easck.com/d/file/p/2022/04-17/20220417063144102409.jpg",            children: [              {                name: 'grandchild',                image_url: "https://www.easck.com/d/file/p/2022/04-17/20220417063144102409.jpg"              },              {                name: 'grandchild2',                image_url: "https://www.easck.com/d/file/p/2022/04-17/20220417063144102409.jpg"              },              {                name: 'grandchild3',                image_url: "https://www.easck.com/d/file/p/2022/04-17/20220417063144102409.jpg"              }            ]          }        ]      },      contextstyle: {          display: 'none',          right: '0px',          top: '0px',          left: '0px',          bottom: '0px',      },     }  },  created(){      document.oncontextmenu = ()=>{return false}      document.addEventListener("click", (event) => {            if(this.contextstyle.display == 'block'){                this.contextstyle.display = 'none'            }      })  },  methczFUbLoFods: {      clickNode(node){        if(window.event.x + 188 > document.documentElement.clientWidth){            this.contextstyle.left = 'unset';            this.contextstyle.right = document.documentElement.clientWidth - window.event.x + 'px';        }else{            this.contextstyle.left = window.event.x + 'px';        }        if(window.event.y + 166 > document.documentElement.clientHeight){            this.contextstyle.top = 'unset';            this.contextstyle.bottom = document.documentElement.clientHeight - window.event.y + 'px';        }else{            this.contextstyle.top = window.event.y + 'px';        }                               this.contextstyle.display = 'block';      },  }}</script><style>#app {  font-family: 'Avenir', Helvetica, Arial, sans-serif;  -webkit-font-smooczFUbLoFthing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}.gl_prs_ctn{            width: 188px;            background: rgb(255, 255, 255);            box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 1px inset, rgba(102, 175, 233, 0.6) 0px 0px 8px;            z-index: 99999;            position: fixed;            padding: 10px;            box-sizing: content-box;            height: 142px;}.gl_prs_li{padding: unset;margin: unset;}.gl_prs_li>li{    cursor: pointer;       list-style: none;    border-bottom: 1px solid #efefef;    padding: 7px 10px;}li:last-child { border: unset }li:hover{      background: #ccc;      color: #fff;}</style>