var images = {

name: '自定义图元', images: [{

label: 'Node',

image: 'Q-node',

clientProperties: {

type: 'CustomNode'

}

}, {

type: 'Text',

label: 'Text',

html: '<span style="background-color: #2898E0; color:#FFF; padding: 3px 5px;">' + getI18NString('Text') + '</span>',

styles: {

'label.background.color': '#2898E0',

'label.color': '#FFF',

'label.padding': new Q.Insets(3, 5)

},

clientProperties: {

type: 'CustomNode2'

}

}, {

type: 'Group',

label: 'Group',

image: 'Q-group',

clientProperties: {

type: 'CustomNode3'

}

}, {

label: 'SubNetwork',

image: 'Q-subnetwork',

properties: {enableSubNetwork: true},

clientProperties: {

type: 'CustomNode4'

}

}]

};

$('#editor').graphEditor({

images: images, callback: function (editor) {

var toolbox = editor.toolbox;

toolbox.hideDefaultGroups();

var graph = editor.graph;

var propertySheet = editor.propertyPane;

propertySheet.showDefaultProperties = false;

propertySheet.getCustomPropertyDefinitions = function(data){

var type = data.get('type');

if (type == 'CustomNode') {

return {

group: '自定义属性',

properties: [

{client: 'a', displayName: 'AAA', groupName: 'A'},

{client: 'b', displayName: 'AA'},

{client: 'c', displayName: 'AAAA'},

{client: 'd', displayName: '自定义1', groupName: 'A'},

]

}

}

if (type == 'CustomNode2') {

return {

group: '自定义属性',

properties: [

{client: 'b', displayName: 'BBBBB'},

{client: 'c', displayName: '自定义3'},

]

}

}

if (type == 'CustomNode3') {

return {

group: '自定义属性',

properties: [

{client: 'b', displayName: 'CC'},

{client: 'c', displayName: '自定义3'},

]

}

}

}

// propertySheet.register({

// class: Q.Element,

// properties: [

// {client: ‘id’, displayName: ‘ID’},

// {style: ‘label.color’, displayName: ‘文本颜色’, type: ‘color’},

// ]

// })

// propertySheet.register({

// class: Q.Node,

// properties: [

// {client: ‘ip’, displayName: ‘IP’},

// {style: ‘label.background.color’, displayName: ‘背景颜色’, type: ‘color’},

// ],

// group: ‘自定义属性’

// })

graph.moveToCenter();

}

});

怎么在vue项目中引入qunee并且正确使用呢,,我引用的总是报错,,求帮助

vue 引入qunee_在vue项目中怎么使用qunee拓扑图插件,怎么正确的使用 graphEditor ?求帮助...相关推荐

  1. 在vue项目中引用萤石云播放器插件

    在vue项目中引用萤石云播放器插件 1. 萤石云官方开发文档: https://open.ys7.com/help/31 2. 登录官方网站:https://open.ys7.com/cn/s/ind ...

  2. ionic+vue+capacitor系列笔记--02项目中集成Capacitor,添加android,ios平台,真机运行项目

    Capacitor是什么? Capacitor是由ionic团队开发的一款跨平台移动应用构建工具,可轻让我们轻松的构建Android.iOS.Electron和Web应用程序. Capacitor是A ...

  3. Android Studio 将项目转变成library(model)引入到另一个项目中使用

    最近要将项目转换成library ,引入到另一项目中使用,所以记录引用的过程 1.修改配置 2.修改app文件夹里面的iml文件名称  在APP文件夹下,找到app.iml 文件,将文件名改为想要命名 ...

  4. 把Font Awesome引入到自己的项目中

    问题 我之前使用的是通过cdn来引入Font Awesome,https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome/css/font-awesome ...

  5. Vue第二章,在项目中使用element-ui组件

    使用vue的童鞋相信都知道vue中有很多ui组件,这里推荐使用element-ui组件(个人测试还算强大,起码开发商野心不小),因为此组件可以集成到angular.react.vue任意一个框架中. ...

  6. vue项目中使用富文本wangEditor插件 出现的 The given range isn‘t in document错误

    背景 近期做的后台管理系统,需要有一个富文本编辑器来录入一些API文档的功能.调研时,用UEditor,去github直接下资源包,然后引入到项目中.然而由于项目是一个vue项目,UEditor的实现 ...

  7. vue 用户名重复验证_Vue项目中实现用户登录及token验证

    在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1.第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2.后端收到请求,验证用户名和密码,验证成功,就给前端返回一个to ...

  8. vue光标插入内容_vue项目中在可编辑div光标位置插入内容的实现代码

    vue项目中在可编辑div光标位置插入内容 html: @dragstart="dragstart($event, item.labelname)" draggable='true ...

  9. vuecli启动的服务器位置,在vue cli 3生成的项目中启动dev服务器

    我在我的Windows系统上使用全局安装了vue cli 3 npm i -g @vue/cli. 然后我使用生成了一个项目 vue create vue-project 我通过提示选择了所需的插件. ...

  10. vue引入第三方html,vue.js如何引入第三方模块?

    vue.js如何引入第三方模块?下面本篇文章给大家介绍一下Vue中正确引入第三方模块的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue.js如何引入第三方模块? 方法一: ...

最新文章

  1. python基础菜鸟教程-菜鸟教程学习python
  2. java网络编程(四)
  3. 沈阳招聘.NET(C#)高级软件工程师
  4. 腾讯成本优化黑科技:整机CPU利用率最高提升至90%
  5. P2487 [SDOI2011]拦截导弹(cdq分治/计数问题思想)
  6. php title 乱码,PHP发送UTF-8编码中文邮件标题乱码的解决
  7. java文件虚拟路径_java虚拟路径的总结
  8. 用unity3d切割图片
  9. linux 实现秒级定时任务
  10. 读书笔记|《金字塔原理》第二章
  11. oracle通过日期函数求年龄的大小
  12. Word公式自动编号
  13. 安卓实现播放器app
  14. 基于 Lotus Expeditor on Device 的手机银行交易开发
  15. Python 爬取新浪网新闻和存取CSV文件
  16. Generative Adversarial Nets[AAE]
  17. ubuntu计算机名用户名,修改ubuntu的用户名(注意用户名和主机名的区别)
  18. 管培生走下神坛,“高管捷径”破灭
  19. LeetCode-1694. 重新格式化电话号码【字符串,分块】
  20. (课堂作业)spring-boot集成shiro的步骤及代码解析

热门文章

  1. centOS之jre安装
  2. SQL Server分布式事务配置(MSDTC)(远程数据库更新)
  3. Java基础 - 易错知识点整理(待更新)
  4. java odbc timesten_TimesTen 使用ODBC连接数据库的程序问题
  5. 什么是机器学习(Machine Learning)? |李宏毅机器学习【1】
  6. c 语言鼠标钩子,鼠标钩子程序示例
  7. 基于Android的阳台浇花控制系统设计
  8. Sphinx制作htmlhelp手册文档(Manual-chm)
  9. 单片机上面的继电器工作原理及其作用
  10. windows下支持H265的rtmp ffplay播放器 ffmpeg的编译