d-render
Version:
基于 Element Plus 二次封装的数据驱动渲染组件库 - 表单、搜索表单、表格配置化渲染
67 lines (45 loc) • 1.6 kB
Markdown
# d-render
> 基于 Element Plus 二次封装的数据驱动渲染组件库
[](https://www.npmjs.com/package/d-render)
[](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)