稿定设计SKA SDK
稿定设计 SKA 客户对接 SDK。
``bash`
npm install @gaoding/ska-sdk
或
`bash`
yarn add @gaoding/ska-sdk
`javascript
import { createSDK, PageEventTypes } from '@gaoding/ska-sdk';
const gdSDK = createSDK({
// 指定容器,若为空则以弹窗的方式打开
container: '#container',
// ...
});
// 打开编辑器页
const handleOpenEditor = (query)=> {
gdSDK.open({
// 页面域名
origin: 'https://xxx',
// 页面路径
path: '/editor/path',
// 页面参数
query,
// 事件映射
eventMap: {
[PageEventTypes.EDITOR_SAVE]: async () => {
console.log(info);
// 直接关闭编辑器
gdSDK.close();
// 如果是新增操作,拿到workId,保存到数据库
// 其他操作
},
[PageEventTypes.EDITOR_DOWNLOAD]: async () => {
// 编辑器触发下载的回调函数
// 处理完业务逻辑后,关闭页面
gdSDK.close();
}
}
})
}
// 打开模板中心页
const handleOpenTemplateList = ()=> {
gdSDK.open({
// 页面域名
origin: 'https://xxx',
// 页面路径
path: '/xxx/xxx',
// 页面参数
query: {
code: 'xxx',
page: 'xxx',
},
// 事件映射
eventMap: {
[PageEventTypes.TEMPLATE_SELECT]: async (templet) => {
// 选择模板后的回调
handleOpenEditor({
id: templet.id,
// ...其他参数
})
},
}
})
}
//或者也可以通过事件监听操作回调
gdSDK.on(PageEventTypes.TEMPLATE_SELECT, (templet) => {
console.log(templet);
// 选择模板后的回调
handleOpenEditor({
id: templet.id,
// ...其他参数
})
});
`
| 参数 | 类型 | 默认值 | 说明 |
| ------------ | ----------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- |
| debug | boolean | false | 打印 log |string \| HTMLElement
| container | | null | 指定容器,若为空则以弹窗的方式打开 |IframeProps
| iframeProps | | null | 自定义覆盖 iframe 的样式及类名 |IframeModalProps
| modalProps | | null | 自定义覆盖 modal 弹窗的样式 |(...args: any[]) => Promise
| onCloseModal | | null | 以弹窗形式打开时,点击关闭按钮时触发关闭弹窗操作,但如果函数返回 false 则会终止关闭弹窗(该方法可用于防止用户误操作关闭) |
#### 类型
`javascript
interface IframeProps {
// iframe 样式
css?: Object | string;
// iframe 类名
className?: string;
}
interface IframeModalProps {
// 整个弹窗最外层元素的样式
wrapperStyle?: string;
// 关闭按钮外层元素的样式
btnStyle?: string;
// 弹窗的类名
modalClass?: string;
// 弹窗的样式
modalStyle?: string;
// 遮罩层的样式
maskStyle?: string;
// 关闭按钮
btnIcon?: HTMLElement;
}
`
| 参数 | 类型 | 说明 |
| ----- | -------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| open | (options: PageOptions) => void | 打开具体页面的方法 |(type: string, payload?: any) => void \| Promise
| emit | | 触发页面事件的方法,可异步获取返回值 |(type: string, handler: Function) => void
| on | | 监听页面内事件的方法 |(type: string, handler: Function) => void
| once | | 监听页面内事件的方法,仅触发一次 |(type: string, handler: Function) => void
| off | | 取消监听事件的方法 |(triggerOnCloseModal?: boolean, ...args: any[])=> void
| close | | 关闭页面的方法。在弹窗模式下,传入 triggerOnCloseModal 为 true,可触发 onCloseModal 判断逻辑 |
#### 类型
`javascript``
interface PageOptions {
/**
* 页面域名
*/
origin?: string;
/**
* 页面路径
*/
path: string;
/**
* 页面参数
*/
query?: Record
/**
* 事件映射
*/
eventMap?: Record
}