添加一个基于ccc 3.1的button代码创建方式

ButtonDemo/assets/scripts/ButtonUtil.ts

@@ -0,0 +1,59 @@
+import { Button, Component, EventHandler, Node } from "cc";
+
+/**
+ * 对button操作的简单封装
+ * 版本为ccc 3.1.x
+ */
+export default class ButtonUtil {
+
+    /**
+     * 
+     * @param button 组件
+     * @param node 事件所在脚本的节点
+     * @param component 事件所在脚本
+     * @param callback 事件名字
+     * @param customData 数据
+     */
+    public static AddClick(button: Button, node: Node, component: string, callback: string, customData?: any) {
+        let clickEventHandler = new EventHandler();
+        clickEventHandler.target = node;
+        clickEventHandler.component = component;
+        clickEventHandler.handler = callback;
+        clickEventHandler.customEventData = customData || null;
+
+        button.clickEvents.push(clickEventHandler);
+
+    }
+
+    /**
+     * 
+     * @param node 添加组件的节点
+     * @param zoomScale 绽放因子 默认0.95
+     * @returns 
+     */
+    public static AddScaleButton(node: Node, zoomScale: number = 0.95): Button {
+        let button = node.addComponent(Button);
+        button.target = node;
+        button.transition = Button.Transition.COLOR;
+        button.duration = 0.1;
+        button.zoomScale = zoomScale;
+        return button;
+    }
+
+    /**
+     * 
+     * @param button 组件
+     * @param state 是否禁用状态 默认为false
+     */
+    public static Interactable(button: Button | Node, state: boolean) {
+        if (button instanceof Button) {
+            button.interactable = state;
+        } else if (button instanceof Node) {
+            button = button.getComponent(Button)!;
+            button && (button.interactable = state);
+        }
+    }
+
+
+
+}

ButtonDemo/assets/scripts/ButtonUtil.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "1cdee820-8f9e-41d0-8f2e-6b2496c4ec1d",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

ButtonDemo/assets/scripts/Scene.ts

@@ -0,0 +1,53 @@
+
+import { _decorator, Component, Node, Label, Button, EventTouch } from 'cc';
+import ButtonUtil from './ButtonUtil';
+const { ccclass, property } = _decorator;
+
+@ccclass('Scene')
+export class Scene extends Component {
+
+    @property(Label)
+    txt: Label = null!;
+
+    @property(Node)
+    btn2: Node = null!;
+
+    @property(Button)
+    btn1: Button = null!;
+
+    onLoad() {
+        //手动添加button组件跟事件
+        let btn = ButtonUtil.AddScaleButton(this.btn2);
+        ButtonUtil.AddClick(btn, this.node, 'Scene', 'onClick_2');
+        console.log('this.btn1',this.btn1);
+    }
+
+    start() {
+        // [3]
+    }
+
+    onClick_1(event: EventTouch) {
+        console.log('event 1', event);
+        this.txt.string = 'button 1'
+    }
+
+    onClick_2(event: EventTouch) {
+        console.log('event 2', event);
+        this.txt.string = 'button 2';
+    }
+
+    // update (deltaTime: number) {
+    //     // [4]
+    // }
+}
+
+/**
+ * [1] Class member could be defined like this.
+ * [2] Use `property` decorator if your want the member to be serializable.
+ * [3] Your initialization goes here.
+ * [4] Your update function goes here.
+ *
+ * Learn more about scripting: https://docs.cocos.com/creator/3.0/manual/en/scripting/
+ * Learn more about CCClass: https://docs.cocos.com/creator/3.0/manual/en/scripting/ccclass.html
+ * Learn more about life-cycle callbacks: https://docs.cocos.com/creator/3.0/manual/en/scripting/life-cycle-callbacks.html
+ */

ButtonDemo/assets/scripts/Scene.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "a59f9f2d-05dc-4994-922f-d9b4d0f4370b",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}