[JavaScript知识库]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属性是不可行的，读者可以自行尝试下