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