对上一版进行优化:已收起卡片,点击边缘也可以展开
This commit is contained in:
parent
a44a8a0331
commit
5818735df2
|
|
@ -3,9 +3,9 @@
|
||||||
<a-row style="margin-top: -4px;">
|
<a-row style="margin-top: -4px;">
|
||||||
<a-col v-for="(item, index) in nuInfos" style="padding:7px 7px;" :key="index" :span="24">
|
<a-col v-for="(item, index) in nuInfos" style="padding:7px 7px;" :key="index" :span="24">
|
||||||
<a-card :class="['card-3d', { 'card-collapsed': expandedCard !== item.nuId }]"
|
<a-card :class="['card-3d', { 'card-collapsed': expandedCard !== item.nuId }]"
|
||||||
style="height: auto; min-height: 320px;">
|
style="height: auto; min-height: 320px;" @click="handleCardClick(item.nuId, $event)">
|
||||||
<!-- 卡片头部:可点击展开 -->
|
<!-- 卡片头部:可点击展开 -->
|
||||||
<div class="card-header" @click="expandCard(item.nuId)">
|
<div class="card-header">
|
||||||
<div class="left-area">
|
<div class="left-area">
|
||||||
<div class="left-area">
|
<div class="left-area">
|
||||||
<div class="region-name">名称:{{ item.nuName }}</div>
|
<div class="region-name">名称:{{ item.nuName }}</div>
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 卡片内容:只有展开的卡片才显示 -->
|
<!-- 卡片内容:只有展开的卡片才显示 -->
|
||||||
<div class="card-content" v-if="expandedCard === item.nuId">
|
<div class="card-content" v-if="expandedCard === item.nuId" @click.stop>
|
||||||
<!-- 上半部分:左右布局 -->
|
<!-- 上半部分:左右布局 -->
|
||||||
<div class="top-section">
|
<div class="top-section">
|
||||||
<!-- 右侧:其他内容区域 -->
|
<!-- 右侧:其他内容区域 -->
|
||||||
|
|
@ -168,6 +168,25 @@ const disabled = computed(() => {
|
||||||
return props.formDisabled;
|
return props.formDisabled;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 处理卡片点击(阻止内部元素的冒泡)
|
||||||
|
function handleCardClick(nuId: string, event: Event) {
|
||||||
|
// 检查点击目标是否可能是可交互元素
|
||||||
|
const target = event.target as HTMLElement;
|
||||||
|
const isInputElement = target.tagName === 'INPUT' ||
|
||||||
|
target.tagName === 'BUTTON' ||
|
||||||
|
target.closest('.ant-input-number') ||
|
||||||
|
target.closest('.ant-checkbox-wrapper') ||
|
||||||
|
target.closest('button');
|
||||||
|
|
||||||
|
// 如果点击的是输入框、按钮等交互元素,且当前卡片是展开状态,则不触发展开/收起
|
||||||
|
if (isInputElement && expandedCard.value === nuId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 否则执行展开/收起逻辑
|
||||||
|
expandCard(nuId);
|
||||||
|
}
|
||||||
|
|
||||||
// 展开/收起卡片
|
// 展开/收起卡片
|
||||||
function expandCard(nuId: string) {
|
function expandCard(nuId: string) {
|
||||||
// 如果点击的是已经展开的卡片,则收起
|
// 如果点击的是已经展开的卡片,则收起
|
||||||
|
|
@ -413,6 +432,7 @@ defineExpose({
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 鼠标悬停效果 */
|
/* 鼠标悬停效果 */
|
||||||
|
|
@ -438,12 +458,12 @@ defineExpose({
|
||||||
transition: padding 0.3s ease;
|
transition: padding 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 卡片头部 */
|
/* 卡片头部的鼠标样式 */
|
||||||
.card-header {
|
.card-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
cursor: pointer;
|
cursor: inherit;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -595,6 +615,7 @@ defineExpose({
|
||||||
|
|
||||||
/* 强制 checkbox 文字显示为黑色 */
|
/* 强制 checkbox 文字显示为黑色 */
|
||||||
.right-area {
|
.right-area {
|
||||||
|
|
||||||
:deep(.ant-checkbox-wrapper),
|
:deep(.ant-checkbox-wrapper),
|
||||||
:deep(.ant-checkbox-wrapper-disabled),
|
:deep(.ant-checkbox-wrapper-disabled),
|
||||||
:deep(.ant-checkbox + span),
|
:deep(.ant-checkbox + span),
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue