|
|
@@ -1,7 +1,8 @@
|
|
|
<script setup lang="ts">
|
|
|
const props = withDefaults(
|
|
|
defineProps<{
|
|
|
- mode?: "h" | "v" | "horizontal" | "vertical" // 拖拽方向
|
|
|
+ mode?: "h" | "v" | "horizontal" | "vertical" // 布局方向
|
|
|
+ isDrag?: boolean // 是否可以拖拽
|
|
|
size?: number | string // 初始尺寸，支持像素或百分比(如 '50%')
|
|
|
minSize?: number | string // 最小尺寸，支持像素或百分比(如 '10%')
|
|
|
maxSize?: number | string // 最大尺寸，支持像素或百分比(如 '80%')
|
|
|
@@ -17,6 +18,7 @@ const props = withDefaults(
|
|
|
}>(),
|
|
|
{
|
|
|
mode: "h",
|
|
|
+ isDrag: true,
|
|
|
size: 200,
|
|
|
minSize: 100,
|
|
|
maxSize: 2000,
|
|
|
@@ -111,9 +113,16 @@ const containerStyle = computed(() => {
|
|
|
return {
|
|
|
...(props.panelStyle || {}),
|
|
|
"--split-handler-bg": props.handlerBg || "#e5e7eb",
|
|
|
- "--split-handler-hover-bg": props.handlerHoverBg || "#409eff",
|
|
|
+ "--split-handler-hover-bg": props.isDrag
|
|
|
+ ? props.handlerHoverBg || "#409eff"
|
|
|
+ : "var(--split-handler-bg)",
|
|
|
"--split-handler-width": (props.handlerWidth || 6) + "px",
|
|
|
"--split-handler-margin": (props.handlerMargin || 2) + "px",
|
|
|
+ "--split-handler-cursor": props.isDrag
|
|
|
+ ? realMode.value === "horizontal"
|
|
|
+ ? "col-resize"
|
|
|
+ : "row-resize"
|
|
|
+ : "default",
|
|
|
[sizeProp]: finalSize,
|
|
|
[crossProp]: "100%",
|
|
|
display: "flex",
|
|
|
@@ -148,6 +157,7 @@ const secondPanelStyle = computed(() => {
|
|
|
|
|
|
// 拖拽逻辑
|
|
|
const startDrag = (e) => {
|
|
|
+ if (!props.isDrag) return
|
|
|
e.preventDefault()
|
|
|
isDragging.value = true
|
|
|
const startPos = realMode.value === "horizontal" ? e.clientX : e.clientY
|
|
|
@@ -227,6 +237,7 @@ watch(
|
|
|
--split-handler-hover-bg: #409eff;
|
|
|
--split-handler-width: 6px;
|
|
|
--split-handler-margin: 2px;
|
|
|
+ --split-handler-cursor: row-resize;
|
|
|
|
|
|
&.horizontal {
|
|
|
flex-direction: row;
|
|
|
@@ -243,16 +254,17 @@ watch(
|
|
|
transition: background 0.2s;
|
|
|
z-index: 10;
|
|
|
flex-shrink: 0;
|
|
|
+
|
|
|
&.h-handler {
|
|
|
width: var(--split-handler-width);
|
|
|
height: 100%;
|
|
|
- cursor: col-resize;
|
|
|
+ cursor: var(--split-handler-cursor);
|
|
|
margin: 0 var(--split-handler-margin);
|
|
|
}
|
|
|
&.v-handler {
|
|
|
height: var(--split-handler-width);
|
|
|
width: 100%;
|
|
|
- cursor: row-resize;
|
|
|
+ cursor: var(--split-handler-cursor);
|
|
|
margin: var(--split-handler-margin) 0;
|
|
|
}
|
|
|
&:hover {
|
