Cocos Creator-6.TS-属性检查器

前言

有关于此部分,是由于我当时一个数组节点的属性,可是多次尝试,奈何不会,只好查阅大量网络资源,终于得了。自定义属性,确实是了不起,极大的便利了开发

直击主题吧!!大开大合

一、源码

export function property(options?: {type?: any; visible?: boolean|(() => boolean); displayName?: string; tooltip?: string; multiline?: boolean; readonly?: boolean; min?: number; max?: number; step?: number; range?: number[]; slide?: boolean; serializable?: boolean; formerlySerializedAs?: string; editorOnly?: boolean; override?: boolean; animatable?: boolean} | any[]|Function|cc.ValueType|number|string|boolean): Function;
export function property(_target: Object, _key: any, _desc?: any): void;	

//可选参数
(parameter) options: string | number | boolean | Function | any[] | {
    type?: any;//类型
    visible?: boolean | (() => boolean);//可见与否
    displayName?: string;//编辑器的名字
    tooltip?: string;//提示框
    multiline?: boolean;//文本多行
    readonly?: boolean;//只读,前面加个锁,不可编辑
    min?: number;//最小值
    max?: number;//最大值
    step?: number;//步长
    range?: number[]; //相当于[min,max,step],这样更为简洁(推荐)
    slide?: boolean;//slide为true,代表这个为滑块,上面的max,min,range,step都无用了。
    serializable?: boolean;//可序列化
    formerlySerializedAs?: string;//以前序列化为
    editorOnly?: boolean;//仅限编辑
    override?: boolean;//重写
    animatable?: boolean;//动画
} | ValueType

二、一些实例

//声明数组属性
@property([cc.Node])
shuzu_node: cc.Node[] = [];

@property({
  displayName: "数值",
  type: cc.Integer,
  tooltip: "数值",
  // max:10,
  // min:1,
  // step:2,
  range: [1, 100,3], 
  // slide: true
})
shuzhi_node = 1;

// Vec2,Vec3,Color,Rect等等
@property({
  displayName: "二维向量"
})
vec2: cc.Vec2 = new cc.Vec2(0);
@property({
  displayName: "三维向量"
})
vec3: cc.Vec3 = new cc.Vec3(0);
@property({
  displayName: "颜色"
})
color: cc.Color = cc.Color.BLACK;
@property({
  displayName: "矩形"
})
rect: cc.Rect = cc.rect(2,2,4,4);

// 声明事件回调,类似button的点击事件回调
@property({
  type: cc.Component.EventHandler,
  displayName: "点我啊",
})
dainwo = new cc.Component.EventHandler();



// 定义枚举,下拉框属性
let Fruit = cc.Enum({
  苹果: 0,
  香蕉: 1,
  葡萄: 2,
  柠檬:3
});
@ccclass
export default class NewClass extends cc.Component {
  @property({
    type: cc.Enum(Fruit),
    displayName: "水果",
  })
  fruit =Fruit.柠檬 ;

结果展示:
在这里插入图片描述


总结

总之在我们编写代码的时候很重要的,了解这些知识点!!

posted @ 2021-12-24 00:00  cactus9  阅读(70)  评论(0编辑  收藏  举报