!!!###!!!title=插件贡献——VisActor/VTable 教程文档!!!###!!!!!!###!!!description=每个业务使用 VTable 时,可能需要一些定制化的功能,此时可以通过插件来实现。把通用功能抽离成插件,可以避免重复造轮子,同时也可以方便其他业务使用。共享插件,可以提高开发效率,减少维护成本!期望大家积极贡献插件,共同完善 VTable 生态!!!!###!!!

贡献插件

每个业务使用 VTable 时,可能需要一些定制化的功能,此时可以通过插件来实现。把通用功能抽离成插件,可以避免重复造轮子,同时也可以方便其他业务使用。

共享插件,可以提高开发效率,减少维护成本!期望大家积极贡献插件,共同完善 VTable 生态!

贡献插件注意事项

  • 插件需要遵循 VTable 的插件规范。
  • 插件需要有详细的文档说明,包括插件的参数说明、使用示例等。

插件规范

接口规范

插件需要实现 VTable.plugins.IVTablePlugin 接口。

// 插件统一接口
export interface IVTablePlugin {
  // 插件唯一标识
  id: string;
  // 插件名称
  name: string;
  // 插件运行时机
  runTime: TableEvents[keyof TableEvents] | TableEvents[keyof TableEvents][];
  // 初始化方法,在VTable实例创建后、首次渲染前调用
  run: (...args: any[]) => void;
  // 更新方法,当表格数据或配置更新时调用
  update?: () => void;
  // 销毁方法,在VTable实例销毁前调用
  release?: (table: BaseTableAPI) => void;
}

其中runTime指定了插件的运行时机,配置是TableEvents中的事件类型。

注意:甘特图VTable-Gantt组件的插件需要实现 VTableGantt.plugins.IGanttPlugin 接口。

// 插件统一接口
export interface IGanttPlugin {
  // 插件唯一标识
  id: string;
  // 插件名称
  name: string;
  // 插件运行时机,如果没有传入的话默认会Gantt构建时直接运行
  runTime?: EVENT_TYPES[keyof EVENT_TYPES][];
  // 初始化方法
  run: (...args: any[]) => void;
  // 更新方法,当Gantt数据或配置更新时调用
  update?: () => void;
  // 销毁方法,在Gantt实例销毁前调用
  release?: (gantt: Gantt) => void;   
}

其中runTime指定了插件的运行时机,配置是EVENT_TYPES中的事件类型。

组件的生命周期过程:

附Mermaid 序列图代码(后续如果有变动可以根据如下代码做调整更新,并更新上面的图片):

sequenceDiagram
    participant User
    participant DOM
    participant ListTable
    participant EventManager
    participant PluginManager
    participant Plugin as VTablePlugin
    participant RenderManager
    
    %% Initialization
    ListTable->>PluginManager: register plugins
    PluginManager->>Plugin: store plugin instances
    
    %% User interaction flow
    User->>DOM: interact (click, scroll, etc.)
    DOM->>EventManager: dispatch browser event
    EventManager->>PluginManager: notify(eventType, args)
    PluginManager->>PluginManager: filter plugins by runTime
    
    loop For each matching plugin
        PluginManager->>Plugin: run(eventArgs, runTime, tableAPI)
        Plugin->>ListTable: read/modify table state
        Plugin->>Plugin: process event logic
    end
    
    Plugin->>ListTable: render request to update table
    ListTable->>DOM: update display


    %% table.updateOption
    ListTable->>PluginManager: updateOption
    PluginManager->>Plugin: updatePlugins()
    %% table.release
    ListTable->>PluginManager: release
    PluginManager->>Plugin: release()

通过上图可以了解到插件的运行时机:

  • runTime在插件中的关键作用是指定了依赖VTable的哪些事件。
  • 在插件的run方法中,可以获取到表格的实例,以及表格的配置和数据;同时需要在run方法中,处理插件具体的业务逻辑。
  • 请记得在插件的release方法中,释放插件占用的资源,避免内存泄漏。

插件文档说明

插件需要提供详细的文档说明,包括插件的参数说明、使用示例等。

文档一般需要包含以下内容:

  • 插件的名称
  • 插件的描述
  • 插件的参数说明
  • 插件的使用示例
  • 插件的注意事项
  • 插件的源码地址

文档需要放在 docs/assets/plugins 目录下,文件名称为 plugin-name.md