lm-ui-element 快速上手——安装使用
图片裁剪弹窗组件，基于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 |
关闭弹窗 |
-- |
网友评论