Cropper

图片裁剪组件

CropperImage

图片裁剪组件

Usage

<template>
  <CropperImage ref="refCropper" :src="img" @cropend="handleCropend" style="width: 40vw" />
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { CropperImage } from '/@/components/Cropper';
  import img from '/@/assets/images/header.jpg';

  export default defineComponent({
    components: {
      CropperImage,
    },
    setup() {
      const info = ref('');
      const cropperImg = ref('');

      function handleCropend({ imgBase64, imgInfo }) {
        info.value = imgInfo;
        cropperImg.value = imgBase64;
      }

      return {
        img,
        info,
        cropperImg,
        handleCropend,
      };
    },
  });
</script>

Props

属性	类型	默认值	说明
src	string	-	图片源
alt	string	-	图片 alt
circled	boolean	false	圆形裁剪框
realTimePreview	boolean	true	实时触发预览
height	string	360px	高度
crossorigin	string	-	crossorigin
imageStyle	object	``	图片样式
options	object	DefaultOptions	corpperjs 配置项

DefaultOptions

{
  aspectRatio: 1,
  zoomable: true,
  zoomOnTouch: true,
  zoomOnWheel: true,
  cropBoxMovable: true,
  cropBoxResizable: true,
  toggleDragModeOnDblclick: true,
  autoCrop: true,
  background: true,
  highlight: true,
  center: true,
  responsive: true,
  restore: true,
  checkCrossOrigin: true,
  checkOrientation: true,
  scalable: true,
  modal: true,
  guides: true,
  movable: true,
  rotatable: true,
}

CropperAvatar

头像裁剪组件

Usage

<template>
  <CropperAvatar :uploadApi="uploadApi" />
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { CropperAvatar } from '/@/components/Cropper';
  import { uploadApi } from '/@/api/sys/upload';

  export default defineComponent({
    components: {
      CropperAvatar,
    },
  });
</script>

Props

属性	类型	默认值	说明	版本
width	string,number	200px	图片源
uploadApi	({ file: Blob, name: string }) => Promise<void>	-	图片上传接口
value	String	-	当前头像地址(v-model)	2.5.3
showBtn	Boolean	true	是否显示按钮	2.5.3
btnText	String	-	按钮文案	2.5.3
btnProps	ButtonProps	-	按钮的其它属性	2.5.3

Events

名称	参数	说明	版本
change	value: String	当头像上传完成时触发	2.5.3

Methods

名称	定义	说明	版本
openModal	()=>void	打开上传Modal	2.5.3
closeModal	()=>void	关闭上传Modal	2.5.3