1.6 KiB

Raw Permalink Blame History

如何快速的封装自定义combo

FineUI中提供了很多下拉框组件,但总有时候不满足使用场景,需要自己封装

那么如何快速封装一个combo组件呢?总结多年的经验,分如下几个步骤

1.确定好el和popup

想好触发器和展开面板显示的内容.举个常见的例子,一个水平布局,包含一个文字和一个图标组成了el,一个button组成了面板

const combo = {
    type: "bi.combo",
    el: {
        type: "bi.horizontal_fill",
        columnSize: ['fill', 24],
        items: [
            {
                type: "bi.label",
                text: "我是el"
            }, {
                type: "bi.icon_label",
                text: "我是el上的图标"
            }
        ]
    },
    popup: {
        el: {
            type: "bi.button",
            text: "请点击"
        }
    }
};

2.确定好触发方式

根据交互需要,确定好需要点击触发,还是鼠标悬浮触发,选择一个合适的trigger属性

3.确定好收起面板的控制逻辑

多数时候,我们需要在弹出面板进行操作之后收起面板,这时候需要手动监听事件调用hideView方法

let comboRef;
const combo = {
    type: "bi.combo",
    ref: ref => comboRef = ref,
    popup: {
        el: {
            type: "bi.button",
            text: "请点击",
            handler: () => {
                comboRef.hideView()
            }
        }
    }
};

4.完善好设置值和获取值逻辑

在combo特性详解中阐述了combo的特性,可以参考

1.6 KiB Raw Permalink Blame History