fineui/packages/demo/src/case/combo/demo.bubble_combo.js

import { shortcut, Widget, createWidget, makeArray } from "@/core";
import { BubbleCombo } from "@/case/combo/bubblecombo/combo.bubble";

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

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

    render() {
        let self = this,
            count = 1;
        const combo1 = createWidget({
            type: "bi.bubble_combo",
            trigger: "click,hover",
            el: {
                type: "bi.button",
                text: "测试",
                height: 24,
            },
            popup: {
                el: {
                    type: "bi.button_group",
                    items: makeArray(100, {
                        type: "bi.text_item",
                        height: 24,
                        text: "item",
                    }),
                    layouts: [
                        {
                            type: "bi.vertical",
                        }
                    ],
                },
                maxHeight: 200,
            },
        });
        const combo2 = createWidget({
            type: "bi.bubble_combo",
            direction: "right",
            el: {
                type: "bi.button",
                text: "测试",
                height: 24,
            },
            popup: {
                type: "bi.text_bubble_bar_popup_view",
                text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字",
                ref() {
                    self.popup = this;
                },
            },
            listeners: [
                {
                    eventName: BubbleCombo.EVENT_BEFORE_POPUPVIEW,
                    action() {
                        self.popup.populate(
                            count++ % 2 === 1
                                ? "我的文字变少了"
                                : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字"
                        );
                    },
                }
            ],
        });

        const combo3 = createWidget({
            type: "bi.bubble_combo",
            el: {
                type: "bi.button",
                text: "测试",
                height: 25,
            },
            popup: {
                type: "bi.text_bubble_bar_popup_view",
                text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字",
                ref() {
                    self.popup = this;
                },
            },
            listeners: [
                {
                    eventName: BubbleCombo.EVENT_BEFORE_POPUPVIEW,
                    action() {
                        self.popup.populate(
                            count++ % 2 === 1
                                ? "我的文字变少了"
                                : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字"
                        );
                    },
                }
            ],
        });

        const combo4 = createWidget({
            type: "bi.bubble_combo",
            el: {
                type: "bi.button",
                text: "测试",
                height: 25,
            },
            popup: {
                type: "bi.text_bubble_bar_popup_view",
                text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字",
                ref() {
                    self.popup = this;
                },
            },
            listeners: [
                {
                    eventName: BubbleCombo.EVENT_BEFORE_POPUPVIEW,
                    action() {
                        self.popup.populate(
                            count++ % 2 === 1
                                ? "我的文字变少了"
                                : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字"
                        );
                    },
                }
            ],
        });

        createWidget({
            type: "bi.absolute",
            element: this,
            items: [
                {
                    el: combo1,
                    left: 150,
                    top: 10,
                },
                {
                    el: combo2,
                    left: 10,
                    bottom: 200,
                },
                {
                    el: combo3,
                    right: 10,
                    bottom: 10,
                },
                {
                    el: combo4,
                    right: 10,
                    top: 10,
                }
            ],
        });
    }
}