|
|
@ -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 { |
|
|
|