CocosCreator 2.4.3 TypeScript 扩展cc.Button

参考文章：扩展 Inspector · Cocos Creator

Cocos Creator 扩展内置组件(含 inspector 扩展)新手教程，私货分享 - Creator - Cocos中文社区

如果你动手扩展过，那么你应该就能发现问题了，cc.Button的所有属性都暴露了出来，并不能像原来cc.Button那样，看了上面的文章知道了要添加inspector。

我的初衷是不想在每个cc.Button的'click'事件里去播放点击音效，所以想在代码里直接添加，发现扩展cc.Button并不简单。下面写下自己的测试步骤吧。

1、建议去看下CCButton.js，要扩展cc.Button必然要看源码的，从源码里也可以看到inspector，如下图：

如果我们仅仅想从代码层扩展，不改变cc.Button在cocoscreator编辑器中的样式的话，就没必要走下面2、3的步骤了，比如说我仅仅想在点击生效的时候添加点击音效，那么扩展cc.Button的时候用原来cc.Button的inspector即可如下图所示

这个inspector.js路径是从cc.Button里复制的。 

我想在按钮点击的时候播放音效，我是通过覆盖_onTouchEnded方法实现的，如下图：

 2、如果你想改变样式，就需要去看下：扩展 Inspector · Cocos Creator 了解下inspector是什么，由于我并不懂VUE，这个inspector就不做介绍了

3、如果想改变样式，肯定要从原来样式上去修改，那么就需要复制原cc.Button的inspector代码然后修改，下面是复制原cc.Button的inspector的方法

【1】打开cocoscreator 编辑器

【2】在任意场景中添加一个Button组件，然后按下图操作即可

 【3】源码如下

"use strict";
Vue.component("cc-button", {
    dependencies: ["packages://inspector/share/gray-material.js"],
    template: `
    <ui-prop v-prop="target.target"
    :multi-values="multi"
    ></ui-prop>
    <div class="horizontal layout end-justified" style="padding:5px 0;margin-bottom:5px;">
    <ui-button class="blue tiny"
        @confirm="resetNodeSize"
        v-disabled="_checkResizeToTarget(target.target, multi)"
    >
        Resize to Target
    </ui-button>
    </div>
    <ui-prop
    v-prop="target.interactable"
    :multi-values="multi"
    >
    <div v-if="_checkTransition(target.transition, 2, multi)">

    </div>
    <ui-prop
    v-prop="target.enableAutoGrayEffect"
    v-show="_autoGrayEffectEnabled()"
    :multi-values="multi"
    ></ui-prop>
    <ui-prop
    v-prop="target.transition"
    :multi-values="multi"
    ></ui-prop>
    <div v-if="_checkTransition(target.transition, 1, multi)">
    <ui-prop indent=1
        v-prop="target.normalColor"
        :multi-values="multi"
    ></ui-prop>
    <ui-prop indent=1
        v-prop="target.pressedColor"
        :multi-values="multi"
    ></ui-prop>
    <ui-prop indent=1
        v-prop="target.hoverColor"
        :multi-values="multi"
    ></ui-prop>
    <ui-prop indent=1
        v-prop="target.disabledColor"
        :multi-values="multi"
    ></ui-prop>
    <ui-prop indent=1
        v-prop="target.duration"
        :multi-values="multi"
    ></ui-prop>
    </div>
    <div v-if="_checkTransition(target.transition, 2, multi)">
    <ui-prop indent=1
        v-prop="target.normalSprite"
        :multi-values="multi"
    ></ui-prop>
    <ui-prop indent=1
        v-prop="target.pressedSprite"
        :multi-values="multi"
    ></ui-prop>
    <ui-prop indent=1
        v-prop="target.hoverSprite"
        :multi-values="multi"
    ></ui-prop>
    <ui-prop indent=1
        v-prop="target.disabledSprite"
        :multi-values="multi"
    ></ui-prop>
    </div>
    <div v-if="_checkTransition(target.transition, 3, multi)">
    <ui-prop indent=1
        v-prop="target.duration"
        :multi-values="multi"
    ></ui-prop>
    <ui-prop indent=1
        v-prop="target.zoomScale"
        :multi-values="multi"
    ></ui-prop>
    </div>
    <cc-array-prop :target.sync="target.clickEvents"></cc-array-prop>
`,
    props:
    {
        target: { twoWay: !0, type: Object }, multi: { type: Boolean },
    },
    methods:
    {
        T: Editor.T,
        resetNodeSize() {
            const t = { id: this.target.uuid.value, path: "_resizeToTarget", type: "Boolean", isSubProp: !1, value: !0 };
            Editor.Ipc.sendToPanel("scene", "scene:set-property", t);
        },
        _autoGrayEffectEnabled() {
            return !(1 === this.target.transition.value || 2 === this.target.transition.value && this.target.disabledSprite.value.uuid);
        },
        _checkResizeToTarget: (t, n) => !!n || !t.value.uuid,
        _checkTransition: (t, n, i) => i ? t.values.every(t => t === n) : t.value === n,
    },
});

