FineUI-100-Questions/questions/30.空状态提示的若干种实现方式.md

空状态提示的若干种实现方式

布局实现

一般情况下,采用bi.absolute布局放置内容和空提示

const widget = {
    type: "bi.absolute",
    items: [
        {
            el: {
                type: "content",
            },
            inset: 0
        }, {
            el: {
                type: "empty_tip",
                invisible: () => !this.model.tipVisible
            },
            inset: 0
        }
    ]
};

Layers实现

如果想脱离组件层面,以service的形式对组件施加空状态提示,也可以使用BI.Layers控制,实现对任意组件附加空提示

function createEmptyTyp(widget) {
    const name = BI.UUID();
    BI.Layers.create(name, null, {
        container: widget,
        render: {
            type: "empty_tip",
        },
    });

    BI.Layers.show(name);
    return () => {
        BI.Layers.remove(name);
    };
}

状态控制

用独立清晰的状态控制空提示的显示隐藏,避免掺杂在其他状态控制中

如下示例,在items的watch中"顺带"处理tip组件显示隐藏,使得控制逻辑变的不够清晰

class model extends Model {
    state = {
        items: []
    };
};

class widget extends BI.Widget {
    watch = {
        items: (items) => {
            this.list.populate(items);
            this.tip.setVisible(BI.isEmpty(items));
        }
    };

    render() {
        return {
            type: "bi.absolute",
            items: [
                {
                    el: {
                        type: "content",
                        ref: ref => this.list = ref,
                    },
                    inset: 0
                }, {
                    el: {
                        type: "empty_tip",
                        ref: ref => this.tip = ref,
                        invisible: !BI.isEmpty(this.model.items)
                    },
                    inset: 0
                }
            ]
        };
    }
};

将tip显示隐藏的状态独立出来,独立控制,这样状态到视图的映射清晰明了

class model extends Model {
    state = {
        items: []
    };

    computed = {
        tipVisible: () => BI.isEmpty(this.model.items)
    };
};

class widget extends BI.Widget {
    watch = {
        items: (items) => {
            this.list.populate(items);
        },
        tipVisible: b => this.tip.setVisible(b)
    };

    render() {
        return {
            type: "bi.absolute",
            items: [
                {
                    el: {
                        type: "content",
                        ref: ref => this.list = ref,
                    },
                    inset: 0
                }, {
                    el: {
                        type: "empty_tip",
                        ref: ref => this.tip = ref,
                        invisible: !this.model.tipVisible,
                    },
                    inset: 0
                }
            ]
        };
    }
};