refactor(3d-situational-awareness): 将 MapControls 的 activeTool 属性设为 prop 可控。

将 `activeTool` 从内部引用 (`ref`) 更改为基于 `activeToolKey` 的计算属性,从而允许父组件控制活跃工具的状态,以提高复用性。
This commit is contained in:
Zzc 2025-11-25 14:45:15 +08:00
parent 994b237ea4
commit 4da6b6c20b
2 changed files with 27 additions and 10 deletions

View File

@ -41,14 +41,23 @@
</template>
<script setup>
import { ref } from "vue";
import { ref, computed } from "vue";
import { MAP_TOOLS, DEVICE_WATCH } from "../../constants";
// props
const props = defineProps({
//
activeToolKey: {
type: String,
default: null
}
})
//
const isWatchingDevice = ref(false);
//
const activeTool = ref('modelCompare');
// - 使computedprops
const activeTool = computed(() => props.activeToolKey)
//
const emit = defineEmits(["device-watch", "tool-change"]);
@ -105,15 +114,13 @@ const handleDeviceWatch = () => {
*/
const handleToolClick = (toolKey) => {
//
if (activeTool.value === toolKey) {
activeTool.value = null;
} else {
activeTool.value = toolKey;
}
console.log("切换地图工具:", toolKey);
const newActiveState = activeTool.value === toolKey ? null : toolKey
const isActive = newActiveState === toolKey
console.log("切换地图工具:", toolKey, "激活状态:", isActive);
emit("tool-change", {
tool: toolKey,
active: activeTool.value === toolKey,
active: isActive,
});
};
</script>

View File

@ -7,6 +7,7 @@
<!-- 延迟渲染确保目标元素已存在 -->
<Teleport to="#sa-controls" v-if="isMounted">
<MapControls
:active-tool-key="activeToolKey"
@tool-change="handleToolChange"
@device-watch="handleDeviceWatch"
/>
@ -19,6 +20,15 @@ import { ref, onMounted } from 'vue'
import { MapViewport } from '@/map'
import MapControls from './MapControls.vue'
// props
const props = defineProps({
//
activeToolKey: {
type: String,
default: null
}
})
/**
* 向外抛出的事件
* @event tool-change - 地图工具变化事件包含 { tool: string, active: boolean }