修复DockIndicator指示器位置移动问题和层级显示问题
This commit is contained in:
@@ -91,7 +91,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 内容区域 -->
|
<!-- 内容区域 -->
|
||||||
<div class="vs-content">
|
<div class="vs-content">
|
||||||
<!-- 这里是内容区域,使用slot接收子组件,并监听Panel的maximize事件 -->
|
<!-- 这里是内容区域,使用slot接收子组件,并监听Panel的maximize事件 -->
|
||||||
<slot @maximize="onPanelMaximize"></slot>
|
<slot @maximize="onPanelMaximize"></slot>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -176,6 +176,26 @@
|
|||||||
clip-rule="evenodd"
|
clip-rule="evenodd"
|
||||||
d="M10 14 L30 14 L30 30 L10 30 Z" />
|
d="M10 14 L30 14 L30 30 L10 30 Z" />
|
||||||
</svg>
|
</svg>
|
||||||
|
<!-- 中心指示区 -->
|
||||||
|
<svg
|
||||||
|
width="185"
|
||||||
|
height="185"
|
||||||
|
viewBox="0 0 185 185"
|
||||||
|
aria-hidden="true"
|
||||||
|
class="indicator-top"
|
||||||
|
style="position: relative; left: 400px; top: 300px;"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill="#636873"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M0 72 L63 72 L72 63 L72 0 L113 0 L113 63 L123 72 L185 72 L185 113 L123 113 L113 123 L113 185 L72 185 L72 123 L63 113 L0 113 Z" />
|
||||||
|
<path
|
||||||
|
fill="#D5DCF0"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M1 73 L64 73 L73 64 L73 1 L112 1 L112 64 L122 73 L184 73 L184 112 L122 112 L112 122 L112 184 L73 184 L73 122 L64 112 L1 112 Z" />
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -348,6 +368,7 @@ watch(activeDockZone, (newZone) => {
|
|||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
opacity: 0.7; /* 默认半透明 */
|
opacity: 0.7; /* 默认半透明 */
|
||||||
transition: opacity 0.2s;
|
transition: opacity 0.2s;
|
||||||
|
z-index: 9999; /* 确保在预览区域上方 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 右指示器:定位在目标区域的右侧中间,右边缘距dock-layout右边缘5像素 */
|
/* 右指示器:定位在目标区域的右侧中间,右边缘距dock-layout右边缘5像素 */
|
||||||
@@ -358,6 +379,7 @@ watch(activeDockZone, (newZone) => {
|
|||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
opacity: 0.7; /* 默认半透明 */
|
opacity: 0.7; /* 默认半透明 */
|
||||||
transition: opacity 0.2s;
|
transition: opacity 0.2s;
|
||||||
|
z-index: 9999; /* 确保在预览区域上方 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 下指示器:定位在目标区域的底部中间,下边缘距dock-layout下边缘5像素 */
|
/* 下指示器:定位在目标区域的底部中间,下边缘距dock-layout下边缘5像素 */
|
||||||
@@ -368,6 +390,7 @@ watch(activeDockZone, (newZone) => {
|
|||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
opacity: 0.7; /* 默认半透明 */
|
opacity: 0.7; /* 默认半透明 */
|
||||||
transition: opacity 0.2s;
|
transition: opacity 0.2s;
|
||||||
|
z-index: 9999; /* 确保在预览区域上方 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 左指示器:定位在目标区域的左侧中间,左边缘距dock-layout左边缘5像素 */
|
/* 左指示器:定位在目标区域的左侧中间,左边缘距dock-layout左边缘5像素 */
|
||||||
@@ -378,6 +401,7 @@ watch(activeDockZone, (newZone) => {
|
|||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
opacity: 0.7; /* 默认半透明 */
|
opacity: 0.7; /* 默认半透明 */
|
||||||
transition: opacity 0.2s;
|
transition: opacity 0.2s;
|
||||||
|
z-index: 9999; /* 确保在预览区域上方 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 中心指示器:定位在目标区域的中心 */
|
/* 中心指示器:定位在目标区域的中心 */
|
||||||
@@ -388,16 +412,29 @@ watch(activeDockZone, (newZone) => {
|
|||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
opacity: 0.7; /* 默认半透明 */
|
opacity: 0.7; /* 默认半透明 */
|
||||||
transition: opacity 0.2s;
|
transition: opacity 0.2s;
|
||||||
|
z-index: 9999; /* 确保在预览区域上方 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 活动状态样式 */
|
/* 活动状态样式 */
|
||||||
.indicator-top.active,
|
.indicator-top.active {
|
||||||
.indicator-right.active,
|
opacity: 1; /* 完全不透明 */
|
||||||
.indicator-bottom.active,
|
transform: translateX(-50%) scale(1.1); /* 保持水平居中的同时放大 */
|
||||||
.indicator-left.active,
|
}
|
||||||
|
.indicator-right.active {
|
||||||
|
opacity: 1; /* 完全不透明 */
|
||||||
|
transform: translateY(-50%) scale(1.1); /* 保持垂直居中的同时放大 */
|
||||||
|
}
|
||||||
|
.indicator-bottom.active {
|
||||||
|
opacity: 1; /* 完全不透明 */
|
||||||
|
transform: translateX(-50%) scale(1.1); /* 保持水平居中的同时放大 */
|
||||||
|
}
|
||||||
|
.indicator-left.active {
|
||||||
|
opacity: 1; /* 完全不透明 */
|
||||||
|
transform: translateY(-50%) scale(1.1); /* 保持垂直居中的同时放大 */
|
||||||
|
}
|
||||||
.indicator-center.active {
|
.indicator-center.active {
|
||||||
opacity: 1; /* 完全不透明 */
|
opacity: 1; /* 完全不透明 */
|
||||||
transform: scale(1.1); /* 稍微放大 */
|
transform: translate(-50%, -50%) scale(1.1); /* 保持中心居中的同时放大 */
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -30,3 +30,6 @@
|
|||||||
|
|
||||||
### 激活组件规则
|
### 激活组件规则
|
||||||
|
|
||||||
|
### 停靠规则
|
||||||
|
1. 当一个Panel被拖动时,显示停靠指示器。
|
||||||
|
2. 当拖动Panel到指示器时,显示停靠区。
|
||||||
Reference in New Issue
Block a user