创意表单 AdCreativeForm
创意表单是用来快速搭建广告投放系统创意表单的 UI SDK，目前支持 IMAGE、VIDEO、TEXT、URL、ID、ENUM、STRUCT 类型的创意元素。
使用说明
import { AdCreative } from '@tencent/mktui';
const { AdCreativeForm } = AdCreative;
<AdCreativeForm {...this.props} />组件示例
属性说明
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
data* | 创意数据 | object | {} |
additionalData | 创建创意接口除了adcreative_elements之外的附加字段值 | object | {} |
template* | 创意配置 | object | {} |
config* | 其他配置 | object | {} |
onChange* | 数据data改变的回调 | func | function(){} |
onAdditionalDataChange | 附加数据additionalData改变的回调 | func | function(){} |
errorTips* | 错误信息 | object | {} |
additionalErrorTips | 附加数据错误信息 | object | {} |
showError* | 是否显示错误信息 | bool | false |
onErrorTipsChange* | errorTips改变的回调 | func | function(){} |
onAdditionalErrorTipsChange | 附加数据errorTips改变的回调 | func | function(){} |
validateField* | 创意元素字段验证函数 | func | function(){} |
validateAdditionalData | 附加数据验证函数 | func | function(){} |
genMediaUploadParams | 给媒体文件上传接口增加附加数据 | func | function(){} |
onMediaUploadComplete | 自定义媒体文件上传完成后回调，需返回Promise，成功时调用 resolve({value: '', url: ''}) 回传媒体字段值及url(选填) | func | function(){} |
onMediaUploadError | 默认onMediaUploadComplete方法失败后的回调，自定义onMediaUploadComplete时无效 | func | function(){} |
getMediaUrlById | 自定义通过媒体id获取媒体url的方法，需返回Promise | func | function(){} |
onGetMediaUrlError | 默认getMediaUrlById方法失败后的回调，自定义getMediaUrlById时无效 | func | function(){} |
checkMedia | 自定义媒体文件上传前检查的方法 | func | function(){} |
onCheckMediaError | 默认 checkMedia 方法失败后的回调，自定义 checkMedia 时无效 | func | function(){} |
corporateList | 商标下拉列表数据, 当config.showCorporateList为true时需传入 | array | [] |
getMediaUploaderAddOnConfig | 返回媒体上传框hover显示自定义按钮相关配置，实现类似“从创意库选择媒体”功能，不传则hover后不显示按钮 | func | function(){} |
getImageProcessingAddOnConfig | 返回图片上传后裁剪相关配置 | func | function(){} |
landingPageIdList | 落地页id列表 | array | [] |
案例
config = {
imageUploadUrl: '/images/add', // 图片上传接口
videoUploadUrl: 'videos/add', // 视频上传接口
imageFileName: 'file', // 上传接口图片文件字段名
videoFileName: 'video_file', // 上传接口视频文件字段名
needImageProcessing: true, // 是否需要展示图片裁剪按钮及组件
hasMediaId: false, // 媒体字段的值是否为image_id，false表示为url
showCorporateList: false, // 为true时表示设置商标展示为下拉列表的形式
maxOneRowDisplayNumber: 4, // 一行最多展示多少个上传框（可取 3-5，默认为4）
needLandingPage: true, // 是否需要展示落地页模块
needDeepLinkUrl: true // 是否需要展示应用直达
}
// data: 新的创意表单数据
onChange(data)
// data: 新的表单错误信息
onErrorTipsChange(data)
// path: 媒体字段路径，该函数需返回 object，作为上传接口附加数据
genMediaUploadParams(path)
// path: 字段路径，errorMsg: 接口失败原因提示，resp: 上传接口返回，fieldConfig: 字段配置
onMediaUploadError(path, errorMsg, resp, fieldConfig)
// path: 字段路径，errorMsg: 接口失败原因提示，resp: 接口返回，fieldConfig: 字段配置
onGetMediaUrlError(path, errorMsg, resp, fieldConfig)
// mediaId: 媒体id，fieldConfig: 字段配置, return: Promise，获取成功时用resolve传url，失败则调用reject
getMediaUrlById(mediaId, fieldConfig)
// path: 字段路径，fieldConfig: 字段配置，函数返回的对象会作为上传接口的附加数据
genMediaUploadParams(path, fieldConfig)
// resp: 媒体上传接口返回，path: 字段路径，fieldConfig: 字段配置，inputDOM: file input DOM, return: Promise，获取成功时用resolve传 {value:'', url: ''}，失败则调用reject
onMediaUploadComplete(resp, path, fieldConfig, inputDOM)
// file: 文件对象，element: 字段配置，next: 调用该函数继续图片上传，inputDOM: file input DOM
checkMedia(file, element, next, inputDOM)
// path: 字段路径，errorMsg: 失败原因提示，fieldConfig: 字段配置
onCheckMediaError(path, errorMsg, fieldConfig)
// mediaFieldConfig: 媒体元素配置, MediaLibraryComponent: 创意库选择React组件
getMediaUploaderAddOnConfig(mediaFieldConfig) {
return { addOnText: '从创意库选择', MediaLibrary: MediaLibraryComponent }
}
// mediaFieldConfig: 媒体元素配置, ImageProcessing: 图片裁剪组件
getImageProcessingAddOnConfig(mediaFieldConfig) {
return { ImageProcessing: ImageProcessingComponent }
}
