vue-cropper 拖动图片和截图框
现象
开发遇到vue--cropper不能拖动图片和截图框
解决方法
can-move-box设置为true，表示可以拖动截图框
can-move设置为true，表示可以拖动图片
*注意：
我外层套了一个el-col, el-col的宽高一定要大于截图框的宽高，否则移动不了截图框和图片
实现代码
ref="cropper" :img="options.imageUrl" :info="true" :autoCrop="true" :autoCropWidth="850px" :autoCropHeight="680px" :fixedBox="options.fixedBox" :can-move-box="true" :can-move="true" :fixed-box="true" @realTime="realTime" v-if="visible" /> 组件源码地址https://github.com/xyxiao001/vue-cropper vue-cropper 属性其他相关内容
https://github.com/xyxiao001/vue-cropper组件演示地址名称 功能 默认值 可选值 img 裁剪图片的地址 空 url 地址, base64, bloboutputSize 裁剪生成图片的质量 10.1 ~ 1 outputType 裁剪生成图片的格式 jpg (jpg 需要传入jpeg) jpeg, png, webpinfo 裁剪框的大小信息 truetrue, falsecanScale 图片是否允许滚轮缩放 truetrue, falseautoCrop 是否默认生成截图框 falsetrue, falseautoCropWidth 默认生成截图框宽度 容器的 80% 0 ~ max autoCropHeight 默认生成截图框高度 容器的 80% 0 ~ max fixed 是否开启截图框宽高固定比例 falsetrue, falsefixedNumber 截图框的宽高比例 [1, 1][ 宽度 , 高度 ]full 是否输出原图比例的截图 falsetrue, falsefixedBox 固定截图框大小 不允许改变 falsecanMove 上传图片是否可以移动 truetrue, falsecanMoveBox 截图框能否拖动 truetrue, falseoriginal 上传图片按照原始比例渲染 falsetrue, falsecenterBox 截图框是否被限制在图片里面 falsetrue, falsehigh 是否按照设备的dpr 输出等比例图片 truetrue, falseinfoTrue true 为展示真实输出图片宽高 false 展示看到的截图框宽高false true, falsemaxImgSize 限制图片最大宽度和高度 20000 ~ max enlarge 图片根据截图框输出比例倍数 10 ~ max(建议不要太大不然会卡死的呢) mode 图片默认渲染方式 containcontain , cover, 100px, 100% autolimitMinSize 裁剪框限制最小区域 10 Number, Array, String