courseware_editor_library

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

组件功能

Button

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

三种形态

| 按钮类别 | 常规 | 悬停 | 点击 | 置灰 | | :-------: | :--------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------: | :----------------------------------------------: | | deepBg | | | | | | noBg | | | | | | shallowBg | | | | |

属性

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

Input

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

表现

| 未输入状态 | 输入中状态 | 超出状态 | | :-----------------------------------------------------------: | :-----------------------------------------------------------: | :-----------------------------------------------------------: | | | | |

属性

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

FormHeader

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

表现

| 类别 | 默认 | | :------: | :--------------------------------------------------------------------------: | | 带边框 | | | 不带边框 | |

属性

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

FormItem

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

属性

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

UploadAudio 和 UploadImg

音频上传和图片上传功能。基于 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 和文件，一般用来处理入库操作 |

Cropper

图片裁剪功能。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] | 图片缩放宽高比 |

发布npm

1. 修改package.json的 version 版本号
2. 构建 npm run dist
3. 发布npm publish