Skip to content

<EventsWidget>

INFO

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

<EventsWidget> 组件用于展示事件列表,支持精简版和定制版的使用方式,提供灵活的内容自定义选项,适用于需要显示和操作事件列表的场景。

组件结构

<EventsWidget> 组件主要展示事件信息,同时支持通过插槽自定义事件项的内容。

  1. content(可选):
    • 允许你自定义每个事件项的展示内容。

使用示例

精简版

在精简版中,<EventsWidget> 组件会自动展示事件列表,适用于不需要定制内容的场景:

vue
<template>
    <EventsWidget type="module" />
</template>

定制版

在定制版中,您可以通过插槽 (slot) 自定义事件项的内容,例如显示一个配置按钮或其他交互元素。以下是一个通过插槽自定义事件项的示例:

vue
<template>
    <EventsWidget>
        <!-- 自定义事件项内容 -->
        <template #content="item">
            <div>
                <button>配置</button>
            </div>
        </template>
    </EventsWidget>
</template>

插槽说明

  • content 插槽:可以自定义每个事件项的展示内容,item 是每个事件的数据对象,可以包含事件的相关信息,如 titletimestamp 等。

配置和自定义

<EventsWidget> 提供了足够的灵活性,你可以根据需要进一步定制事件列表的外观和行为。通过插槽,你可以添加各种交互元素,例如按钮、链接等,让用户可以与事件进行交互。

注意事项

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

配合其他组件使用

如果需要更复杂的交互和操作,可以将 <EventsWidget> 与其他组件结合使用,例如 <DndItem> 用于拖拽事件,或与状态管理库结合使用以动态更新事件数据。