README
七巧板专业版
安装
npm i 7qb -g
因为七巧板引用了 Vue.js, Vue Router, Ant Design of Vue, Monaco Editor 等 NPM 包,为了减少最终项目的代码大小,需要再目标项目编译的同时,进行混合编译。为此需要对 vue 编译配置进行如下调整。
// 将下方代码追加到 vue.config.js
module.exports = {
// 将 node_modules 中 七巧板 代码编译到本地项目
transpileDependencies: ["7qb/src"],
};
使用
在已有 Vue.js 项目中引用七巧板项目
// 引用七巧板内核
import { Qqb } from '7qb';
// 安装七巧板插件
Vue.use(Qqb);
// 关联七巧板项目
const qqb = new Qqb({
// 云端项目标识
// 注意:标识需要根据项目不同进行替换
id: "24875521-ec64-4ed3-8862-2f0a1ba02c70",
});
// 注意:
// 七巧板需要基于 vue-router 运行
// 启动 Vue 应用
const vm = new Vue({ /* ...已有Vue项目的路由与应用等参数... */ });
// 注入七巧板
qqb.setup(vm);
目录结构
src
├─actions // 自定义动作目录
│ ├─jdt-example // 自定义动作范例
│ │ index.js // 动作 Meta 声明
│ │ jdt-example.js // 动作逻辑脚本
│ │ jdt-example-props-component.vue // 动作设置界面
│ └─index.js // 自定义扩展动作引用列表
└─widgets // 自定义组件目录
├─jdt-example // 自定义组件范例
│ index.js // 组件 Meta 声明
│ jdt-example-component.vue // 组件实体代码
│ jdt-example-props-control-schema.js // 组件设置 Meta 声明
└─index.js // 自定义扩展组件引用列表
组件 Meta 声明
/**
* 组件配置
* src/widgets/jdt-example/index.js
*/
export default {
// 组件标识
id: "jdt-widget-example",
// 设计语言
framework: "eleme",
// 组件名称
name: "自定义组件",
// 组件图标
iconUrl: "//7qb.jd.com/assets/...",
// 组件分类
kind: "数据",
// 继承组件(可选项)
extends: [/* "父级组件 id" */],
// 组件特征描述(可选项)
schema({ $7qb }) {
return {
// 是否是动态容器(可选项)
container: false,
// 子集组件列表(可选项)
children: [],
// 扩展属性(可选项)
props: {
/* 依据组件需要,自定义属性 */
}
}
},
// 支持事件(可选项)
events({ $7qb, schema }) {
return {
ready: { title: "准备就绪" }
}
},
// 模拟数据(可选项)
mock({ $7qb, schema }) { return Mock.mock('@string') },
// 当插入时触发
insert({ $7qb, schema }) {}
// 当插入子节点时触发(可选项)
insertChild({ $7qb, schema, originalSchema, childSchema, originalChildSchema }) { },
// 当删除子节点时触发(可选项)
deleteChild({ $7qb, schema, childSchema }) { },
// 当拷贝时触发(可选项)
copy({ $7qb, newSchema, schema }) { },
// 创建页面包裹布局处理(可选项)
createLayoutBundleSchema({ projectSchema, contentSchema }) { }
// 在组件列表中隐藏(可选项)
hidden: false,
// 不建议使用(可选项)
deprecated: false,
// 当不建议使用组件进入编辑界面触发(可选项)
upgrade({ $7qb, schema }) { },
// 展业组件 VueComponent
component,
// 编辑器占位组件(可选项)
blockComponent,
// 组件设置 Meta 声明
propsControlSchema,
// 附加至子集组件的设置 Meta 声明(可选项)
childPropsControlSchema,
}
动作 Meta 声明
/**
* 动作配置
* src/actions/jdt-example/index.js
*/
export default {
// 动作标识
id: "jdt-action-example",
// 动作名称
name: "自定义动作",
// 动作说明
description: "自定义动作的功能描述",
// 动作特征描述
schema({ $7qb }) {
return {
// 动作属性
props: {
/* 依据动作需要,自定义属性 */
}
}
},
// 动作逻辑 class
logic,
// 配置面板组件 VueComponent
propsComponent,
}