# 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 | 屬性 | 類型 | 默認值 | 說明 | | --------------- | --------- | ---------------- | ---------------- | | src | `string` | - | 圖片源 | | alt | `string` | - | 圖片 alt | | circled | `boolean` | `false` | 圓形裁剪框 | | realTimePreview | `boolean` | `true` | 實時觸發預覽 | | height | `string` | `360px` | 高度 | | crossorigin | `string` | - | crossorigin | | imageStyle | `object` | `` | 圖片樣式 | | options | `object` | `DefaultOptions` | corpperjs 配置項 | #### 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 | 屬性 | 類型 | 默認值 | 說明 | 版本 | | --------- | ------------------------------------------------- | ------- | ------------ | ---- | | 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 |