自定义组件 - 快搭科技

搭建组件开发环境2

参考组件开发环境搭建

选择组件的基类

参考组件的类继承关系列表

demo组件样例:

import * as _ from 'lodash';
import { ContainerBase } from "yh-designer/dist/base/ComponentBase";
import { Component, serialize } from "yh-designer/dist/base/decorators/Decorators";
import { EventAttrEditor } from "yh-designer/dist/designer/attrbuteEditors/EventAttrEditor";
import { InputAttrEditor } from "yh-designer/dist/designer/attrbuteEditors/InputAttrEditor";
import { Common } from "yh-designer/dist/utils/Common";


/**
 * jss对象
 * */
interface DemoStyle {
    Demo
}
/**
 * Demo组件
 */
@Component({ icon: 'fa fa-address-card-o', gourp: 'form', title: 'Demo组件', name: 'Demo组件', , help: 'http://help.kdayun.com/docs/mindoc/' })
export class Demo extends ContainerBase {
    /**
     * 的标题
     */
    @serialize(String, 'Demo标题')
    title: string
    /**
     * 组件宽度
     */
    @serialize(String, '400px')
    width: string
    /**
     * 组件的高度
     */
    @serialize(String, '300px')
    height: string

    /**
     * 点击脚本
     */
    @serialize(String)
    clickScript: string

    constructor(config) {
        super(config);
    }

    /**
     * 这里是渲染组件的Html元素地方
     */
    doGetElemtHtml() {
        return [
            '<div>' + this.title + '</div>'
        ].join('')
    }
    /**
     * 这里组件渲染的主方法
     * @param parentCmp 
     */
    render(parentCmp) {
        //调用父类的渲染
        super.render(parentCmp);
        let that = this;
        if (!that.getDesignModel()) {
            this.$elemt.on('click', function (e) {
                that.stopEventPropagation(e);
                that.enable && that.raiseEvent('onClick', that);
                //这里触发点击事件
                that.raiseOnClickScript();
            });
        }
    }

    /**
     *  触发点击事件脚本的函数
     */
    raiseOnClickScript() {
        if (Common.isNotEmpty(this.clickScript) && this.enable && !this.getDesignModel()) {
            let fn: Function = Common.evalScript(this.clickScript)
            if (_.isFunction(fn)) {
                let params = Array.prototype.slice.call(arguments);
                if (params.length < 2) {
                    fn.call(this, this);
                } else
                    fn.apply(this, params)
            }
        }
    }
    protected doGetClassName(): string {
        return this.css.Demo
    }
    css: DemoStyle
    /**
     * 这里是设置css地方
     * 使用的是jss
     */
    doGetCss(): DemoStyle {
        const styles = {
            Demo: {
                "clear": "both",
                "background": "red",
                "position": "relative",
                "& *": {
                    "font": "inherit",
                },
            },
        }
        return styles;
    }

    /**
     * 这里设置组件的属性编辑器
     * */
    getAttrEditors() {
        let that = this;
        let atrr = super.getAttrEditors()
        atrr.push(new InputAttrEditor(that, {
            attr: "title",
            labelCaption: "Demo标题",
            title: "Demo标题",
        }));
        // 设置按钮的点击脚本属性编辑器
        atrr.push(new EventAttrEditor(that, {
            attr: "clickScript",
            title: "",
            btnText: "点击事件",
            demo: `function Button1_onClickScript(cxt: ScriptContext, btn: Button) {
    Common.msg('hello')
}`,
            parameter: "cmp:" + Common.getClassName(that)
        }));
        return atrr;
    }

}