import { Component, EventHandler, Node, SystemEventType, _decorator } from "cc"; const { ccclass, property } = _decorator; /** * 选项卡组件 * @author 袁浩 */ @ccclass("Tabbar") export class Tabbar extends Component { @property({ tooltip: "选中后显示的节点", type: Node }) public checkedNode: Node; @property({ tooltip: "未选中显示的节点", type: Node }) public uncheckedNode: Node; @property({ tooltip: "分组" }) public group: string = 'tabbar'; @property({ visible: false }) private _isChecked = false; @property({ tooltip: "是否选中" }) public get isChecked(): boolean { return this._isChecked; } public set isChecked(value: boolean) { this._isChecked = value; this.checkedNode && (this.checkedNode.active = true); this.uncheckedNode && (this.uncheckedNode.active = false); } @property({ tooltip: "选中回调", type: EventHandler }) public checkEvents: EventHandler[] = []; private static groupData: Map> = new Map>(); start() { this.checkData.set(this, this.isChecked); this.uncheckedNode.on(SystemEventType.TOUCH_END, this.onUnChecked, this); } onDestroy() { this.checkData.delete(this); } get checkData() { let checkData = Tabbar.groupData.get(this.group); checkData = checkData || new Map(); Tabbar.groupData.set(this.group, checkData); return checkData; } private onUnChecked() { this.checkData.forEach((isChecked: boolean, tabbar: Tabbar) => { if (tabbar == this) { if (!this._isChecked && this.checkEvents) { for (let i = 0; i < this.checkEvents.length; i++) { this.checkEvents[i].emit([this]); } } this._isChecked = true; this.checkedNode.active = true; this.uncheckedNode.active = false; } else { tabbar.checkedNode.active = false; tabbar.uncheckedNode.active = true; tabbar._isChecked = false; } }); } }