HumanBreak/docs/api/user-client-modules/组件 FloorSelector.md

FloorSelector 楼层选择器组件 API 文档

本文档由 DeepSeek R1 模型生成并微调。

组件描述

楼层选择器组件用于在地图浏览或地图选择场景中切换不同楼层，其尺寸与内置状态栏组件匹配，适合在地图浏览时将状态栏替换为此组件。

---

Props 属性说明

属性名	类型	默认值	描述
floors	FloorIds[]	必填	可选择的楼层 ID 数组
now	number	-	当前选中的楼层索引

---

Events 事件说明

事件名	参数类型	触发时机
close	-	点击关闭按钮时触发
update	(floor: number, floorId: FloorIds)	当选中的楼层改变时触发
update:now	(value: number)	v-model 双向绑定事件

---

Slots 插槽说明

无插槽

---

Exposed Methods 暴露方法

无暴露方法

---

使用示例

基础用法 - 地图浏览界面

import { defineComponent, ref } from 'vue';
import { FloorSelector, STATUS_BAR_HEIGHT } from '@user/client-modules';

export const MapBrowserCom = defineComponent(() => {
    const currentFloor = ref(0);

    // 可用的楼层列表
    const availableFloors = core.floorIds;

    const handleFloorChange = (floorIndex: number, floorId: string) => {
        console.log(`切换到楼层: ${floorId} (索引: ${floorIndex})`);
        // 这里可以执行切换楼层的逻辑
    };

    const handleClose = () => {
        console.log('关闭楼层选择器');
        // 返回主界面或执行其他关闭逻辑
    };

    return () => (
        <FloorSelector
            loc={[0, 0, 180, STATUS_BAR_HEIGHT]}
            floors={availableFloors}
            v-model:now={currentFloor.value}
            onUpdate={handleFloorChange}
            onClose={handleClose}
        />
    );
});

---

注意事项

1. 尺寸匹配: 组件设计为与内置状态栏尺寸匹配，可直接替换
2. 索引基准: 楼层索引从 0 开始
3. 内置集成: 通常不需要直接使用，因为样板已内置完整的地图浏览界面
4. 倒序排列: 楼层列表会自动倒序排列