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对象
}