vue-cropperjs 怎么设置剪裁框的大小和边框颜色

要设置剪裁框的大小和边框颜色，需要在使用 vue-cropperjs 组件时传入相应的属性。

1. 设置剪裁框大小

在 vue-cropperjs 组件中，可以通过设置 `cropperOptions` 对象的 `aspectRatio` 属性来控制剪裁框的大小。例如，将剪裁框设置为正方形，可以这样写：

<vue-cropper
  ref="cropper"
  :cropperOptions="{ aspectRatio: 1 }"
></vue-cropper>

其中，`aspectRatio` 属性的值表示剪裁框的宽高比，值为 1 表示剪裁框为正方形。

2. 设置边框颜色

在 vue-cropperjs 组件中，可以通过设置 `cropperOptions` 对象的 `cropBoxMovable` 和 `cropBoxResizable` 属性来控制剪裁框的可移动和可调整大小。同时，可以通过设置 `cropperOptions` 对象的 `cropBoxBorderColor` 属性来控制剪裁框的边框颜色。例如，将剪裁框的边框颜色设置为红色，可以这样写：

<vue-cropper
  ref="cropper"
  :cropperOptions="{ cropBoxMovable: false, cropBoxResizable: false, cropBoxBorderColor: 'red' }"
></vue-cropper>

其中，`cropBoxMovable` 和 `cropBoxResizable` 属性的值为 `false`，表示剪裁框不可移动和不可调整大小。`cropBoxBorderColor` 属性的值为 `'red'`，表示剪裁框的边框颜色为红色。