组件文档

ByComponents V3 提供了丰富的 Vue3 组件，帮助开发者快速构建高质量的前端应用。

基础组件

Form 表单

基于 Element Plus 的表单组件，提供更便捷的表单配置和验证功能。

特性：

• 支持多种表单控件类型
• 内置表单验证
• 灵活的布局配置
• 支持自定义验证规则

Table 表格

基于 vxe-table 的表格组件，提供强大的表格功能和列宽缓存。

特性：

• 列宽缓存功能
• 行高自适应
• 自定义列配置
• 丰富的表格操作

Pager 分页

分页组件，提供灵活的分页功能和样式配置。

特性：

• 多种布局模式
• 自定义页码大小
• 跳转功能
• 响应式设计

ToolBar 工具栏

基于 Element Plus 的工具栏组件，提供灵活的工具栏配置和布局功能。

特性：

• 多种组件类型支持
• 左右两侧布局配置
• 异步数据加载
• 统一事件处理
• 自定义插槽支持

CommonSelector 通用选择器

功能强大的通用选择器组件，支持多种选择模式和丰富的功能特性。

特性：

• 多种选择模式（下拉选择、复选框、边框选择）
• 搜索栏功能（A~Z字母列表 + 搜索框）
• 异步数据加载
• 分页功能
• 后置输入框支持
• 自动展开/收起检测

BatchQuerySelector 批量查询选择器

功能强大的批量查询选择器组件，支持批量输入ID或名称进行快速选择。

特性：

• 批量输入功能（支持多种分隔符）
• 支持ID和名称两种输入模式
• 智能匹配（精确匹配 + 模糊匹配）
• 异步数据加载和虚拟滚动优化
• 自定义映射函数支持
• 禁用选项支持

使用示例

<template>
  <div>
    <!-- 表单组件 -->
    <by-form :model="formData" :rules="rules">
      <by-form-item label="用户名" prop="username">
        <el-input v-model="formData.username" />
      </by-form-item>
    </by-form>

    <!-- 表格组件 -->
    <by-table :data="tableData" :columns="columns" />

    <!-- 分页组件 -->
    <by-pager :total="100" :current-page="1" :page-size="10" />

    <!-- 工具栏组件 -->
    <by-tool-bar :items="toolbarItems" @action="handleToolbarAction" />

    <!-- 通用选择器组件 -->
    <by-common-selector v-model="selectedValue" :options="options" />

    <!-- 批量查询选择器组件 -->
    <by-batch-query-selector v-model="selectedValues" :options="options" />
  </div>
</template>

快速开始

查看 安装指南 了解如何安装和使用组件库。