vue-cropper
一个基于vue3&cropper&ant-design-vue2的图片上传组件
Install
npm install @findsoft/vue-cropper
Quick Start
<!-- vue -->
<template>
<div class="about">
<h1>This is an demo</h1>
<a-upload>
<template #prefix>
可以插入前缀icon
</template>
</a-upload>
</div>
</template>
import '@findsoft/vue-cropper/dist/vueCropper.css';
import Upload from '@findsoft/vue-cropper';
export default {
components: {
aUpload: Upload,
},
};
Slot
name | description | version |
---|---|---|
prefix | 上传按钮前缀插槽,可放置icon | >1.2.0 |
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
disabled | 是否需要禁用 | Boolean | false |
title | 裁剪框title | String | 图片裁剪 |
oldImgSrc | 之前的图片 | String | '' |
aspectRatio | 裁剪比例 NaN表示自由尺寸 | Number | 16 / 9 |
sizeText | 推荐尺寸 | String | 210*118 |
fileSize | 限制大小,单位M | Number | 2 |
exportType | 输出格式 jpg、png | String | png |
importType | 输入格式 | Array | ['jpg', 'jpeg', 'png'] |
CallBack
upload = (file: File) => {
// 裁切后的file对象
}