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

本文介绍了如何利用Ant Design Vue的模态框与vue-cropper组件来创建一个图片裁剪上传功能。在CropperModal.vue中配置了vue-cropper的各项参数,并提供了取消和保存操作。当点击保存时,调用ajax网络接口index.js的UpPic方法进行图片上传。使用时,可以通过属性和事件来定制组件的行为。
摘要由CSDN通过智能技术生成

},

},

}

  • 模态框 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”>保存

  • ajax网络接口 index.js

import request from ‘@/utils/request’

import qs from ‘qs

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值