vue-dft-vision

Appearance

On this page

dft-model-tree 右键菜单 ​

自定义修改： ​

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

vue
<template>
  <dft-model-tree
    :get-context-menus="()=>[]"
  />
</template>
vue
<template>
  <dft-model-tree
    :get-context-menus="getContextMenus"
    @context-menu-select="handleContextMenuSelect"
  ></dft-model-tree>
</template>
<script setup>
/**
 * 获取右键菜单列表
 * @param defaultContextMenus 默认菜单列表
 * @param { node } 当前选中的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 当前选中的node
 */
function handleContextMenuSelect({ type, node }) {
  // 自定义处理
}
</script>
vue
<template>
  <dft-model-tree
    :get-context-menus="getContextMenus"
    @context-menu-select="handleContextMenuSelect"
  ></dft-model-tree>
</template>
<script>
export default {
  methods: {
    /**
     * 获取右键菜单列表
     * @param defaultContextMenus 默认菜单列表
     * @param { node } 当前选中的node
     */
    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 当前选中的node
     */
    handleContextMenuSelect({ type, node }) {
      // 自定义处理
    },
  },
};
</script>

使用内置事件 ​

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

value事件说明
dft-expand-all全部展开
dft-collapse-all全部收起
dft-cancel-transparent显示当前模型
dft-only-Show-Current仅显示当前模型
dft-reverse反选
focus-to模型居中