`<BlocksWidget>`

INFO

<BlocksWidget> 组件必须在 <Provider> 组件内使用。

<BlocksWidget> 组件用于展示模块列表，支持精简版和定制化版本，允许你根据需要自定义不同部分的内容，提升界面的灵活性和可扩展性。

组件结构

<BlocksWidget> 组件包含以下主要部分：

Header（可选）：可以自定义每个模块的标题显示。
Section Header（可选）：可选部分用于模块区块的分隔标题。
Content（可选）：模块的详细内容展示。

使用示例

精简版

在最简单的用法中，<BlocksWidget> 组件会自动展示模块列表，适用于不需要自定义内容的场景：

vue

<template>
    <BlocksWidget />
</template>

定制版

在定制版中，您可以通过插槽 (slot) 对模块的各个部分进行自定义。以下是通过插槽自定义的示例：

vue

<template>
    <BlocksWidget>
        <!-- 自定义 Header 部分，显示模块标题 -->
        <template #header="item">
            {{ item.title }}
        </template>

        <!-- 自定义 Section Header 部分 -->
        <template #sectionHeader="item">
            <h2>{{ item.sectionTitle }}</h2>
        </template>

        <!-- 自定义 Content 部分，展示模块的详细内容 -->
        <template #content="item">
            <p>{{ item.description }}</p>
        </template>
    </BlocksWidget>
</template>

插槽说明

header 插槽：可以自定义每个模块的标题，item 是每个模块的数据对象，包含模块的相关信息，如 title。
sectionHeader 插槽：自定义区块的标题，通常用于分隔不同模块部分。
content 插槽：自定义模块的详细内容展示部分，item 也包含每个模块的详细信息。

配置和自定义

您可以根据需求进一步定制 <BlocksWidget> 的外观和行为，例如通过传递额外的 props、事件或者样式类，来改变组件的样式和交互逻辑。

注意事项

请确保 <BlocksWidget> 组件始终在 <Provider> 组件的上下文中使用，因为该组件依赖于 Provider 提供的全局状态或功能。
使用插槽时，可以选择只实现需要定制的部分，未定义的部分将使用组件的默认展示方式。

<BlocksWidget> ​

组件结构 ​

使用示例 ​

精简版 ​

定制版 ​

插槽说明 ​

配置和自定义 ​

注意事项 ​