vue-dft-vision

Appearance

On this page

dft-note-tree 右键菜单 ​

自定义修改： ​

返回值设置为[]可以隐藏右键菜单 ​

vue
<template>
  <dft-note-tree
    :get-context-menus="()=>[]"
  />
</template>
vue
<template>
  <dft-note-tree
    :get-context-menus="getContextMenus"
    @context-menu-select="handleContextMenuSelect"
  ></dft-note-tree>
</template>
<script setup>
/**
 * 获取右键菜单列表
 * @param defaultContextMenus 默认菜单列表
 * @param node 节点
 */
function getContextMenus(defaultContextMenus,{node}) {
   // 这里可以对默认菜单列表进行修改
  // 例如根据node的类型来添加不同的菜单项
  return [
    ...defaultContextMenus
    { label: "默认菜单1", value: "default-1" },
    { label: "默认菜单2", value: "default-2" },
    { label: "默认菜单3", value: "default-3" },
  ];
}

/**
 * 处理选中右键菜单
 * @param type 菜单value值
 * @param node 选中的note节点
 */
function handleContextMenuSelect({type,node}) {
  // 自定义处理
}
</script>
vue
<template>
  <dft-note-tree
    :get-context-menus="getContextMenus"
    @context-menu-select="handleContextMenuSelect"
  ></dft-note-tree>
</template>
<script>
import DFTCore from "../public/lib/dft-vision-core-es6.min.js";
export default {
  methods: {
    /**
    * 获取右键菜单列表
    * @param node 节点
    * @param defaultContextMenus 默认菜单列表
    */
    getContextMenus(defaultContextMenus,{node}) {
    // 这里可以对默认菜单列表进行修改
    // 例如根据node的类型来添加不同的菜单项
      return [
        ...defaultContextMenus
        { label: "默认菜单1", value: "default-1" },
        { label: "默认菜单2", value: "default-2" },
        { label: "默认菜单3", value: "default-3" },
      ];
    },
    /**
    * 处理选中右键菜单
    * @param type 菜单value值
    * @param node 选中的note节点
    */
    handleContextMenuSelect(type, node) {
      // 自定义处理
    },
  },
};
</script>

使用内置事件 ​

组件库内置了几种默认菜单项，当遇到内置菜单项的 value 时会自动处理，具体如下表格

value事件说明
dft-flat平铺展示
dft-group-by-node根据节点分类
dft-delete删除