fineui/demo/js/core/abstract/combination/demo.combo2.js

import { shortcut, Widget, createWidget } from "@/core";

@shortcut()
export class Func extends Widget {
    static xtype = "demo.combo2";

    props = { baseCls: "demo-func" };

    _createEl() {
        return {
            type: "bi.button",
            height: 25,
            text: "点击",
        };
    }

    oneCombo() {
        return createWidget({
            type: "bi.combo",
            adjustLength: 5,
            el: this._createEl(),
            popup: {
                el: {
                    type: "bi.layout",
                    height: 500,
                },
                maxHeight: 400,
            },
        });
    }

    twoCombo() {
        return createWidget({
            type: "bi.combo",
            adjustXOffset: 25,
            adjustYOffset: 5,
            direction: "bottom,left",
            el: this._createEl(),
            popup: {
                el: {
                    type: "bi.layout",
                    height: 1200,
                },
            },
        });
    }

    threeCombo() {
        return createWidget({
            type: "bi.combo",
            adjustYOffset: 5,
            el: this._createEl(),
            isNeedAdjustHeight: false,
            popup: {
                el: {
                    type: "bi.layout",
                    height: 1200,
                },
            },
        });
    }

    fourCombo() {
        return createWidget({
            type: "bi.combo",
            adjustXOffset: 25,
            adjustYOffset: 5,
            direction: "left",
            el: this._createEl(),
            isNeedAdjustHeight: true,
            popup: {
                el: {
                    type: "bi.layout",
                    height: 1200,
                },
            },
        });
    }

    fiveCombo() {
        return createWidget({
            type: "bi.combo",
            adjustXOffset: 25,
            adjustYOffset: 5,
            direction: "left,top",
            el: this._createEl(),
            isNeedAdjustHeight: true,
            popup: {
                el: {
                    type: "bi.layout",
                    height: 1200,
                },
                maxHeight: 2000,
            },
        });
    }

    sixCombo() {
        return createWidget({
            type: "bi.combo",
            adjustXOffset: 25,
            adjustYOffset: 5,
            direction: "top,left",
            el: this._createEl(),
            isNeedAdjustHeight: true,
            popup: {
                el: {
                    type: "bi.layout",
                    height: 1200,
                },
            },
        });
    }

    sevenCombo() {
        return createWidget({
            type: "bi.combo",
            adjustXOffset: 25,
            adjustYOffset: 5,
            direction: "bottom",
            isNeedAdjustWidth: false,
            // isNeedAdjustHeight: false,
            offsetStyle: "center",
            el: this._createEl(),
            popup: {
                el: {
                    type: "bi.layout",
                    width: 200,
                    height: 1200,
                },
            },
        });
    }

    eightCombo() {
        return createWidget({
            type: "bi.combo",
            adjustXOffset: 25,
            adjustYOffset: 5,
            direction: "right",
            isNeedAdjustWidth: false,
            // isNeedAdjustHeight: false,
            offsetStyle: "middle",
            el: this._createEl(),
            popup: {
                el: {
                    type: "bi.layout",
                    width: 200,
                    height: 200,
                },
            },
        });
    }

    render() {
        return {
            type: "bi.grid",
            hgap: 10,
            vgap: 5,
            items: [
                [this.oneCombo(), this.twoCombo(), this.threeCombo()],
                [this.fourCombo(), this.fiveCombo(), this.sixCombo()],
                [this.sevenCombo(), this.eightCombo()]
            ],
        };
    }
}