Creator3D 如何继承组件样式 inspector

Creator 3.x
#1

creator1.x, 2.x如下：

const {ccclass, property, requireComponent, executeInEditMode, menu, help, inspector} = cc._decorator;
@ccclass
@menu('i18n:MAIN_MENU.component.ui/UserButton')
@executeInEditMode()
@requireComponent(UserButtonData)
@help('i18n:COMPONENT.help_url.widget')
@inspector('packages://inspector/inspectors/comps/button.js')
export default class UserButton extends cc.Button {

请问 creator3d 中如何使用已有的 Button的 inspector 样式。

#2

暂时还不能使用内置的模版。

如果要自己写的话可以在插件里注册：

在 json 里定义 packages 以及 inspector 指向一个 js 文件：

{
    "name": "my-package",
    "version": "1.0.0",
    "author": "Cocos Creator",

    "menu": {
        "i18n:menu.develop/i18n:engine.compile_engine": {
            "message": "rebuild",
            "group": "engine"
        }
    },

    "main": "./dist/browser/index.js",
    "description": "engine manager",

    "packages": {
        "inspector": "./dist/packages/inspector/index.js"
    }
}

js 文件里定义要使用的模版：


exports.components = {
    'cc.ButtonComponent': {
        template: '<div>{{dump.value.uuid.value}}</div>',
        methods: {},
        watch: {},
        data: {},
    }
};

exports.assets = {};

内置模版的话，我们会在下个版本加上支持～

1赞
#3

请问1.1.1版本有了吗？

#4

如果要用内置的渲染模版，可以这么写：

const path = require('path');
const fs = require('fs');
exports.components = {
    'cc.ButtonComponent': require(path.join(Editor.App.path, './builtin/engine/dist/packages/inspector/components/button')),
};

现有的内置的组件模板：

import * as BatchedSkinningModelComponent from './components/batched-skinning-model';
import * as ButtonComponent from './components/button'; // 上文举例的组件
import * as LayoutComponent from './components/layout';
import * as MaskComponent from './components/mask';
import * as SkeletalAnimationComponent from './components/skeletal-animation';
import * as SliderComponent from './components/slider';
import * as SpotLightComponent from './components/spot-light';
import * as SphereLightComponent from './components/sphere-light';
import * as SpriteComponent from './components/sprite';
import * as TerrainComponent from './components/terrain';
import * as ToggleComponent from './components/toggle';
import * as WidgetComponent from './components/widget';
import * as ParticleSystemComponent from './components/particle-system';

其他组件都是自动渲染出来的。只需要写上属性，自己会渲染出结果。

你们是在做什么功能吖？这部分后续还会进行一些优化，因为现在的开放机制其实不是很好用。如果大家有什么需求，可以提到论坛～这样后续进行机制上的优化的时候，可以更符合大家的期望～

使用场景、需求，或者是希望的使用方式，都可以疯狂吐槽输出哈～～啊哈哈

#5

我们是想扩展组件，比如做个公共按钮，override按钮的_onTouchBegan，每次点击都会播放按钮声音。
自定义组件CommonButton extends ButtonComponent，这样的自定义组件放到编辑器里面inspector会把所有属性都显示出来，跟原本的ButtonComponent不一样。

摸索了一下解决问题了，这样写就ok，2.x版本是没有写ccclass具体内容的，加上对应组件名称就ok了，缺点就是名字必须是原本官方的组件名，能优化一下就好了

@ccclass(‘cc.ButtonComponent’)
@inspector(‘packages://inspector/inspectors/comps/button-component.js’)

#6

嗯嗯，如果是继承自某个组件，其实判断完自己对应的名称没有模版后，就应该判断使用继承链上的组件的模版。
这样连 @inspector 都可以省掉～

谢谢吖～

#7

3.8.2 该怎么继承啊？