codesign-js-sdk

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

接入流程

----

$3

`` shell
npm install codesign-js-sdk
`

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




$3


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

Picker 组件

----

$3

` javascript
// 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 | |




$3

#### show
显示设计稿选择组件

参数：parent 父容器

#### destory
销毁实例

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

返回值 ：Promise 对象

` javascript
const data = await picker.getData()
`

#### on
监听组件事件

参数：

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

#### off
移除事件监听




$3

#### ready
页面加载完成

#### selectChange
选择内容发生变化

` javascript
picker.on('selectChange', data => {})
`
返回的数据内容如下：

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

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


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

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

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

}
`

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

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

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