vue 引入qunee_在vue项目中怎么使用qunee拓扑图插件,怎么正确的使用 graphEditor ?求帮助...
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 ?求帮助...相关推荐
- 在vue项目中引用萤石云播放器插件
在vue项目中引用萤石云播放器插件 1. 萤石云官方开发文档: https://open.ys7.com/help/31 2. 登录官方网站:https://open.ys7.com/cn/s/ind ...
- ionic+vue+capacitor系列笔记--02项目中集成Capacitor,添加android,ios平台,真机运行项目
Capacitor是什么? Capacitor是由ionic团队开发的一款跨平台移动应用构建工具,可轻让我们轻松的构建Android.iOS.Electron和Web应用程序. Capacitor是A ...
- Android Studio 将项目转变成library(model)引入到另一个项目中使用
最近要将项目转换成library ,引入到另一项目中使用,所以记录引用的过程 1.修改配置 2.修改app文件夹里面的iml文件名称 在APP文件夹下,找到app.iml 文件,将文件名改为想要命名 ...
- 把Font Awesome引入到自己的项目中
问题 我之前使用的是通过cdn来引入Font Awesome,https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome/css/font-awesome ...
- Vue第二章,在项目中使用element-ui组件
使用vue的童鞋相信都知道vue中有很多ui组件,这里推荐使用element-ui组件(个人测试还算强大,起码开发商野心不小),因为此组件可以集成到angular.react.vue任意一个框架中. ...
- vue项目中使用富文本wangEditor插件 出现的 The given range isn‘t in document错误
背景 近期做的后台管理系统,需要有一个富文本编辑器来录入一些API文档的功能.调研时,用UEditor,去github直接下资源包,然后引入到项目中.然而由于项目是一个vue项目,UEditor的实现 ...
- vue 用户名重复验证_Vue项目中实现用户登录及token验证
在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1.第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2.后端收到请求,验证用户名和密码,验证成功,就给前端返回一个to ...
- vue光标插入内容_vue项目中在可编辑div光标位置插入内容的实现代码
vue项目中在可编辑div光标位置插入内容 html: @dragstart="dragstart($event, item.labelname)" draggable='true ...
- vuecli启动的服务器位置,在vue cli 3生成的项目中启动dev服务器
我在我的Windows系统上使用全局安装了vue cli 3 npm i -g @vue/cli. 然后我使用生成了一个项目 vue create vue-project 我通过提示选择了所需的插件. ...
- vue引入第三方html,vue.js如何引入第三方模块?
vue.js如何引入第三方模块?下面本篇文章给大家介绍一下Vue中正确引入第三方模块的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue.js如何引入第三方模块? 方法一: ...
最新文章
- python基础菜鸟教程-菜鸟教程学习python
- java网络编程(四)
- 沈阳招聘.NET(C#)高级软件工程师
- 腾讯成本优化黑科技:整机CPU利用率最高提升至90%
- P2487 [SDOI2011]拦截导弹(cdq分治/计数问题思想)
- php title 乱码,PHP发送UTF-8编码中文邮件标题乱码的解决
- java文件虚拟路径_java虚拟路径的总结
- 用unity3d切割图片
- linux 实现秒级定时任务
- 读书笔记|《金字塔原理》第二章
- oracle通过日期函数求年龄的大小
- Word公式自动编号
- 安卓实现播放器app
- 基于 Lotus Expeditor on Device 的手机银行交易开发
- Python 爬取新浪网新闻和存取CSV文件
- Generative Adversarial Nets[AAE]
- ubuntu计算机名用户名,修改ubuntu的用户名(注意用户名和主机名的区别)
- 管培生走下神坛,“高管捷径”破灭
- LeetCode-1694. 重新格式化电话号码【字符串,分块】
- (课堂作业)spring-boot集成shiro的步骤及代码解析
热门文章
- centOS之jre安装
- SQL Server分布式事务配置(MSDTC)(远程数据库更新)
- Java基础 - 易错知识点整理(待更新)
- java odbc timesten_TimesTen 使用ODBC连接数据库的程序问题
- 什么是机器学习(Machine Learning)? |李宏毅机器学习【1】
- c 语言鼠标钩子,鼠标钩子程序示例
- 基于Android的阳台浇花控制系统设计
- Sphinx制作htmlhelp手册文档(Manual-chm)
- 单片机上面的继电器工作原理及其作用
- windows下支持H265的rtmp ffplay播放器 ffmpeg的编译