feat(3d-situational-awareness): 为可折叠面板添加标题点击处理程序
为 CollapsiblePanel 组件添加一个新的“title-click”事件,以允许父组件处理面板标题的点击。在 LeftPanel 中实现此功能,以便在点击“快速匹配”面板标题时触发“force-preset-toggle”事件。
This commit is contained in:
parent
568e89686f
commit
994b237ea4
@ -13,7 +13,11 @@
|
||||
<DisasterAnalysis />
|
||||
</CollapsiblePanel>
|
||||
|
||||
<CollapsiblePanel title="快速匹配" subtitle="「力量预置」">
|
||||
<CollapsiblePanel
|
||||
title="快速匹配"
|
||||
subtitle="「力量预置」"
|
||||
@title-click="handleForcePresetToggle"
|
||||
>
|
||||
<ForcePreset />
|
||||
</CollapsiblePanel>
|
||||
|
||||
@ -110,7 +114,7 @@ const handleCloseVideoModal = () => {
|
||||
}
|
||||
|
||||
// 定义对外事件
|
||||
const emit = defineEmits(['start-dispatch', 'view-plan'])
|
||||
const emit = defineEmits(['start-dispatch', 'view-plan', 'force-preset-toggle'])
|
||||
|
||||
/**
|
||||
* 处理力量调度启动事件,向上传递给父组件
|
||||
@ -125,6 +129,14 @@ const handleStartDispatch = (payload) => {
|
||||
const handleViewPlan = (plan) => {
|
||||
emit('view-plan', plan)
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理快速匹配面板标题点击事件
|
||||
*/
|
||||
const handleForcePresetToggle = () => {
|
||||
console.log('[LeftPanel] 快速匹配标题被点击')
|
||||
emit('force-preset-toggle')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -2,8 +2,7 @@
|
||||
<section class="collapsible-panel" :class="{ 'collapsible-panel--collapsed': isCollapsed }">
|
||||
<div
|
||||
class="collapsible-panel__header"
|
||||
:class="{ 'collapsible-panel__header--clickable': collapsible }"
|
||||
@click="collapsible && toggle()"
|
||||
@click="handleHeaderClick"
|
||||
>
|
||||
<PanelHeader :title="title" :subtitle="subtitle">
|
||||
<template #title-icon>
|
||||
@ -85,7 +84,7 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:collapsed', 'toggle'])
|
||||
const emit = defineEmits(['update:collapsed', 'toggle', 'title-click'])
|
||||
|
||||
// 判断是否受控组件
|
||||
const isControlled = computed(() => props.collapsed !== undefined)
|
||||
@ -108,6 +107,11 @@ const isCollapsed = computed({
|
||||
}
|
||||
})
|
||||
|
||||
// 处理标题点击事件
|
||||
function handleHeaderClick() {
|
||||
emit('title-click')
|
||||
}
|
||||
|
||||
// 切换收起/展开
|
||||
function toggle() {
|
||||
if (!props.collapsible) return
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user