如何扩展Button的events那样的inspector?

我希望在属性面板中能拖动某个节点的某个属性的某个方法到脚本中,类似Button的click Event其中一个项目的实现, 但是找遍了文档也没找到如何实现,查阅了github上的engine项目,发现CCButton的实现中用到了inspector: ‘packages://inspector/inspectors/comps/button.js’,但是怎么都早不到button.js文件,请问这样一个需求有人知道如何实现的么?谢谢大家!

1赞

packages://inspector/inspectors/comps/button.js:

"use strict";
Vue.component("cc-button", {
    template: '\n    <ui-prop v-prop="target.target"></ui-prop>\n    <div v-if="target.target.value.uuid" class="horizontal layout end-justified" style="padding:5px 0;margin-bottom:5px;">\n        <ui-button class="blue tiny" @confirm="resetNodeSize">\n          Resize to Target\n        </ui-button>\n    </div>\n    <ui-prop v-prop="target.interactable">\n    </ui-prop>\n    <ui-prop v-prop="target.enableAutoGrayEffect">\n    </ui-prop>\n    <ui-prop v-prop="target.transition"></ui-prop>\n\n    <div v-if="target.transition.value === 1">\n      <ui-prop indent=1 v-prop="target.normalColor"></ui-prop>\n      <ui-prop indent=1 v-prop="target.pressedColor"></ui-prop>\n      <ui-prop indent=1 v-prop="target.hoverColor"></ui-prop>\n      <ui-prop indent=1 v-prop="target.disabledColor"></ui-prop>\n      <ui-prop indent=1 v-prop="target.duration"></ui-prop>\n    </div>\n\n    <div v-if="target.transition.value === 2">\n      <ui-prop indent=1 v-prop="target.normalSprite"></ui-prop>\n      <ui-prop indent=1 v-prop="target.pressedSprite"></ui-prop>\n      <ui-prop indent=1 v-prop="target.hoverSprite"></ui-prop>\n      <ui-prop indent=1 v-prop="target.disabledSprite"></ui-prop>\n    </div>\n\n    <div v-if="target.transition.value === 3">\n      <ui-prop indent=1 v-prop="target.duration"></ui-prop>\n      <ui-prop indent=1 v-prop="target.zoomScale"></ui-prop>\n    </div>\n\n    <cc-array-prop :target.sync="target.clickEvents"></cc-array-prop>\n  ',
    props: {
        target: {
            twoWay: !0,
            type: Object
        }
    },
    methods: {
        T: Editor.T,
        resetNodeSize: function() {
            var t = {
                id: this.target.uuid.value,
                path: "_resizeToTarget",
                type: "Boolean",
                isSubProp: !1,
                value: !0
            };
            Editor.Ipc.sendToPanel("scene", "scene:set-property", t)
        }
    }
});

1赞

谢谢,我找到办法了

怎么做的!(字数补丁)

怎么做的

非组件的类,我这边用重载inspectorUtils的方法,把新增或想改变的vue component注册到系统里的,你可以尝试下

@frosen_lu 大佬可以详细的说下,这个要怎么使用么

首先你要自己定义一个vue组件,类似这样:


这个组件的写法你去抄官方的然后对应着改就行

然后你得重载buildNode这个编辑器的函数

handleCompType里面,把刚才创建的Vue组件对上inspector名字就好

这样就可以自定义数据结构的inspector了

但如果你想修改官方已经定义好的inspector,还得用另一种方法

2赞

感觉好复杂,谢谢指点