|
@@ -40,10 +40,10 @@ type DragAction =
|
|
|
// DOM 引用
|
|
// DOM 引用
|
|
|
const containerRef = ref<HTMLDivElement | null>(null);
|
|
const containerRef = ref<HTMLDivElement | null>(null);
|
|
|
const bgImageRef = ref<HTMLImageElement | null>(null);
|
|
const bgImageRef = ref<HTMLImageElement | null>(null);
|
|
|
-const maskRef = ref<HTMLDivElement | null>(null);
|
|
|
|
|
|
|
+// const maskRef = ref<HTMLDivElement | null>(null);
|
|
|
const maskViewRef = ref<HTMLDivElement | null>(null);
|
|
const maskViewRef = ref<HTMLDivElement | null>(null);
|
|
|
const cropperRef = ref<HTMLDivElement | null>(null);
|
|
const cropperRef = ref<HTMLDivElement | null>(null);
|
|
|
-const cropperViewRef = ref<HTMLDivElement | null>(null);
|
|
|
|
|
|
|
+// const cropperViewRef = ref<HTMLDivElement | null>(null);
|
|
|
|
|
|
|
|
// 响应式数据
|
|
// 响应式数据
|
|
|
const isCropperVisible = ref<boolean>(false);
|
|
const isCropperVisible = ref<boolean>(false);
|
|
@@ -739,7 +739,6 @@ defineExpose({ getCropImage });
|
|
|
|
|
|
|
|
<!-- 遮罩层 -->
|
|
<!-- 遮罩层 -->
|
|
|
<div
|
|
<div
|
|
|
- ref="maskRef"
|
|
|
|
|
class="cropper-mask"
|
|
class="cropper-mask"
|
|
|
:style="{
|
|
:style="{
|
|
|
display: isCropperVisible ? 'block' : 'none',
|
|
display: isCropperVisible ? 'block' : 'none',
|
|
@@ -773,7 +772,6 @@ defineExpose({ getCropImage });
|
|
|
}"
|
|
}"
|
|
|
>
|
|
>
|
|
|
<div
|
|
<div
|
|
|
- ref="cropperViewRef"
|
|
|
|
|
class="cropper-view"
|
|
class="cropper-view"
|
|
|
:style="{
|
|
:style="{
|
|
|
inset: `${currentDimension[0]}px ${currentDimension[1]}px ${currentDimension[2]}px ${currentDimension[3]}px`,
|
|
inset: `${currentDimension[0]}px ${currentDimension[1]}px ${currentDimension[2]}px ${currentDimension[3]}px`,
|
|
@@ -855,19 +853,21 @@ defineExpose({ getCropImage });
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
.cropper-action-wrapper {
|
|
.cropper-action-wrapper {
|
|
|
@apply box-border flex items-center justify-center;
|
|
@apply box-border flex items-center justify-center;
|
|
|
|
|
+
|
|
|
|
|
+ background-color: transparent;
|
|
|
|
|
+
|
|
|
/* 马赛克背景 */
|
|
/* 马赛克背景 */
|
|
|
background-image:
|
|
background-image:
|
|
|
linear-gradient(45deg, #ccc 25%, transparent 25%),
|
|
linear-gradient(45deg, #ccc 25%, transparent 25%),
|
|
|
linear-gradient(-45deg, #ccc 25%, transparent 25%),
|
|
linear-gradient(-45deg, #ccc 25%, transparent 25%),
|
|
|
linear-gradient(45deg, transparent 75%, #ccc 75%),
|
|
linear-gradient(45deg, transparent 75%, #ccc 75%),
|
|
|
linear-gradient(-45deg, transparent 75%, #ccc 75%);
|
|
linear-gradient(-45deg, transparent 75%, #ccc 75%);
|
|
|
- background-size: 20px 20px;
|
|
|
|
|
background-position:
|
|
background-position:
|
|
|
0 0,
|
|
0 0,
|
|
|
0 10px,
|
|
0 10px,
|
|
|
10px -10px,
|
|
10px -10px,
|
|
|
-10px 0;
|
|
-10px 0;
|
|
|
- background-color: transparent;
|
|
|
|
|
|
|
+ background-size: 20px 20px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.cropper-container {
|
|
.cropper-container {
|