@gaoding/ska-sdk v0.1.2

@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

类型

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

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

createSDK 返回值

类型

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