Ant Design Vue结合vue-cropper打造图片裁剪上传组件

上传图片

<cropper-modal

ref=“CropperModal”

:imgType=“imgType”

@cropper-no=“handleCropperClose”

@cropper-ok=“handleCropperSuccess”

• 模态框 CropperModal.vue

<a-modal

:visible=“visible”

:title=“options.title”

:maskClosable=“false”

:confirmLoading=“confirmLoading”

:width=“800”

@cancel=“cancelHandel”

<vue-cropper

ref=“cropper”

:img=“options.img”

:info=“true”

:autoCrop=“options.autoCrop”

:autoCropWidth=“options.autoCropWidth”

:autoCropHeight=“options.autoCropHeight”

:fixedBox=“options.fixedBox”

@realTime=“realTime”

<a-button key=“back” @click=“cancelHandel”>取消

<a-button key=“submit” type=“primary” :loading=“confirmLoading” @click=“okHandel”>保存