d-render

d-render

基于 Element Plus 二次封装的数据驱动渲染组件库

文档

在线文档: https://d-render.github.io/d-render/

特性

• 配置驱动 - 通过 JSON 配置即可渲染复杂表单
• 数据联动 - 强大的 dependOn 机制
• 开箱即用 - 基于 Element Plus 二次封装
• 自定义类型 - 轻松扩展自定义组件
• 多端适配 - 支持 PC 和移动端
• TypeScript - 完整类型支持

安装

# npm
npm install d-render element-plus -S

# yarn
yarn add d-render element-plus -S

# pnpm
pnpm add d-render element-plus -S

快速开始

<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