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

树形组件介绍

vue-tree-chart是基于Vue实现的树形组件，其可以用于呈现大量的数据，并支持鼠标右键事件。该组件支持多级嵌套的树形结构，可以轻松地呈现层级数据，拥有流畅的展开和折叠操作，同时支持自定义节点的样式、连接线等。下面将介绍如何实现该组件。

实现步骤

1. 首先在Vue项目中安装vue-tree-chart组件：

npm install vue-tree-chart --save

1. 导入并注册vue-tree-chart组件

Vue应用需要导入并注册vue-tree-chart组件，并在template中使用。

<template>
  <div>
    <vue-tree-chart :data="data" @node-contextmenu="handleContextmenu"></vue-tree-chart>
  </div>
</template>

<script>
import VueTreeChart from 'vue-tree-chart';

export default {
  components: {
    VueTreeChart
  },
  data() {
    return {
      data: [
        {
          id: 1,
          label: '节点1',
          children: [
            {
              id: 2,
              label: '节点2'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleContextmenu(node, e) {
      console.log('右键点击了节点：', node.id);
      console.log('右键点击的事件：', e);
    }
  }
}
</script>

以上代码中，我们首先导入并注册了vue-tree-chart组件，然后在template中使用该组件。通过设置:data属性来传递树形数据源，同时我们监听了@node-contextmenu事件，该事件当用户右键点击节点时会被调用，并会回传当前点击的节点和鼠标事件。

1. 自定义节点template

vue-tree-chart组件中的每一个节点都可以通过节点模版来自定义呈现内容，该模版需要放置在Vue应用中。下面是一个自定义节点模版示例。

<template>
  <div class="node">
    {{ node.label }}
  </div>
</template>

<style scoped>
.node {
  padding: 5px;
  border-radius: 5px;
  background-color: #eee;
}
</style>

以上代码中，我们通过自定义节点模版来呈现节点的label，自定义呈现样式，可以根据实际需求自定义更多的节点模版。

1. 自定义节点连接线样式

vue-tree-chart组件中的每一个节点之间的连接线都可以通过CSS样式来进行自定义，下面是一个自定义节点连接线样式的示例。

<template>
  <div>
    <vue-tree-chart :data="data" >
      <template v-slot:default="{ node, parent }">
        <div class="node">
          {{ node.label }}
        </div>
        <div class="line" :style="{height: getHeight(node, parent) + 'px', top: getTop(node, parent) + 'px'}"></div>
      </template>
    </vue-tree-chart>
  </div>
</template>

<script>
import VueTreeChart from 'vue-tree-chart';

export default {
  components: {
    VueTreeChart
  },
  data() {
    return {
      data: [
        {
          id: 1,
          label: '节点1',
          children: [
            {
              id: 2,
              label: '节点2'
            }
          ]
        }
      ]
    }
  },
  methods: {
    getHeight(node, parent) {
      return Math.abs(node.id - parent.id) * 40 - 10;
    },
    getTop(node, parent) {
      if (node.id > parent.id) {
        return -10;
      }
      return Math.abs(node.id - parent.id) * 40 - 10;
    }
  }
}
</script>

<style scoped>
.line {
  width: 1px;
  background-color: #999;
  display: inline-block;
  position: absolute;
  left: -0.5px;
}
.node {
  padding: 5px;
  border-radius: 5px;
  background-color: #eee;
}
</style>

以上代码中，我们通过使用具名插槽（v-slot）为节点模板传入两个参数：node和parent。使用这两个参数可以计算出每一个节点之间的高度和上边距，从而自定义每一个节点之间的连线。

1. 添加鼠标右击事件

vue-tree-chart组件支持用户自定义鼠标右击事件，我们可以根据这个事件来为节点绑定自定义操作。下面是一个绑定右键点击事件的示例。

<template>
  <div>
    <vue-tree-chart :data="data" @node-contextmenu="handleContextmenu">
      <template v-slot:default="{ node, parent }">
        <div class="node" @contextmenu.prevent="handleNodeContextmenu(node, parent)">
          {{ node.label }}
        </div>
        <div class="line" :style="{height: getHeight(node, parent) + 'px', top: getTop(node, parent) + 'px'}"></div>
      </template>
    </vue-tree-chart>
  </div>
</template>

<script>
import VueTreeChart from 'vue-tree-chart';

export default {
  components: {
    VueTreeChart
  },
  data() {
    return {
      data: [
        {
          id: 1,
          label: '节点1',
          children: [
            {
              id: 2,
              label: '节点2'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleContextmenu(node, e) {
      console.log('右键点击了节点：', node.id);
      console.log('右键点击的事件：', e);
    },
    handleNodeContextmenu(node, parent) {
      console.log('右键点击了节点：', node.id);
      console.log('父节点：', parent);
    },
    getHeight(node, parent) {
      return Math.abs(node.id - parent.id) * 40 - 10;
    },
    getTop(node, parent) {
      if (node.id > parent.id) {
        return -10;
      }
      return Math.abs(node.id - parent.id) * 40 - 10;
    }
  }
}
</script>

<style scoped>
.line {
  width: 1px;
  background-color: #999;
  display: inline-block;
  position: absolute;
  left: -0.5px;
}
.node {
  padding: 5px;
  border-radius: 5px;
  background-color: #eee;
}
</style>

以上代码中，我们在节点元素上绑定了@contextmenu.prevent事件来阻止默认右键菜单的出现，然后通过调用handleNodeContextmenu方法来处理鼠标右键点击事件。

示例说明

1. 示例一：树形数据源

我们可以通过以下数据源来渲染vue-tree-chart组件：

data: [
  {
    id: 1,
    label: "节点1",
    children: [
      {
        id: 2,
        label: "节点2",
        children: [
          {
            id: 3,
            label: "节点3"
          }
        ]
      }
    ]
  }
]

1. 示例二：自定义节点样式和连接线样式

我们可以使用下面的代码来实现自定义节点样式和连接线样式：

<template>
  <vue-tree-chart :data="data">
    <template v-slot:default="{node, parent}">
      <div class="node">
        {{node.label}}
      </div>
      <div class="line"></div>
    </template>
  </vue-tree-chart>
</template>

<script>
import VueTreeChart from 'vue-tree-chart';

export default {
  components: {
    VueTreeChart
  },
  data() {
    return {
      data: [
        {
          id: 1,
          label: '节点1',
          children: [
            {
              id: 2,
              label: '节点2'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style scoped>
.line {
  width: 1px;
  background-color: #999;
  display: inline-block;
  position: absolute;
  left: -0.5px;
}
.node {
  padding: 5px;
  border-radius: 5px;
  background-color: #eee;
}
</style>

通过该示例，我们可以学习到如何自定义节点和连接线样式。