Vue Cropperjs是一個基于Vue框架的圖像裁剪組件。它使用了Cropperjs插件來完成圖像裁剪的功能，同時也提供了豐富的自定義屬性和事件來滿足不同需求。

使用Vue Cropperjs非常簡單，只需引入組件并傳入相應參數即可。下面是一個示例：

<template>
<div>
<vue-cropperjs
ref="cropper"
:src="imageUrl"
:aspect-ratio="1"
:view-mode="2"
:min-container-width="300"
:min-container-height="300">
</vue-cropperjs>
<button @click="getCroppedImage">裁剪圖片</button>
</div>
</template>
<script>
import VueCropperjs from 'vue-cropperjs';
export default {
components: {
VueCropperjs,
},
data() {
return {
imageUrl: '',
};
},
methods: {
getCroppedImage() {
this.$refs.cropper.getCroppedCanvas().toBlob(blob =>{
// do something with the blob
});
},
},
};
</script>

在上述示例中，組件的屬性包括：src表示圖片源地址，aspect-ratio表示裁剪框縱橫比，view-mode表示視圖模式，min-container-width和min-container-height表示組件容器的最小大小。在getCroppedImage方法中，使用ref獲取組件實例，調用getCroppedCanvas方法獲取裁剪后的圖片，可以進行后續處理。

Vue Cropperjs還提供了多個自定義事件，以便在特定時刻進行操作，例如：@ready表示組件就緒，@cropmove表示裁剪框移動，@cropend表示裁剪完成等。完整的組件屬性和事件列表可以參考官方文檔。