diff --git a/README.md b/README.md index 75e3e08eef478446874a8c23671bd4ee810bc557..0c109bee6254d139e4d2934f3cfe9b9b2027d43e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,83 @@ + + # elementplus-vxetable-component -1. 本组件库使用 vue3 element-plus vxe-table @iconify/vue WindiCSS 等技术 -2. 本组件库对 form description row dialog preview tree 进行二次封装 -3. 本组件库table 使用vxe-table 进行二次封装 基本支持vxe-table官网所有参数 -4. 可以根据项目要求复制本组件到项目中进行二次封装/修改 +一个基于 Vue3、Element-Plus、Vxe-Table 和 WindiCSS 构建的组件库,旨在简化开发流程并提供灵活的 UI 组件。 + +## 技术栈 + +- **Vue3**:构建用户界面的渐进式框架。 +- **Element-Plus**:为开发者提供丰富、美观的 UI 组件。 +- **Vxe-Table**:强大的表格组件,支持丰富的功能和配置。 +- **WindiCSS**:快速、灵活的实用优先 CSS 框架。 +- **@iconify/vue**:支持大量图标集的图标工具。 + +## 特性 + +1. **二次封装组件**:对常用的 UI 组件如 `form`、`description`、`row`、`dialog`、`preview` 和 `tree` 进行了二次封装,提高易用性和一致性。 +2. **表格组件封装**:基于 `vxe-table` 的封装,几乎支持其所有参数,方便快速集成和使用。 +3. **模块化结构**:组件结构清晰,便于按需引入和定制。 +4. **可扩展性强**:支持根据项目需求复制组件并进行进一步封装或修改。 + +## 安装 + +确保您已安装 [Node.js](https://nodejs.org) 和 [pnpm](https://pnpm.io/),然后运行以下命令: + +```bash +pnpm install +``` + +## 使用方法 + +在您的 Vue3 项目中,可以通过以下方式引入和使用组件: + +```ts +import BasicForm from './components/BasicForm/src/BasicForm.vue' +import BasicTable from './components/BasicTable/src/BasicTable.vue' +import BasicDialog from './components/BasicDialog/src/BasicDialog.vue' +``` + +然后在组件中使用它们: + +```vue + +``` + +## 组件说明 + +- **BasicForm**:支持多种表单组件,如 `InputNumberGroup`、`RadioButtonGroup`、`Select`、`UploadImage`、`WangEditor` 等,并提供响应式布局。 +- **BasicTable**:基于 Vxe-Table 的封装,支持分页、列管理、数据加载等功能。 +- **BasicDialog**:对话框组件,提供可定制的弹窗和底部操作区域。 +- **BasicDescr**:用于展示描述信息,支持多个描述项(DescrItem)。 +- **BasicTree**:树形结构组件,支持搜索、展开/折叠等功能。 +- **Preview**:提供功能性预览组件,支持动态内容加载。 +- **Description**:支持展示信息并提供 PDF 渲染按钮。 + +## 开发者友好功能 + +- **响应式布局**:通过 `useBreakpoint` 和 `globalScreenRef` 提供响应式支持。 +- **事件监听**:使用 `useEventListener` 监听并处理组件内的事件。 +- **数据处理**:提供 `tryConstructObject` 和 `tryConstructArray` 等工具函数,帮助处理表单数据。 +- **树工具**:封装了 `Tree` 工具类,支持树结构的遍历和操作。 + +## 贡献 + +欢迎贡献代码和改进!请参考 [贡献指南](#)(待补充)。 + +## 协议 + +本项目遵循 MIT 协议,详细信息请查看 [LICENSE](#) 文件。 + +## 联系 + +如有问题或建议,请提交 [Issue](https://gitee.com/snail-open-source/elementplus-vxetable-component/issues) 或联系项目维护者。 + +--- + +感谢您使用 **elementplus-vxetable-component**,希望它能为您的项目带来便利! \ No newline at end of file