请问properties是否可以支持复杂一些的对象?

扩展Inspector的时候想定义一个a:[{x,y,z}]这样的数组,然后在Vue中用target.a.value.0.x这种方式来访问数据并展现,但是下面这样的定义无法做到,试来试去Vue中的target.a都是cc-null-prop或者type-error:

properties: {
    a: []
},
onLoad() {
    this.a.push({x:1,y:1,z:1});
}

后来尝试自己写了一个类去继承cc.ValueType,但是必须写成这样才能在Vue中访问,否则就会各种报错:

export function A(x, y, z) {
    this.x = {value: x, type: cc.Integer}; // 而不是this.x = x;
    this.y = {value: y, type: cc.Integer};
    this.z = {value: z, type: cc.Integer};
}
cc.js.extend(A, cc.ValueType);
fastDefine('cc.A', A, {x: 1, y: 1, z: 1});
A.prototype.clone = function () {
    return new A(this.x, this.y, this.z);
};
-------------------------------------------------------------------------------
properties: {
    a: [],
    type: A
},
onLoad() {
    this.a.push(new A(1,1,1));
}

虽然现在这样Hack可以在Vue中拿到数据了,但是我想问,怎样才是正确的做法?为什么cc.Size等自带的ValueType子类的构造函数里赋值不用写成{value: …}的形式?谢谢!
@karasaya

找到办法了,要用Editor.UI.registerProperty(“cc.A”,{…})定义一下。

type 可以是自定义的其它 CCClass
例如

properties: {
    typeedArray: {
        default: [],
        type: cc.Class({
            properties: {x: 1, y: 1, z: 1}
        })
    }
}
4赞

多谢Jare大神!

如果复杂类型是非ValueType类型怎么处理呢?
如:

cc.Class({
    extends: cc.Component,

    editor: CC_EDITOR && {
        executeInEditMode: true,
        disallowMultiple: true,
        playOnFocus: true,
        inspector: 'packages://***/**.js',
    },
    properties: {
        particleAnimation: {
            default: false,
            animatable: false,
        },
        ParicleAnimation: {
            default: null,
            type: ParitcleAnimation
        },

    },
    ctor() {
        this.ParicleAnimation = new ParitcleAnimation();
    },
});
const ParitcleAnimation = cc.Class({
    name: 'ParitcleAnimation',
    properties: {
        circle: {
            default: 1,
            type: cc.Integer
        },
        sprites: {
            default: [],
            type: [cc.SpriteFrame]
        },
    },
    ctor: function (mode, circle, sprites, startFrame) {
        this.circle = circle||1;
        this.sprites = sprites||[];
    }
});

在模板中

<ui-prop indent=1   v-prop="target.particleAnimation"    ></ui-prop>  
<div v-if="_isParticleAnimation(target.particleAnimation,true,multi)" class="horizontal layout end-justified" style="padding:5px 0;margin-bottom:5px;">
    <ui-prop v-prop="target.ParicleAnimation.circle" ></ui-prop>
    <ui-button id="btn">Test</ui-button>
</div>

一直报错TypeError: Cannot read property ‘name’ of undefined

我没看懂这个报错,有详细的行号吗?

主要是因为

<ui-prop v-prop="target.ParicleAnimation.circle" ></ui-prop>

才报错

Uncaught (in promise) TypeError: Cannot read property ‘name’ of undefined
at Directive.update (C:\CocosCreator\resources\app.asar\editor\page\ui\vue-utils.js:1)
at Directive._bind (vue.js:8357)
at linkAndCapture (vue.js:6925)
at compositeLinkFn (vue.js:6901)
at new Fragment (vue.js:3761)
at FragmentFactory.create (vue.js:3978)
at Directive.insert (vue.js:4642)
at Directive.update (vue.js:4626)
at Directive._bind (vue.js:8357)
at linkAndCapture (vue.js:6925)

这就不太清楚了,可能模板写错了吧