codesign-js-sdk 提供 CoDesign 平台部分能力，方便第三方应用接入。目前支持 Picker 组件，提供设计稿选择列表。Demo 体验

接入流程

NPM 包

npm install codesign-js-sdk

import { Picker } from 'codesign-js-sdk'
const picker = new Picker(config)

CDN 链接

https://cdn.codesign.qq.com/pkg/codesign-js-sdk/latest/codesign-js-sdk.min.js

Picker 组件

使用方式

// 1. 不包含弹窗
const picker = new codesign.Picker({
  modal: false,
  width: 600,
  height: 480
})
picker.show()
picker.getData().then(data => {}).catch(err => {})

// 2. 包含弹窗
const picker = new codesign.Picker({
  width: 600,
  height: 480
})
picker.on('ready', (e) => {})
picker.on('confirm', (data) => {})
picker.on('selectChange', (data) => {})
picker.on('error', (data) => {})
picker.on('cancel', () => {})

Config 参数：

| 参数名 | 类型 | 描述 | 默认值 | | --- | --- | --- | --- | | width | Number | 宽 | 600 | | height | Number | 高 | 480 | | modal | Boolean | 是否显示弹窗容器 | true | | range | String | 选择范围: group / artboard | artboard | | limit | Number | 数量限制：-1 表示不限制数量 / 1 表示单选 / 值大于 1 表示最大限制（range 为 group 时只支持单选） | -1 | | type | String | 获取数据内容类型：sharing 返回分享链接 / screenshot 返回画板图片信息 | screenshot | | domain | String | 服务域名： codesign.qq.com / 私有化部署域名 | codesign.qq.com | | app | String | 第三方应用标识（需提前与 CoDesign 沟通标识名称与请求 origin），如：tapd / coding / pixel | |

API

show

显示设计稿选择组件

参数：parent 父容器

destory

销毁实例

getData

获取数据（modal 为 false 时可调用）

返回值 ：Promise 对象

const data = await picker.getData()

on

监听组件事件

参数：

| 参数名 | 类型 | 描述 | | --- | --- | --- | | event | Event | 事件名 | | handler | Function | 监听函数 |

off

移除事件监听

事件

ready

页面加载完成

selectChange

选择内容发生变化

picker.on('selectChange', data => {})

返回的数据内容如下：

{
  "name": '',
  "count": 1,
}

confirm

组件弹窗底部“确认”点击事件获取数据（modal 为 true 时）

picker.on('confirm', data => {})

type 为 sharing 时，返回的数据内容如下:

{
  "title": "分组名称",
  "range": "group",
  "type": "sharing",
  "data": {
    "count": 2,
    "url": "https://codesign.qq.com/s/xxxx"
  }
 
}

type 为 screenshot 时，返回的数据内容如下：

{
  "title": "",
  "range": "artboard",
  "type": "screenshot",
  "data": [
    {
      "name": "",
      "url": "",
      "thumb_url": "",
    }
  ]
}

error

错误信息

• empty, 未选择设计稿
• limit, 超出数量限制
• param, 参数有误
• cancel, 弹窗取消事件
• notallow, 不允许请求（targetOrigin 不在白名单内）