扩展菜单

  本示例介绍了扩展菜单的三种方式。

  本示例基于教程快速指南开发，请查看教程快速指南。

一、JSON扩展

  通过DDeiCoreTopMenuSimplePanel的configuration方法可以配置顶部菜单以及菜单项。

  DDeiCoreTopMenuSimplePanel内置了一组菜单，通过id加以区分，每个菜单都有特定的行为。

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor"; //导入DDei设计器
import DDeiFlow from "ddei-flow";//导入DFlow流程图插件
import {DDeiCoreTopMenuSimplePanel} from "ddei-editor"; //导入顶部菜单插件
const options = {
  //配置扩展插件
  extensions: [
    DDeiFlow, //引入DDeiFlow插件
    DDeiCoreTopMenuSimplePanel.configuration({ //配置顶部菜单及菜单项
      direct: 2,//方向，1纵向，2横向 
      position: 2,//位置1-9顺时针，1为左上角，9为中心
      drag: 1,//是否允许拖拽
      items: [//菜单项配置
        {
          id: "ddei-core-save", //内置ID，保存
          name: "Save"  //显示文本-纯文本
        },
        {
          id: "ddei-core-open", //内置ID，打开
          name: "ddei.open" //显示文本-i18n
        },
        {
          id: "ddei-core-download", //内置ID，下载
          name: "ddei.download" 
        },
        {
          id: "ddei-core-new",  //内置ID，新建
          name: "ddei.new" 
        }
      ]
    })
  ]
}
</script>

<template>
  <DDeiEditorView :options="options" id="dflow_editor_1"></DDeiEditorView>
</template>

实时效果

二、Action扩展

  通过action属性，可以自定义菜单项点击后的行为。

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor"; //导入DDei设计器
import DDeiFlow from "ddei-flow";//导入DFlow流程图插件
import {DDeiCoreTopMenuSimplePanel} from "ddei-editor"; //导入顶部菜单插件
const options = {
  //配置扩展插件
  extensions: [
    DDeiFlow, //引入DDeiFlow插件
    DDeiCoreTopMenuSimplePanel.configuration({ //配置顶部菜单及菜单项
      direct: 2,//方向，1纵向，2横向 
      position: 2,//位置1-9顺时针，1为左上角，9为中心
      drag: 1,//是否允许拖拽
      items: [//菜单项配置
        {
          id: "ddei-core-save", //内置ID，保存
          name: "Save"  //显示文本-纯文本
        },
        {
          id: "ddei-core-open", //内置ID，打开
          name: "ddei.open" //显示文本-i18n
        },
        {
          name: "自定义",  //显示文本 
          action: function (editor) { //菜单按下后的动作
            //获取流程API
            let flowAPI = editor.flow
            //获取json字符串
            let flowObj = flowAPI.toFlowObject()
            console.log(flowObj)
          }
        }
      ]
    })
  ]
}
</script>

<template>
  <DDeiEditorView :options="options" id="dflow_editor_1"></DDeiEditorView>
</template>

实时效果

三、Vue组件扩展

  通过viewer属性，可以自定义菜单项的样式与行为。viewer值为一个vue组件。

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor"; //导入DDei设计器
import DDeiFlow from "ddei-flow";//导入DFlow流程图插件
import {DDeiCoreTopMenuSimplePanel} from "ddei-editor"; //导入顶部菜单插件
import menudemo from "./menudemo.vue" //导入自定义菜单组件
const options = {
  //配置扩展插件
  extensions: [
    DDeiFlow, //引入DDeiFlow插件
    DDeiCoreTopMenuSimplePanel.configuration({ //配置顶部菜单及菜单项
      direct: 2,//方向，1纵向，2横向 
      position: 2,//位置1-9顺时针，1为左上角，9为中心
      drag: 1,//是否允许拖拽
      items: [//菜单项配置
        {
          id: "ddei-core-save", //内置ID，保存
          name: "Save"  //显示文本-纯文本
        },
        {
          id: "ddei-core-open", //内置ID，打开
          name: "ddei.open" //显示文本-i18n
        },
        { //自定义组件
          viewer:menudemo
        }
      ]
    })
  ]
}
</script>

<template>
  <DDeiEditorView :options="options" id="dflow_editor_1"></DDeiEditorView>
</template>

menudemo.vue

<script lang="ts">
export default {
  name: "ddei-flow-topmenu-demo",
  props: {
    //外部传入的插件扩展参数
    options: {
      type: Object,
      default: null
    },
    editor: {
      type: Object,
      default: null
    },
    model: {
      type: Object,
      default: null
    }
  },
  methods: {
    test(){
      let flowAPI = this.editor.flow
      console.log(flowAPI.toFlowObject())
    }
  }
};
</script>

<template>
    <div style="color:red" @click="test">
      自定义
    </div>
</template>

实时效果

技术支持

QQ:3697355039

微信公众号:ddei757