fix: lint
This commit is contained in:
@@ -30,6 +30,7 @@ describe('useSortable', () => {
|
|||||||
|
|
||||||
// Import sortablejs to access the mocked create function
|
// Import sortablejs to access the mocked create function
|
||||||
const Sortable =
|
const Sortable =
|
||||||
|
// @ts-expect-error - This is a dynamic import
|
||||||
await import('sortablejs/modular/sortable.complete.esm.js');
|
await import('sortablejs/modular/sortable.complete.esm.js');
|
||||||
|
|
||||||
// Verify that Sortable.create was called with the correct parameters
|
// Verify that Sortable.create was called with the correct parameters
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -132,10 +132,12 @@ const downloadImage = () => {
|
|||||||
.ratio-label {
|
.ratio-label {
|
||||||
@apply text-sm font-medium;
|
@apply text-sm font-medium;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 主裁剪区域 */
|
/* 主裁剪区域 */
|
||||||
.cropper-main-wrapper {
|
.cropper-main-wrapper {
|
||||||
@apply flex items-center gap-4;
|
@apply flex items-center gap-4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cropper-btn-group {
|
.cropper-btn-group {
|
||||||
@apply flex flex-col gap-2;
|
@apply flex flex-col gap-2;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user