摸鱼低代码 mfish-nocode

切换深浅模式

当前页

Cropper ​

图片裁剪组件

CropperImage ​

图片裁剪组件

Usage ​

vue
<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 ​

属性类型默认值说明
srcstring-图片源
altstring-图片 alt
circledbooleanfalse圆形裁剪框
realTimePreviewbooleantrue实时触发预览
heightstring360px高度
crossoriginstring-crossorigin
imageStyleobject``图片样式
optionsobjectDefaultOptionscorpperjs 配置项

DefaultOptions ​

ts
{
  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 ​

vue
<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 ​

属性类型默认值说明版本
widthstring,number200px图片源
uploadApi({ file: Blob, name: string }) => Promise<void>-图片上传接口
valueString-当前头像地址(v-model)2.5.3
showBtnBooleantrue是否显示按钮2.5.3
btnTextString-按钮文案2.5.3
btnPropsButtonProps-按钮的其它属性2.5.3

Events ​

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

Methods ​

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