box-client/assets/script/core/view/JMButton.js

/**
 * 嘉米自定义按钮
 */
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'
        };
    }
});