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

Cocos Creator系列文章目录

Cocos Creator–1.介绍

Cocos Creator-2.UI系统

Cocos Creator-3.缓冲系统,动作系统,计时器

Cocos Creator-4.监听,发射事件,节点系统事件,全局系统事件

Cocos Creator-5.物理与碰撞系统

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.柠檬 ;

结果展示：

---

总结

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