龙马UI lm-ui-element lm-img-cropper 图片裁剪组件

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	关闭弹窗	--