龙马UI lm-ui-element lm-img-croppe
2021-02-11 本文已影响0人
东扯葫芦西扯瓜
上一个组件：文件图片上传组件
图片裁剪弹窗组件，基于vue-cropper插件，同时组件内部使用lm-dialog弹窗组件，使用时确保引入element-ui的el-button组件，lm-ui-element的lm-dialog组件
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| imgSrc | 裁剪图片的地址 | String / Blob | -- | -- |
| info | 显示裁剪框的大小信息 | Boolean | -- | true |
| outputSize | 剪切后的图片质量 | Number | 0.1~1 | 1 |
| full | 输出原图比例截图 | Boolean | -- | true |
| outputType | 裁剪生成额图片的格式 | String | -- | -- |
| canMove | 能否拖动图片 | Boolean | -- | true |
| original | 上传图片是否显示原始宽高 | Boolean | -- | true |
| canMoveBox | 能否拖动截图框 | Boolean | -- | true |
| autoCrop | 是否默认生成截图框 | Boolean | -- | true |
| autoCropWidth | 裁剪框宽度 | Number | -- | 200 |
| autoCropHeight | 裁剪框高度 | Number | -- | 260 |
| fixedBox | 截图框固定大小 | Boolean | -- | true |
| fileSize | 文件尺寸 | Number | -- | -- |
| exampleImg | 示例图片路径 | String | -- | -- |
| maxSize | 图片最大值 | String / Number | -- | 200 |
| title | 标题 | String | -- | 图片裁剪 |
| width | 截图弹窗宽度 | String / Number | -- | 850 |
| previewText | 预览文字 | String | -- | 预览 |
| exampleText | 示例文字 | String | -- | 示例 |
| completeBtnText | 裁剪完成按钮 | String | -- | 裁剪完成 |
| cancelBtnText | 取消裁剪按钮 | String | -- | 不裁剪 |
Slots
| name | 说明 |
|---|---|
| footer | 底部内容 |
| sizeWarning | 尺寸超出时提示内容 |
Methods
方法名 | 说明 | 参数 | 返回值
:---|:---:|:---|: ---
openDialog|打开裁剪弹窗|--| 点击裁剪成功，返回裁剪的文件对象file，点击关闭无返回值
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| cropperSuccess | 裁剪成功事件 | (file:File) |
| close | 关闭弹窗 | -- |