4、根据参考上面的文章：Cocos Creator 扩展内置组件(含 inspector 扩展)新手教程，私货分享 - Creator - Cocos中文社区

我也像作者那样只添加了按钮音效的资源，如下图所示

 

就多了audio-clip，其它跟cc.Button一样，添加的时候检查下是否绑定了按钮的target

5、代码里添加添加属性，接受cc.AudioClip即可

如果不修改inspector里仅仅在代码里添加audioClip属性是不可行的，读者可以自行尝试下。

源码奉献：（CustomButton.ts）

const { ccclass, property, inspector, menu } = cc._decorator;

//扩展参数
export class cEventHandler extends cc.Component.EventHandler {
    callback: Function
}

@ccclass
@inspector("packages://custom-component/button/inspector.js")
@menu("i18n:MAIN_MENU.component.ui/CustomButton")
export default class CustomButton extends cc.Button {
    @property({
        type: cc.AudioClip,
        displayName: "Audio",
        tooltip: CC_DEV && "按钮触发时播放的音频剪辑",
    })
    private audioClip: cc.AudioClip = null;
    onLoad() {
        if (this.audioClip == null) {
            cc.resources.load("audioClips/btn_click", cc.AudioClip, (err, clip: cc.AudioClip) => {
                if (clip) {
                    this.audioClip = clip;
                }
            });
        }
    }

    _onTouchEnded(event) {
        if (!this.interactable || !this.enabledInHierarchy) return;

        let _pressed = this['_pressed'];
        if (_pressed) {
            cc.Component.EventHandler.emitEvents(this.clickEvents, event);
            if (this.audioClip) {
                cc.audioEngine.playEffect(this.audioClip, false);
            }
            this.node.emit('click', this);
        }
        this['_pressed'] = false;
        this["_updateState"]();
        event.stopPropagation();
    }

    addSpriteButtonCallback(callback: Function, customEventData: string = "", duration = 0.1, zoomScale = 1.2) {
        this.target = this.node;
        this.transition = cc.Button.Transition.SCALE;
        this.duration = duration;
        this.zoomScale = zoomScale;

        var clickEventHandler = new cEventHandler();
        clickEventHandler.target = this.node;
        clickEventHandler.component = CustomButton.name;// 这个是代码文件名
        clickEventHandler.handler = "onButtonClick";
        clickEventHandler.customEventData = customEventData;
        clickEventHandler.callback = callback;

        this.clickEvents.push(clickEventHandler);
    }
    onButtonClick(event, customEventData) {
        for (let i = this.clickEvents.length - 1; i >= 0; --i) {
            let clickEvent = this.clickEvents[i] as cEventHandler;
            if (clickEvent.callback) {
                clickEvent.callback(clickEvent.customEventData);
            }
        }
    }
}

使用：

支持编辑器添加clickEvents和代码添加按钮事件，同时添加则都生效。