refactor(ui): Dropdown/Popover 增加 stretch-trigger,结构树宽度改为组件级解决
antdv-next 的 Dropdown/Popover 触发器不额外包裹 span,block 内容天然撑满; 我们组件因统一挂载事件/ref 用 span.popover-trigger(inline-flex 收缩)包裹, 导致结构树(.mst-tree)只有内容宽度。 参照其语义化定制思路,改为组件提供显式能力而非业务侧 :deep 打补丁: - Popover 新增 stretchTrigger prop:true 时 trigger 加 .popover-trigger--stretch (display:block + width:100%,特异性 0,2,0 高于默认) - Dropdown 透传 stretchTrigger - ModuleStructureTree 使用 stretch-trigger 撑满分组树面板 - 移除 TableEditPanel 的 :deep(.popover-trigger) 覆盖(回归组件自身能力)
This commit is contained in:
1 parent
5e63ef8e50
commit
a1079a7150
5 files changed
+18
-7
No files matched your search
@@ -28,6 +28,8 @@ const props = defineProps({
|
||||
mouseLeaveDelay: { type: Number, default: 200 },
|
||||
/** 与触发器的间距(px) */
|
||||
offset: { type: Number, default: 4 },
|
||||
/** 触发器是否撑满父容器宽度;透传给 Popover(见 Popover.stretchTrigger) */
|
||||
stretchTrigger: { type: Boolean, default: false },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:open', 'openChange', 'click'])
|
||||
@@ -178,6 +180,7 @@ provide('dropdownActiveIndex', activeIndex)
|
||||
:disabled="disabled"
|
||||
:arrow="false"
|
||||
:offset="offset"
|
||||
:stretch-trigger="stretchTrigger"
|
||||
:mouse-enter-delay="mouseEnterDelay"
|
||||
:mouse-leave-delay="mouseLeaveDelay"
|
||||
@update:open="onOpenChange"
|
||||
|
||||
@@ -4,6 +4,12 @@
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
/* 触发器撑满父容器(stretch-trigger):结构树等需要占满整行可用宽度的场景 */
|
||||
.popover-trigger--stretch {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 在完整轮廓上统一投影,让箭头和主体拥有连续的视觉重量。 */
|
||||
.popover {
|
||||
position: fixed;
|
||||
|
||||
@@ -35,6 +35,10 @@ const props = defineProps({
|
||||
/** 浮层宽度是否严格跟随触发器宽度。
|
||||
用于 Select 等需与触发框等宽对齐的场景;默认 false 由内容自适应撑开。 */
|
||||
followTriggerWidth: { type: Boolean, default: false },
|
||||
/** 触发器是否撑满父容器宽度(display:block + width:100%)。
|
||||
默认 false(inline-flex 收缩到内容宽度,适配按钮/图标触发器);
|
||||
需要触发器占据整行可用宽度的场景(如结构树)设为 true。 */
|
||||
stretchTrigger: { type: Boolean, default: false },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:open', 'openChange'])
|
||||
@@ -248,6 +252,7 @@ onBeforeUnmount(() => {
|
||||
<span
|
||||
ref="triggerEl"
|
||||
class="popover-trigger"
|
||||
:class="{ 'popover-trigger--stretch': stretchTrigger }"
|
||||
@click="onClick"
|
||||
@contextmenu="onContextMenu"
|
||||
@mouseenter="onMouseEnter"
|
||||
|
||||
+4
-1
@@ -637,11 +637,14 @@ provide('moduleStructureTree', {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 右键菜单:Dropdown 以鼠标位置为锚点弹出,节点 contextmenu 冒泡至此触发 -->
|
||||
<!-- 右键菜单:Dropdown 以鼠标位置为锚点弹出,节点 contextmenu 冒泡至此触发;
|
||||
stretch-trigger:Popover trigger 默认 inline-flex 收缩到内容宽度,
|
||||
结构树需撑满分组树面板,故显式撑开 -->
|
||||
<Dropdown
|
||||
trigger="contextmenu"
|
||||
placement="bottom-start"
|
||||
:items="contextItems"
|
||||
stretch-trigger
|
||||
@click="onMenuItemClick"
|
||||
>
|
||||
<div class="mst-tree" role="tree" @keydown="onTreeKeydown" @dragleave="onRootDragLeave">
|
||||
|
||||
-6
@@ -919,12 +919,6 @@ function switchView(mode) {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
/* 结构树外层是 Dropdown→Popover 的 span.popover-trigger(inline-flex,收缩到内容宽度),
|
||||
会导致 .mst-tree 只有内容宽。这里把它撑开成 block,让树填满可用宽度 */
|
||||
:deep(.popover-trigger) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.mm-fdesign__tree-empty {
|
||||
padding: 12px 8px;
|
||||
|
||||
Reference in new issue
Block a user