vue-dft-vision

Appearance

On this page

note-tree ​

审阅树组件: 场景信息为根节点, 次级节点为模型节点, 叶子节点为模型节点对应的审阅信息。

审阅树组件必须要配合 modelView 组件进行使用。

注册组件 ​

javascript
import { DftNoteTree } from "vue3-dft-vision";
const app = createApp(App);
app.use(DftNoteTree);
javascript
import { DftNoteTree } from "vue2-dft-vision";
Vue.component("DftNoteTree", DftNoteTree);

使用方式 ​

vue
<template>
  <div style="width: 100vw; height: 100vh; display: flex">
    <dft-model-view
      :sceneConstructor="DFTCore.Scene"
      :scene-options="sceneOptions"
    ></dft-model-view>
    <div style="width: 200px">
      <dft-note-tree></dft-note-tree>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import DFTCore from "dft-vision-core-es6.min.js";
const sceneOptions = reactive({
  // 数据源，默认 DFTCore.OFFLINE
  dataType: DFTCore.OFFLINE,
  // 文件路径
  url: "/pdv/1004",
});
</script>
vue
<template>
  <div style="width: 100vw; height: 100vh; display: flex">
    <dft-model-view
      :sceneConstructor="DFTCore.Scene"
      :scene-options="sceneOptions"
    ></dft-model-view>
    <div style="width: 200px">
      <dft-note-tree></dft-note-tree>
    </div>
  </div>
</template>
<script>
import DFTCore from "dft-vision-core-es6.min.js";
export default {
  data() {
    return {
      sceneOptions: {
        // 数据源，默认 DFTCore.OFFLINE
        dataType: DFTCore.OFFLINE,
        // 文件路径
        url: "/pdv/1004",
        // 资源文件夹地址
      },
      DFTCore,
    };
  },
};
</script>

props ​

属性说明类型默认值
symbol分组标识, 同组内组件产生联动交互, 默认所有组件在同一个组string ｜ symbol
groupByNode是否根据模型节点分类booleanfalse
searchable是否可搜索booleanfalse
importable是否显示导入按钮booleanfalse
importDisabled导出按钮是否禁用booleanfalse
exportable是否显示导出按钮booleanfalse
beforeDelete删除之前调用, 返回 false 阻止删除(keys: string[], { targetNotes }) => void | false
beforeImport导入之前调用, 返回 false 阻止导入(inputNotes: Note[]) => void | false

events ​

事件名说明类型
node-click节点点击(node) => void
node-mouseover节点 hover(node) => void
import导入审阅(addedNotes: Note[], { inputNotes, notes }) => void
delete删除审阅(keys: string[], { targetNotes }) => void