UNPKG

d-render

Version:

基于 Element Plus 二次封装的数据驱动渲染组件库 - 表单、搜索表单、表格配置化渲染

67 lines (45 loc) 1.6 kB
# d-render > 基于 Element Plus 二次封装的数据驱动渲染组件库 [![npm version](https://img.shields.io/npm/v/d-render.svg?style=flat-square)](https://www.npmjs.com/package/d-render) [![license](https://img.shields.io/npm/l/d-render.svg?style=flat-square)](https://github.com/d-render/d-render/blob/main/LICENSE) ## 📚 文档 **在线文档**: [https://d-render.github.io/d-render/](https://d-render.github.io/d-render/) ## ✨ 特性 - 🚀 **配置驱动** - 通过 JSON 配置即可渲染复杂表单 - 🔗 **数据联动** - 强大的 dependOn 机制 - 📦 **开箱即用** - 基于 Element Plus 二次封装 - 🎨 **自定义类型** - 轻松扩展自定义组件 - 📱 **多端适配** - 支持 PC 和移动端 - 🔧 **TypeScript** - 完整类型支持 ## 📥 安装 ```bash # npm npm install d-render element-plus -S # yarn yarn add d-render element-plus -S # pnpm pnpm add d-render element-plus -S ``` ## 🚀 快速开始 ```vue <template> <DrForm v-model:model="model" :fieldList="fieldList" /> </template> <script setup> import { ref } from 'vue' import { generateFieldList, defineFormFieldConfig } from 'd-render' const model = ref({}) const fieldList = generateFieldList(defineFormFieldConfig({ name: { type: 'input', label: '姓名', required: true } })) </script> ``` ## 🎨 插件 - `@d-render/plugin-standard` - 标准组件插件 - `@d-render/plugin-standard-configure` - 配置面板插件 ## 📄 许可证 [MIT License](https://opensource.org/licenses/MIT)