@micl/ui Vue UI Components

一组基于 Vue 3 + TypeScript 的通用 UI 组件，适用于后台管理系统与业务中台，强调：

• 简洁 API
• 强类型声明（*.d.ts）
• 事件驱动
• 插槽可扩展

📦 导出组件

import {
  MiResponsiveTable,
  MiPagination,
  MiInput,
  MiTextarea
} from '@micl/ui';

📄 MiPagination 分页组件

Props

| 参数 | 类型 | 说明 | |----|----|----| | total | number | 数据总数 | | totalPages | number | 总页数 | | currentPage | number | 当前页 | | pageSize | number | 每页条数 | | pageSizeOptions | unknown[] | 可选分页大小 | | visibleRange | number | 显示页码范围 |

Events

| 事件名 | 说明 | |----|----| | page-change | 页码变更 | | page-size-change | 每页条数变更 |

使用示例

<MiPagination
  :total="100"
  :current-page="1"
  :page-size="10"
  @page-change="onPageChange"
/>

📊 MiResponsiveTable 响应式表格

支持：

• 响应式布局
• 动态列插槽
• 勾选模式
• 无限滚动

Props

| 参数 | 类型 | 说明 | |----|----|----| | data | unknown[] | 表格数据 | | headers | unknown[] | 表头配置 | | noMore | boolean | 是否无更多数据 | | checkable | boolean | 是否可勾选 | | infiniteScroll | boolean | 是否启用无限滚动 |

Events

| 事件名 | 说明 | |----|----| | selected | 行选择事件 | | load-more | 触发加载更多 |

插槽

动态列插槽：

<template #col_name="{ row, rowIndex }">
  {{ row.name }}
</template>

✏️ MiInput 输入框

Props

| 参数 | 类型 | 说明 | |----|----|----| | modelValue | string | 绑定值 | | size | string | 尺寸 | | placeholder | string | 占位文本 |

Events

| 事件名 | 说明 | |----|----| | update:modelValue | 值变更 |

示例

<MiInput v-model="username" placeholder="请输入用户名" />

📝 MiTextarea 多行文本

Props

| 参数 | 类型 | 说明 | |----|----|----| | modelValue | string | 绑定值 | | rows | number | 行数 | | maxlength | string | number | 最大长度 | | showWordLimit | boolean | 是否显示字数限制 |

Events

| 事件名 | 说明 | |----|----|----| | update:modelValue | 内容变更 |

示例

<MiTextarea
  v-model="content"
  :rows="4"
  show-word-limit
/>

✅ 适用场景

• 后台管理系统
• 表格 + 分页列表页
• 表单输入场景
• 响应式 Web 应用

📄 License

MIT