@gaoding/ska-sdk

稿定设计 SKA 客户对接 SDK。

安装

npm install @gaoding/ska-sdk

或

yarn add @gaoding/ska-sdk

用法

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,
        // ...其他参数
    })
});

API

createSDK Config

参数	类型	默认值	说明
debug	boolean	false	打印 log
container	string | HTMLElement	null	指定容器，若为空则以弹窗的方式打开
iframeProps	IframeProps	null	自定义覆盖 iframe 的样式及类名
modalProps	IframeModalProps	null	自定义覆盖 modal 弹窗的样式
onCloseModal	(...args: any[]) => Promise<void | boolean> | void | boolean	null	以弹窗形式打开时，点击关闭按钮时触发关闭弹窗操作，但如果函数返回 false 则会终止关闭弹窗（该方法可用于防止用户误操作关闭）

类型

interface IframeProps {
    // iframe 样式
    css?: Object | string;
    // iframe 类名
    className?: string;
}

interface IframeModalProps {
  	// 整个弹窗最外层元素的样式
    wrapperStyle?: string;
  	// 关闭按钮外层元素的样式
    btnStyle?: string;
  	// 弹窗的类名
    modalClass?: string;
  	// 弹窗的样式
    modalStyle?: string;
  	// 遮罩层的样式
    maskStyle?: string;
  	// 关闭按钮
    btnIcon?: HTMLElement;
}

createSDK 返回值

参数	类型	说明
open	(options: PageOptions) => void	打开具体页面的方法
emit	(type: string, payload?: any) => void | Promise<any>	触发页面事件的方法，可异步获取返回值
on	(type: string, handler: Function) => void	监听页面内事件的方法
once	(type: string, handler: Function) => void	监听页面内事件的方法，仅触发一次
off	(type: string, handler: Function) => void	取消监听事件的方法
close	(triggerOnCloseModal?: boolean, ...args: any[])=> void	关闭页面的方法。在弹窗模式下，传入 triggerOnCloseModal 为 true，可触发 onCloseModal 判断逻辑

类型

interface PageOptions {
    /**
     * 页面域名
     */
    origin?: string;
    /**
     * 页面路径
     */
    path: string;
    /**
     * 页面参数
     */
    query?: Record<string, any>;
    /**
     * 事件映射
     */
    eventMap?: Record<string, any> | null;
}