728 lines
18 KiB
Plaintext
728 lines
18 KiB
Plaintext
<template>
|
|
<view
|
|
class="cl-cropper"
|
|
:class="[
|
|
{
|
|
'is-disabled': disabled
|
|
},
|
|
pt.className
|
|
]"
|
|
:style="{
|
|
width: width + 'px',
|
|
height: height + 'px'
|
|
}"
|
|
>
|
|
<view class="cl-cropper__container" :class="[pt.inner?.className]">
|
|
<!-- 图片容器 -->
|
|
<view
|
|
class="cl-cropper__image-container"
|
|
:style="imageContainerStyle"
|
|
@touchstart="onImageTouchStart"
|
|
@touchmove="onImageTouchMove"
|
|
@touchend="onImageTouchEnd"
|
|
>
|
|
<image
|
|
class="cl-cropper__image"
|
|
:class="[pt.image?.className]"
|
|
:src="src"
|
|
:style="imageStyle"
|
|
mode="aspectFit"
|
|
@load="onImageLoad"
|
|
></image>
|
|
</view>
|
|
|
|
<!-- 裁剪框 -->
|
|
<view
|
|
class="cl-cropper__crop-box"
|
|
:class="[pt.cropBox?.className]"
|
|
:style="cropBoxStyle"
|
|
>
|
|
<view class="cl-cropper__crop-mask cl-cropper__crop-mask--top"></view>
|
|
<view class="cl-cropper__crop-mask cl-cropper__crop-mask--right"></view>
|
|
<view class="cl-cropper__crop-mask cl-cropper__crop-mask--bottom"></view>
|
|
<view class="cl-cropper__crop-mask cl-cropper__crop-mask--left"></view>
|
|
|
|
<!-- 裁剪区域 -->
|
|
<view
|
|
class="cl-cropper__crop-area"
|
|
:class="{ 'is-resizing': isResizing }"
|
|
@touchstart="onCropTouchStart"
|
|
@touchmove="onCropTouchMove"
|
|
@touchend="onCropTouchEnd"
|
|
>
|
|
<!-- 辅助线 -->
|
|
<view class="cl-cropper__guide-lines" v-if="showGuideLines">
|
|
<view class="cl-cropper__guide-line cl-cropper__guide-line--h1"></view>
|
|
<view class="cl-cropper__guide-line cl-cropper__guide-line--h2"></view>
|
|
<view class="cl-cropper__guide-line cl-cropper__guide-line--v1"></view>
|
|
<view class="cl-cropper__guide-line cl-cropper__guide-line--v2"></view>
|
|
</view>
|
|
|
|
<!-- 拖拽点 -->
|
|
<view
|
|
class="cl-cropper__drag-point cl-cropper__drag-point--tl"
|
|
@touchstart="onResizeTouchStart"
|
|
@touchmove="onResizeTouchMove"
|
|
@touchend="onResizeTouchEnd"
|
|
data-direction="tl"
|
|
></view>
|
|
<view
|
|
class="cl-cropper__drag-point cl-cropper__drag-point--tr"
|
|
@touchstart="onResizeTouchStart"
|
|
@touchmove="onResizeTouchMove"
|
|
@touchend="onResizeTouchEnd"
|
|
data-direction="tr"
|
|
></view>
|
|
<view
|
|
class="cl-cropper__drag-point cl-cropper__drag-point--bl"
|
|
@touchstart="onResizeTouchStart"
|
|
@touchmove="onResizeTouchMove"
|
|
@touchend="onResizeTouchEnd"
|
|
data-direction="bl"
|
|
></view>
|
|
<view
|
|
class="cl-cropper__drag-point cl-cropper__drag-point--br"
|
|
@touchstart="onResizeTouchStart"
|
|
@touchmove="onResizeTouchMove"
|
|
@touchend="onResizeTouchEnd"
|
|
data-direction="br"
|
|
></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 操作按钮 -->
|
|
<view class="cl-cropper__buttons" v-if="showButtons">
|
|
<cl-button
|
|
type="light"
|
|
size="small"
|
|
:pt="{ className: pt.button?.className }"
|
|
@tap="reset"
|
|
>
|
|
重置
|
|
</cl-button>
|
|
<cl-button
|
|
type="primary"
|
|
size="small"
|
|
:pt="{ className: pt.button?.className }"
|
|
@tap="crop"
|
|
>
|
|
裁剪
|
|
</cl-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref, reactive, onMounted, type PropType } from "vue";
|
|
import type { PassThroughProps } from "../../types";
|
|
import { parsePt, parseRpx } from "@/cool";
|
|
|
|
defineOptions({
|
|
name: "cl-cropper"
|
|
});
|
|
|
|
const props = defineProps({
|
|
// 透传样式
|
|
pt: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
// 图片源
|
|
src: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
// 容器宽度
|
|
width: {
|
|
type: [String, Number] as PropType<string | number>,
|
|
default: 375
|
|
},
|
|
// 容器高度
|
|
height: {
|
|
type: [String, Number] as PropType<string | number>,
|
|
default: 375
|
|
},
|
|
// 裁剪框宽度
|
|
cropWidth: {
|
|
type: [String, Number] as PropType<string | number>,
|
|
default: 200
|
|
},
|
|
// 裁剪框高度
|
|
cropHeight: {
|
|
type: [String, Number] as PropType<string | number>,
|
|
default: 200
|
|
},
|
|
// 最大缩放比例
|
|
maxScale: {
|
|
type: Number,
|
|
default: 3
|
|
},
|
|
// 最小缩放比例
|
|
minScale: {
|
|
type: Number,
|
|
default: 0.5
|
|
},
|
|
// 是否显示操作按钮
|
|
showButtons: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 输出图片质量
|
|
quality: {
|
|
type: Number,
|
|
default: 0.9
|
|
},
|
|
// 输出图片格式
|
|
format: {
|
|
type: String as PropType<"jpg" | "png">,
|
|
default: "jpg"
|
|
},
|
|
// 是否禁用
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
// 事件定义
|
|
const emit = defineEmits(["crop", "load", "error"]);
|
|
|
|
// 透传样式类型
|
|
type PassThrough = {
|
|
className?: string;
|
|
inner?: PassThroughProps;
|
|
image?: PassThroughProps;
|
|
cropBox?: PassThroughProps;
|
|
button?: PassThroughProps;
|
|
};
|
|
|
|
// 解析透传样式
|
|
const pt = computed(() => parsePt<PassThrough>(props.pt));
|
|
|
|
// 图片信息
|
|
const imageInfo = reactive({
|
|
width: 0,
|
|
height: 0,
|
|
loaded: false
|
|
});
|
|
|
|
// 图片变换状态
|
|
const imageTransform = reactive({
|
|
scale: 1,
|
|
translateX: 0,
|
|
translateY: 0
|
|
});
|
|
|
|
// 裁剪框状态
|
|
const cropBox = reactive({
|
|
x: 0,
|
|
y: 0,
|
|
width: 200,
|
|
height: 200
|
|
});
|
|
|
|
// 触摸状态
|
|
const touchState = reactive({
|
|
startX: 0,
|
|
startY: 0,
|
|
startDistance: 0,
|
|
startScale: 1,
|
|
startTranslateX: 0,
|
|
startTranslateY: 0,
|
|
touching: false,
|
|
mode: "", // image, crop, resize
|
|
resizeDirection: "" // tl, tr, bl, br
|
|
});
|
|
|
|
// 缩放状态
|
|
const isResizing = ref(false);
|
|
const showGuideLines = ref(false);
|
|
|
|
// 计算图片容器样式
|
|
const imageContainerStyle = computed(() => {
|
|
return {
|
|
width: "100%",
|
|
height: "100%",
|
|
overflow: "hidden"
|
|
};
|
|
});
|
|
|
|
// 计算图片样式
|
|
const imageStyle = computed(() => {
|
|
return {
|
|
transform: `translate3d(${imageTransform.translateX}px, ${imageTransform.translateY}px, 0) scale(${imageTransform.scale})`,
|
|
transformOrigin: "center center",
|
|
transition: touchState.touching ? "none" : "transform 0.3s ease"
|
|
};
|
|
});
|
|
|
|
// 计算裁剪框样式
|
|
const cropBoxStyle = computed(() => {
|
|
return {
|
|
left: `${cropBox.x}px`,
|
|
top: `${cropBox.y}px`,
|
|
width: `${cropBox.width}px`,
|
|
height: `${cropBox.height}px`
|
|
};
|
|
});
|
|
|
|
// 图片加载完成
|
|
function onImageLoad(e: any) {
|
|
imageInfo.width = e.detail.width;
|
|
imageInfo.height = e.detail.height;
|
|
imageInfo.loaded = true;
|
|
|
|
// 初始化裁剪框位置
|
|
initCropBox();
|
|
|
|
emit("load", e);
|
|
}
|
|
|
|
// 计算图片最小缩放比例（确保图片不小于裁剪框）
|
|
function calculateMinScale() {
|
|
if (!imageInfo.loaded || !imageInfo.width || !imageInfo.height) {
|
|
return props.minScale;
|
|
}
|
|
|
|
const containerWidth = parseFloat(parseRpx(props.width!).replace("px", ""));
|
|
const containerHeight = parseFloat(parseRpx(props.height!).replace("px", ""));
|
|
|
|
// 计算图片在容器中的显示尺寸（保持宽高比）
|
|
const imageAspectRatio = imageInfo.width / imageInfo.height;
|
|
const containerAspectRatio = containerWidth / containerHeight;
|
|
|
|
let displayWidth: number;
|
|
let displayHeight: number;
|
|
|
|
if (imageAspectRatio > containerAspectRatio) {
|
|
// 图片较宽，以容器宽度为准
|
|
displayWidth = containerWidth;
|
|
displayHeight = containerWidth / imageAspectRatio;
|
|
} else {
|
|
// 图片较高，以容器高度为准
|
|
displayHeight = containerHeight;
|
|
displayWidth = containerHeight * imageAspectRatio;
|
|
}
|
|
|
|
// 计算使图片能够覆盖裁剪框的最小缩放比例
|
|
const minScaleX = cropBox.width / displayWidth;
|
|
const minScaleY = cropBox.height / displayHeight;
|
|
const calculatedMinScale = Math.max(minScaleX, minScaleY);
|
|
|
|
// 确保不低于用户设置的最小缩放比例
|
|
return Math.max(props.minScale, calculatedMinScale);
|
|
}
|
|
|
|
// 初始化裁剪框
|
|
function initCropBox() {
|
|
const containerWidth = parseFloat(parseRpx(props.width!).replace("px", ""));
|
|
const containerHeight = parseFloat(parseRpx(props.height!).replace("px", ""));
|
|
|
|
cropBox.width = parseFloat(parseRpx(props.cropWidth!).replace("px", ""));
|
|
cropBox.height = parseFloat(parseRpx(props.cropHeight!).replace("px", ""));
|
|
cropBox.x = (containerWidth - cropBox.width) / 2;
|
|
cropBox.y = (containerHeight - cropBox.height) / 2;
|
|
|
|
// 图片加载完成后，确保当前缩放比例不小于最小要求
|
|
if (imageInfo.loaded) {
|
|
const minScale = calculateMinScale();
|
|
if (imageTransform.scale < minScale) {
|
|
imageTransform.scale = minScale;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 图片触摸开始
|
|
function onImageTouchStart(e: TouchEvent) {
|
|
if (props.disabled || !imageInfo.loaded) return;
|
|
|
|
touchState.touching = true;
|
|
touchState.mode = "image";
|
|
|
|
if (e.touches != null && e.touches.length == 1) {
|
|
// 单指拖拽
|
|
touchState.startX = e.touches[0].clientX;
|
|
touchState.startY = e.touches[0].clientY;
|
|
touchState.startTranslateX = imageTransform.translateX;
|
|
touchState.startTranslateY = imageTransform.translateY;
|
|
} else if (e.touches != null && e.touches.length == 2) {
|
|
// 双指缩放
|
|
const touch1 = e.touches[0];
|
|
const touch2 = e.touches[1];
|
|
|
|
// 计算两指间距离
|
|
touchState.startDistance = Math.sqrt(
|
|
Math.pow(touch2.clientX - touch1.clientX, 2) +
|
|
Math.pow(touch2.clientY - touch1.clientY, 2)
|
|
);
|
|
touchState.startScale = imageTransform.scale;
|
|
|
|
// 记录缩放中心点（两指中心）
|
|
touchState.startX = (touch1.clientX + touch2.clientX) / 2;
|
|
touchState.startY = (touch1.clientY + touch2.clientY) / 2;
|
|
touchState.startTranslateX = imageTransform.translateX;
|
|
touchState.startTranslateY = imageTransform.translateY;
|
|
}
|
|
}
|
|
|
|
// 图片触摸移动
|
|
function onImageTouchMove(e: TouchEvent) {
|
|
if (props.disabled || !touchState.touching || touchState.mode != "image") return;
|
|
|
|
e.preventDefault();
|
|
|
|
if (e.touches != null && e.touches.length == 1) {
|
|
// 单指拖拽
|
|
const deltaX = e.touches[0].clientX - touchState.startX;
|
|
const deltaY = e.touches[0].clientY - touchState.startY;
|
|
|
|
imageTransform.translateX = touchState.startTranslateX + deltaX;
|
|
imageTransform.translateY = touchState.startTranslateY + deltaY;
|
|
} else if (e.touches != null && e.touches.length == 2) {
|
|
// 双指缩放
|
|
const touch1 = e.touches[0];
|
|
const touch2 = e.touches[1];
|
|
|
|
// 计算当前两指间距离
|
|
const distance = Math.sqrt(
|
|
Math.pow(touch2.clientX - touch1.clientX, 2) +
|
|
Math.pow(touch2.clientY - touch1.clientY, 2)
|
|
);
|
|
|
|
// 计算缩放比例
|
|
const scale = (distance / touchState.startDistance) * touchState.startScale;
|
|
|
|
// 使用动态计算的最小缩放比例
|
|
const minScale = calculateMinScale();
|
|
const newScale = Math.max(minScale, Math.min(props.maxScale, scale));
|
|
|
|
// 计算当前缩放中心点
|
|
const centerX = (touch1.clientX + touch2.clientX) / 2;
|
|
const centerY = (touch1.clientY + touch2.clientY) / 2;
|
|
|
|
// 计算缩放中心相对于容器的偏移
|
|
const containerWidth = parseFloat(parseRpx(props.width!).replace("px", ""));
|
|
const containerHeight = parseFloat(parseRpx(props.height!).replace("px", ""));
|
|
const containerCenterX = containerWidth / 2;
|
|
const containerCenterY = containerHeight / 2;
|
|
|
|
// 缩放时调整位移，使缩放围绕双指中心进行
|
|
const scaleDelta = newScale - touchState.startScale;
|
|
const offsetX = (centerX - containerCenterX - touchState.startX + containerCenterX) * scaleDelta / touchState.startScale;
|
|
const offsetY = (centerY - containerCenterY - touchState.startY + containerCenterY) * scaleDelta / touchState.startScale;
|
|
|
|
imageTransform.scale = newScale;
|
|
imageTransform.translateX = touchState.startTranslateX - offsetX;
|
|
imageTransform.translateY = touchState.startTranslateY - offsetY;
|
|
}
|
|
}
|
|
|
|
// 图片触摸结束
|
|
function onImageTouchEnd(e: TouchEvent) {
|
|
touchState.touching = false;
|
|
touchState.mode = "";
|
|
}
|
|
|
|
// 裁剪框触摸开始
|
|
function onCropTouchStart(e: TouchEvent) {
|
|
if (props.disabled) return;
|
|
|
|
e.stopPropagation();
|
|
touchState.touching = true;
|
|
touchState.mode = "crop";
|
|
|
|
if (e.touches != null && e.touches.length == 1) {
|
|
touchState.startX = e.touches[0].clientX;
|
|
touchState.startY = e.touches[0].clientY;
|
|
}
|
|
}
|
|
|
|
// 裁剪框触摸移动
|
|
function onCropTouchMove(e: TouchEvent) {
|
|
if (props.disabled || !touchState.touching || touchState.mode != "crop") return;
|
|
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
if (e.touches != null && e.touches.length == 1) {
|
|
const deltaX = e.touches[0].clientX - touchState.startX;
|
|
const deltaY = e.touches[0].clientY - touchState.startY;
|
|
|
|
const containerWidth = parseFloat(parseRpx(props.width!).replace("px", ""));
|
|
const containerHeight = parseFloat(parseRpx(props.height!).replace("px", ""));
|
|
|
|
// 限制裁剪框在容器内
|
|
cropBox.x = Math.max(0, Math.min(containerWidth - cropBox.width, cropBox.x + deltaX));
|
|
cropBox.y = Math.max(0, Math.min(containerHeight - cropBox.height, cropBox.y + deltaY));
|
|
|
|
touchState.startX = e.touches[0].clientX;
|
|
touchState.startY = e.touches[0].clientY;
|
|
}
|
|
}
|
|
|
|
// 裁剪框触摸结束
|
|
function onCropTouchEnd(e: TouchEvent) {
|
|
touchState.touching = false;
|
|
touchState.mode = "";
|
|
}
|
|
|
|
// 裁剪框缩放开始
|
|
function onResizeTouchStart(e: TouchEvent) {
|
|
if (props.disabled) return;
|
|
|
|
e.stopPropagation();
|
|
|
|
touchState.touching = true;
|
|
touchState.mode = "resize";
|
|
isResizing.value = true;
|
|
showGuideLines.value = true;
|
|
|
|
// 从 data-direction 属性获取缩放方向
|
|
const target = e.target as HTMLElement;
|
|
touchState.resizeDirection = target.getAttribute("data-direction") || "";
|
|
|
|
if (e.touches != null && e.touches.length == 1) {
|
|
touchState.startX = e.touches[0].clientX;
|
|
touchState.startY = e.touches[0].clientY;
|
|
}
|
|
}
|
|
|
|
// 裁剪框缩放移动
|
|
function onResizeTouchMove(e: TouchEvent) {
|
|
if (props.disabled || !touchState.touching || touchState.mode != "resize") return;
|
|
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
if (e.touches != null && e.touches.length == 1) {
|
|
const deltaX = e.touches[0].clientX - touchState.startX;
|
|
const deltaY = e.touches[0].clientY - touchState.startY;
|
|
|
|
const containerWidth = parseFloat(parseRpx(props.width!).replace("px", ""));
|
|
const containerHeight = parseFloat(parseRpx(props.height!).replace("px", ""));
|
|
|
|
// 最小裁剪框尺寸
|
|
const minSize = 50;
|
|
|
|
let newX = cropBox.x;
|
|
let newY = cropBox.y;
|
|
let newWidth = cropBox.width;
|
|
let newHeight = cropBox.height;
|
|
|
|
// 根据拖拽方向调整裁剪框
|
|
switch (touchState.resizeDirection) {
|
|
case "tl": // 左上角
|
|
newX = Math.max(0, cropBox.x + deltaX);
|
|
newY = Math.max(0, cropBox.y + deltaY);
|
|
newWidth = cropBox.width - deltaX;
|
|
newHeight = cropBox.height - deltaY;
|
|
break;
|
|
case "tr": // 右上角
|
|
newY = Math.max(0, cropBox.y + deltaY);
|
|
newWidth = cropBox.width + deltaX;
|
|
newHeight = cropBox.height - deltaY;
|
|
break;
|
|
case "bl": // 左下角
|
|
newX = Math.max(0, cropBox.x + deltaX);
|
|
newWidth = cropBox.width - deltaX;
|
|
newHeight = cropBox.height + deltaY;
|
|
break;
|
|
case "br": // 右下角
|
|
newWidth = cropBox.width + deltaX;
|
|
newHeight = cropBox.height + deltaY;
|
|
break;
|
|
}
|
|
|
|
// 确保尺寸不小于最小值且不超出容器
|
|
if (newWidth >= minSize && newHeight >= minSize) {
|
|
// 检查是否超出容器边界
|
|
if (newX >= 0 && newY >= 0 &&
|
|
newX + newWidth <= containerWidth &&
|
|
newY + newHeight <= containerHeight) {
|
|
|
|
cropBox.x = newX;
|
|
cropBox.y = newY;
|
|
cropBox.width = newWidth;
|
|
cropBox.height = newHeight;
|
|
|
|
// 当裁剪框大小改变时，检查图片是否需要放大
|
|
const minScale = calculateMinScale();
|
|
if (imageTransform.scale < minScale) {
|
|
imageTransform.scale = minScale;
|
|
}
|
|
|
|
// 更新起始位置
|
|
touchState.startX = e.touches[0].clientX;
|
|
touchState.startY = e.touches[0].clientY;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 裁剪框缩放结束
|
|
function onResizeTouchEnd(e: TouchEvent) {
|
|
touchState.touching = false;
|
|
touchState.mode = "";
|
|
touchState.resizeDirection = "";
|
|
isResizing.value = false;
|
|
|
|
// 延迟隐藏辅助线，给用户一点时间看到最终位置
|
|
setTimeout(() => {
|
|
showGuideLines.value = false;
|
|
}, 500);
|
|
}
|
|
|
|
// 重置
|
|
function reset() {
|
|
// 重置位移
|
|
imageTransform.translateX = 0;
|
|
imageTransform.translateY = 0;
|
|
|
|
// 重置裁剪框
|
|
initCropBox();
|
|
|
|
// 设置合适的初始缩放比例（确保图片能覆盖裁剪框）
|
|
if (imageInfo.loaded) {
|
|
const minScale = calculateMinScale();
|
|
imageTransform.scale = Math.max(1, minScale);
|
|
} else {
|
|
imageTransform.scale = 1;
|
|
}
|
|
}
|
|
|
|
// 执行裁剪
|
|
function crop() {
|
|
if (!imageInfo.loaded) {
|
|
emit("error", "图片未加载完成");
|
|
return;
|
|
}
|
|
}
|
|
|
|
// 初始化
|
|
onMounted(() => {
|
|
if (props.src != "") {
|
|
initCropBox();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.cl-cropper {
|
|
@apply relative overflow-hidden bg-surface-100 rounded-xl;
|
|
|
|
&.is-disabled {
|
|
@apply opacity-50;
|
|
}
|
|
|
|
&__container {
|
|
@apply relative w-full h-full;
|
|
}
|
|
|
|
&__image-container {
|
|
@apply absolute top-0 left-0 flex items-center justify-center;
|
|
}
|
|
|
|
&__image {
|
|
@apply max-w-full max-h-full;
|
|
}
|
|
|
|
&__crop-box {
|
|
@apply absolute;
|
|
}
|
|
|
|
&__crop-mask {
|
|
@apply absolute bg-black opacity-50;
|
|
|
|
&--top {
|
|
@apply top-0 left-0 w-full;
|
|
height: var(--crop-top);
|
|
}
|
|
|
|
&--right {
|
|
@apply top-0 right-0 h-full;
|
|
width: var(--crop-right);
|
|
}
|
|
|
|
&--bottom {
|
|
@apply bottom-0 left-0 w-full;
|
|
height: var(--crop-bottom);
|
|
}
|
|
|
|
&--left {
|
|
@apply top-0 left-0 h-full;
|
|
width: var(--crop-left);
|
|
}
|
|
}
|
|
|
|
&__crop-area {
|
|
@apply relative w-full h-full border-2 border-white border-solid transition-all duration-300;
|
|
|
|
&.is-resizing {
|
|
@apply border-primary-500;
|
|
}
|
|
}
|
|
|
|
&__guide-lines {
|
|
@apply absolute top-0 left-0 w-full h-full pointer-events-none;
|
|
}
|
|
|
|
&__guide-line {
|
|
@apply absolute bg-white opacity-70;
|
|
|
|
&--h1 {
|
|
@apply top-1/3 left-0 w-full h-px;
|
|
}
|
|
|
|
&--h2 {
|
|
@apply top-2/3 left-0 w-full h-px;
|
|
}
|
|
|
|
&--v1 {
|
|
@apply left-1/3 top-0 w-px h-full;
|
|
}
|
|
|
|
&--v2 {
|
|
@apply left-2/3 top-0 w-px h-full;
|
|
}
|
|
}
|
|
|
|
&__drag-point {
|
|
@apply absolute w-3 h-3 bg-white border border-surface-300 border-solid cursor-move transition-all duration-200;
|
|
|
|
&:hover {
|
|
@apply scale-125 border-primary-500;
|
|
}
|
|
|
|
&--tl {
|
|
@apply -top-1 -left-1;
|
|
cursor: nw-resize;
|
|
}
|
|
|
|
&--tr {
|
|
@apply -top-1 -right-1;
|
|
cursor: ne-resize;
|
|
}
|
|
|
|
&--bl {
|
|
@apply -bottom-1 -left-1;
|
|
cursor: sw-resize;
|
|
}
|
|
|
|
&--br {
|
|
@apply -bottom-1 -right-1;
|
|
cursor: se-resize;
|
|
}
|
|
|
|
// 缩放时高亮显示
|
|
.is-resizing & {
|
|
@apply scale-125 border-primary-500 shadow-md;
|
|
}
|
|
}
|
|
|
|
&__buttons {
|
|
@apply absolute bottom-4 left-0 right-0 flex justify-center space-x-4;
|
|
}
|
|
}
|
|
</style>
|