2024-11-27 树形图点击右键

<template>
  <div>组织管理 {{ store.$state.num }}</div>
  <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" v-model:checkedKeys="checkedKeys"
    checkable :tree-data="treeData" @rightClick="handleContextMenu">
    <template #title="{ title, key }">
      <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
      <template v-else>{{ title }}</template>
    </template>
  </a-tree>
  <teleport to="body">
    <div class="flex f-direction-column " :style="getStyle">
      <span>111</span>
      <span>222</span>
      <span>333</span>
      <span>444</span>
    </div>
  </teleport>

</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
import { useStore } from '@/store/index'
import type { TreeProps } from 'ant-design-vue';

const store = useStore()
const treeData: TreeProps['treeData'] = [
  {
    title: 'parent 1',
    key: '1',
    children: [
      {
        title: 'parent 1-0',
        key: '2',
        children: [
          { title: 'leaf', key: '3', },
          { title: 'leaf', key: '4' },
        ],
      },
      {
        title: 'parent 1-1',
        key: '5',
        children: [{ key: '6', title: 'sss' }],
      },
    ],
  },
];
const getStyle = ref({
  backgroundColor: 'red',
  width: '100px',
  position: 'absolute',
  top: -100,
  left: 0,
})
const expandedKeys = ref<string[]>(['1','2','5']);
const selectedKeys = ref<string[]>([]);
const checkedKeys = ref<string[]>([]);
const contextMenuPosition = ref<{ x: number; y: number }>({ x: 0, y: 0 });
const handleContextMenu = (event) => {
  console.log('event', event)
  const rect = event.event.target.getBoundingClientRect();
  console.log('rect', rect)
  getStyle.value.top = rect.top + rect.height - 40 + 'px'
  getStyle.value.left = rect.left + rect.width + 20 + 'px'
  console.log('getStyle', getStyle.value)
};

</script>
<style scoped lang="less"></style>