CropperHandle

CropperHandle 接口提供了用于操作 <cropper-handle> 元素的布局和表示的属性和方法。

示例

基本

TIP

此元素的默认宽度和高度为 0。

在 CropperCanvas 中

在 CropperSelection 中

双击切换动作类型

Details

<template>
  <div class="cropper-container">
    <cropper-canvas background>
      <cropper-image
        :src="src"
        alt="Picture"
        rotatable
        scalable
        skewable
        translatable
      />
      <cropper-handle
        action="select"
        plain
        @dblclick="toggleActionOnDblclick"
      />
      <cropper-selection
        ref="cropperSelection"
        initial-coverage="0.5"
        movable
        resizable
        outlined
      >
        <cropper-grid
          role="grid"
          covered
        />
        <cropper-crosshair centered />
        <cropper-handle
          action="move"
          theme-color="rgba(255, 255, 255, 0.35)"
          @dblclick="toggleActionOnDblclick"
        />
        <cropper-handle action="n-resize" />
        <cropper-handle action="e-resize" />
        <cropper-handle action="s-resize" />
        <cropper-handle action="w-resize" />
        <cropper-handle action="ne-resize" />
        <cropper-handle action="nw-resize" />
        <cropper-handle action="se-resize" />
        <cropper-handle action="sw-resize" />
      </cropper-selection>
    </cropper-canvas>
  </div>
</template>

<script lang="ts">
import type CropperHandle from '@cropper/element-handle';

const { BASE_URL } = import.meta.env;

export default {
  name: 'CropperActionExample',
  data() {
    return {
      src: `${BASE_URL}picture.jpg`,
    };
  },
  methods: {
    toggleActionOnDblclick(event: any) {
      const cropperHandle = event.target as CropperHandle;

      cropperHandle.action = cropperHandle.action === 'move' ? 'select' : 'move';
    },
  },
};
</script>

<style lang="scss" scoped>
.cropper-container {
  border: 1px solid var(--vp-c-divider);
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
  padding: 1.25rem 1.5rem;

  cropper-canvas {
    height: 320px;
  }
}
</style>

属性

从其父级 CropperElement 继承属性，并实现以下属性：

名称	类型	默认值	可选值	描述
action	string	"none"	"select", "move", "scale", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "none"	表示手柄的动作类型。
plain	boolean	false	-	指示此元素是否为素色元素。
slottable	boolean	false	-	指示此元素是否启用默认插槽。
themeColor	string	"rgba(51, 153, 255, 0.5)"	-	指示手柄的颜色。

插槽

此元素中没有可用的插槽。

你可以通过将 slottable 属性设置为 true 来启用默认插槽：

<cropper-handle slottable></cropper-handle>