/** * 嘉米自定义按钮 */ cc.Class({ extends: cc.Component, editor: { executeInEditMode: true, menu: '嘉米公用/JMButton' }, properties: { spriteNameFormat: 'btn_label_a1_%s', button: { default: undefined, type: cc.Button, tooltip: '按钮句柄' }, sprite: { default: undefined, type: cc.Sprite, tooltip: '按钮背景' }, label: { default: undefined, type: cc.RichText, tooltip: '按钮标题富文本' }, spriteAtlas: { default: undefined, type: cc.SpriteAtlas, tooltip: '背景所在的 atlas:unt_btn' }, buttonType: { type: JMC.BUTTON_TYPE, get () { return this._buttonType; }, set (value) { if (this._buttonType !== value) { this._buttonType = value; if (CC_EDITOR) { this._debouncedUpdateSprite(); } else { this._updateSprite(); } } }, tooltip: '按钮类型。修改时,自动刷新按钮背景的 SpriteFrame' }, _buttonType: { default: JMC.BUTTON_TYPE.GREEN, type: JMC.BUTTON_TYPE }, interactable: { type: cc.Boolean, get () { return this._interactable; }, set (value) { if (this.button) { this.button.interactable = value; } if (this._interactable !== value) { this._interactable = value; if (CC_EDITOR) { this._debouncedUpdateLabel(); } else { this._updateLabel(); } } }, tooltip: 'Interactabel将同步Button的Interactabel值,同时影响richText的文案展示。注意:请不要直接操作Button的Interactabel值' }, _interactable: true, title: { type: cc.String, get () { return this._title; }, set (value) { if (this._title !== value) { this._title = value; if (CC_EDITOR) { this._debouncedUpdateLabel(); } else { this._updateLabel(); } } }, tooltip: 'Interactabel是true时,richText展示的文案。但是,如果Disabled Title是空,则还是展示Title', multiline: true }, _title: '按钮', disabledTitle: { type: cc.String, get () { return this._disabledTitle; }, set (value) { if (this._disabledTitle !== value) { this._disabledTitle = value; if (CC_EDITOR) { this._debouncedUpdateLabel(); } else { this._updateLabel(); } } }, tooltip: 'Interactabel是false时,richText展示的文案。但是,如果是空,则展示Title', multiline: true }, _disabledTitle: '' }, onLoad () { if (CC_EDITOR) { this._debouncedUpdateSprite = G.ViewUtils.debounce(this._updateSprite, 200); this._debouncedUpdateLabel = G.ViewUtils.debounce(this._updateLabel, 200); } this._updateSprite(); this._updateLabel(); }, /** * 添加按钮点击事件回调 * * @author Pyden * @date 2019-03-21 * @param {cc.Component.EventHandler} clickEventHandler */ pushClickEvent (clickEventHandler) { if (!this.button) { return; } this.button.clickEvents.push(clickEventHandler); }, // ---------------- 私有方法分割线 ---------------- /** * 刷新按钮背景 * * @author Pyden * @date 2019-03-21 */ _updateSprite () { if (!this.sprite) { return; } if (!this.spriteAtlas) { return; } let spriteName = this._getSpriteName(this.buttonType); this.sprite.spriteFrame = this.spriteAtlas.getSpriteFrame(spriteName); }, /** * 刷新标题文案 * * @author Pyden * @date 2019-03-21 */ _updateLabel () { if (!this.label) { return; } this.button.interactable = this._interactable; if (this.disabledTitle.length > 0 && !this.interactable) { this.label.string = this.disabledTitle; } else { this.label.string = this.title; } }, /** * 各个按钮类型映射spriteFrameName的字典 * * @author Pyden * @date 2019-03-21 * @param {JMC.BUTTON_TYPE} buttonType 按钮类型 * @returns {string} 精灵名称 */ _getSpriteName (buttonType) { let map = this._getSpriteNameMap(); let spriteName = map[buttonType]; spriteName = cc.js.formatStr(this.spriteNameFormat, spriteName); return spriteName; }, /** * 各个按钮类型映射spriteFrameName的字典 * * @author Pyden * @date 2019-03-21 * @returns {map} */ _getSpriteNameMap () { return { [JMC.BUTTON_TYPE.GREEN]: 'green', [JMC.BUTTON_TYPE.JU_HUANG]: 'juhuang', [JMC.BUTTON_TYPE.YELLOW]: 'yellow' }; } });