Courseware-editor-library NPM

courseware_editor_library

交互游戏编辑器通用组件库。适用于交互游戏编辑器的通用组件，包括 Button 、Input、Cropper（图片裁剪）、FormHeader（表头）、FormItem（表格）、UploadAudio（音频上传）、UploadImg（图片上传）。

按钮。包含三种形态，根据背景命名类型。

Prop	Type	default	Description
type	String	deepBg	属性包含 noBg、shallowBg、deepBg。

输入框。可以控制最大输入字符数，内部实现中英文的数量计算。

未输入状态	输入中状态	超出状态

Prop	Type	default	Description
value	String		输入框的值
maxlength	Number	0	输入框最大输入字符数。（1 中文=2 字符）。0 为不限制
placeholder	String	请输入内容	input 值为空时，显示提示内容

表头元素。内部包含表头、表头描述、删除 icon。

类别	默认
带边框
不带边框

Prop	Type	default	Description
label	String	''	表头
desc	String	''	表头描述
showHLborder	Boolean	true	border 显隐
showRemove	Boolean	true	删除 icon 显隐

表单元素。代替 element-ui 的 FormItem，针对编辑器需求内部统一规范单选框、复选框、表单序号、表单必选项、表单描述、表单验证等功能。

Prop	Type	default	Description
label	String	' '	表单显示文本
desc	String	''	表单描述文本
order	String	''	表单显示序号
prop	String	''	表单域 model 字段

音频上传和图片上传功能。基于 elemen-ui 实现个性化的上传音频和图片功能。UploadAudio 和 UploadImg 除表现有差异，其余 api 均相同。

类别	默认
UploadAudio
UploadImg

Prop	Type	default	Description
maxLength	Number	0	最大上传数量限制
beforeUpload	Function	空函数	上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
handlePreview	Function	空函数	点击文件列表中已上传的文件时的钩子
handleRequest	Function	空函数	覆盖默认的上传行为，可以自定义上传的实现
requestWareHousing	Function	空函数	上传成功之后的钩子，参数为成功 response 和文件，一般用来处理入库操作

图片裁剪功能。UploadImg 组件在一定条件下可以打开图片裁剪功能。Cropper 内部实现了图片的移动、裁剪框移动、裁剪压缩等功能。内部还对一些极端情况做了兼容处理，如裁剪图片的宽高大于屏幕的宽高，此时对裁剪框进行等比缩放。后续裁剪时，根据计算得出实际宽高和偏移量。

Prop	Type	default	Description
img	File		将被裁剪的图片
quality	Number	0.8	输出图片压缩比
full	Boolean	False	输出截图是否缩放
outputType	String	image/jpeg	输出图片格式类型
canMove	Boolean	true	是否可以移动图片
original	Boolean	False	上传图片按照原始大小显示
autoCropWidth	Number\|String	0	默认裁剪框宽度
autoCropHeight	Number\|String	0	默认裁剪框高度
mode	String	Contain	图片布局方式：contain 居中布局默认不会缩放保证图片在容器里面 cover 拉伸布局填充整个容器small 缩小至最小状态（裁剪框大小）
fixedNumber	Number[]	1, 1	图片缩放宽高比

3 years ago

3 years ago

3 years ago

3 years ago