vue3树形结构如何实现右击弹框显示

如图所示效果

 一、 树结构

  首先我们需要借助NaiveUI组件库中的 【 n-tree】 组件来实现属性结构的渲染

  示例代码如下：

<n-tree
    :show-irrelevant-nodes="false"  // 是否在搜索状态显示和搜索无关的节点
    :pattern="pattern"   //  默认搜索的内容
    :data="data"   // 树的节点数据
    block-line     //  节点整行撑开
    draggable        //  是否可拖拽
    key-field="lid"    // 替代 TreeOption 中的 key 字段名
    label-field="name"   // 替代 TreeOption 中的 label 字段名
    :selectable="false"   //  节点是否可以被选中
    @dragend="treeDrag"    //  不是最后一个子节点不能拖拽
    :node-props="treeProps"    //  节点的 HTML 属性，这里就是绑定的右击的数据
    :default-expanded-keys="treeDefaultExpanded"  // 树结构的绑定
/>

二、下拉菜单

 <n-dropdown
    placement="bottom-start"  // 设置下拉菜单出现的位置，这里是底部开始
    trigger="manual"  // 设置触发下拉菜单的方式，这里是手动触发。
    :x="x"            //  用来设置下拉菜单出现的具体位置的坐标
    :y="y"            //  用来设置下拉菜单出现的具体位置的坐标
    :show="showDropdown"          // 控制下拉菜单显示隐藏
    :options="dropdownOptions"    // 定义了下拉菜单中的选项
    :on-clickoutside="onClickoutside"  //  定义了当用户点击下拉菜单外部时的处理函数
    @select="handleSelect"  //  事件监听器，当用户从下拉菜单中选择一个选项时，会触发该函数
/>

三、涉及到的事件

1）初始化

type TableTreeItem = {
  prefix: string | (() => VNode);
  suffix: string | (() => VNode);
} & APIModelExploreOpenModel.OpenModelDataTreeItem;


const x = ref(0);


const y = ref(0);


const showDropdown = ref(false);


const dropdownOptions = shallowRef<DropdownOption[]>([
  {
    key: 'addNewData',
    label: '这里是右击下拉框的名字',
  },
  {
    key: 'addNewData1',
    label: '可以写多个',
  },
  {
    key: 'addNewData2',
    label: '写几个就展示几个框',
  },
]);

2）自定义事件【树结构中的事件，可以获取定位】

const treeProps = ({ option }: { option: TreeOption }) => {
  return {
        onContextmenu(e: MouseEvent) {
          dropdownOptions.value.forEach((it) => {
            it.tabId = option.llaytabid;
          });
          showDropdown.value = true;
          x.value = e.clientX;
          y.value = e.clientY;
          e.preventDefault();
        },
      }
};

 3）用户点击下拉菜单时的事件

const onClickoutside = () => {
  showDropdown.value = false;
};

4）传参给子组件时的事件

const checkTableAddNewDataInst = ref<InstanceType<typeof CheckTableAddNewData>>();

const handleSelect = (key: string, option: DropdownOption) => {
  showDropdown.value = false;
  switch (key) {
    case 'addNewData':
      checkTableAddNewDataInst.value!.show(option.tabId as number);
      break;
  }
};

5）子组件在父组件的位置，且通过ref进行传参

<demo ref="checkTableAddNewDataInst" />

以上步骤就可实现右击出现下拉框时间啦~~~

撒花✿✿ヽ(°▽°)ノ✿