v3-dragger-form

基于 Vue 3 + Element Plus 的可视化拖拽表单设计器 + 渲染器。

特性

• 拖拽设计 — 左侧组件库拖入画布，支持排序、选择、删除
• 属性编辑 — 右侧面板实时编辑标签、占位、必填、禁用、选项、日期格式等
• 全局设置 — Label 位置、字体大小、输入框高度全局统一
• JSON 导出 — 设计完成后导出为标准 JSON 格式
• 表单渲染 — 配套 RenderPanel 根据 JSON 渲染真实表单，支持插槽自定义
• 17 种组件 — input / textarea / password / number / input-tag / select / radio / checkbox / switch / date / time / datetime / slider / rate / color / upload / cascader

安装

pnpm add v3-dragger-form

Peer Dependencies（需自行安装）：

pnpm add vue pinia element-plus vuedraggable

使用

设计器 DesignPanel

完整的三栏布局表单设计器：

<script setup lang="ts">
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'v3-dragger-form/dist/style.css'

import { DesignPanel } from 'v3-dragger-form'

const app = createApp(App)
app.use(createPinia())
app.use(ElementPlus)
</script>

<template>
  <div style="height: 100vh">
    <DesignPanel />
  </div>
</template>

渲染器 RenderPanel

根据导出的 JSON 渲染可交互表单：

<script setup lang="ts">
import { RenderPanel } from 'v3-dragger-form'
import type { FormItemData } from 'v3-dragger-form'

const formDefinition = {
  items: [
    {
      id: 'field_1',
      type: 'input',
      label: '用户名',
      placeholder: '请输入用户名',
      required: true,
      disabled: false,
      bindKey: 'username',
      props: {},
    },
    {
      id: 'field_2',
      type: 'select',
      label: '城市',
      placeholder: '请选择',
      required: false,
      disabled: false,
      bindKey: 'city',
      props: {
        options: [
          { label: '北京', value: 'beijing' },
          { label: '上海', value: 'shanghai' },
        ],
      },
    },
  ],
  labelPosition: 'left',
  fontSize: 14,
  inputHeight: 32,
}

function onSubmit(data: Record<string, any>) {
  console.log('表单数据：', data)
}
</script>

<template>
  <RenderPanel
    :formDefinition="formDefinition"
    @submit="onSubmit"
  />
</template>

RenderPanel 插槽

支持按字段和按类型自定义渲染：

<RenderPanel :formDefinition="formDefinition">
  <!-- 按字段（优先级最高） -->
  <template #field_field_1="{ value, update }">
    <el-input :model-value="value" @update:model-value="update">
      <template #prefix>🔍</template>
    </el-input>
  </template>

  <!-- 按类型 -->
  <template #select="{ item, value, update, bindings }">
    <el-select :model-value="value" @update:model-value="update" v-bind="bindings">
      <el-option label="全部" value="" />
      <el-option v-for="opt in item.props.options" :key="opt.value" :label="opt.label" :value="opt.value" />
    </el-select>
  </template>
</RenderPanel>

插槽 props：

| Prop | 类型 | 说明 | |---|---|---| | item | FormItemData | 当前组件定义 | | value | any | 当前值 | | update | (val: any) => void | 更新值 | | bindings | Record<string, any> | 从定义自动计算的绑定属性 | | formData | Record<string, any> | 完整表单数据 |

导出类型

import type { FormItemData, ComponentDefinition } from 'v3-dragger-form'
import { formComponents, useFormStore } from 'v3-dragger-form'

导出 JSON

设计器内置"导出 JSON"按钮。导出格式：

{
  "version": "1.0",
  "labelPosition": "left",
  "fontSize": 14,
  "inputHeight": 32,
  "items": [
    {
      "id": "field_xxx",
      "type": "input",
      "label": "输入框",
      "placeholder": "请输入",
      "required": false,
      "disabled": false,
      "bindKey": "field_xxx",
      "props": {}
    }
  ]
}

开发

# 克隆后安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建应用
pnpm build

# 构建 npm 包
pnpm build-lib

组件列表

| 类型 | 分类 | 说明 | |---|---|---| | input | 输入控件 | 单行文本 | | textarea | 输入控件 | 多行文本 | | password | 输入控件 | 密码 | | number | 输入控件 | 数字 | | input-tag | 输入控件 | 标签 | | select | 选择控件 | 下拉选择 | | radio | 选择控件 | 单选框组 | | checkbox | 选择控件 | 多选框组 | | switch | 选择控件 | 开关 | | cascader | 选择控件 | 级联选择 | | date | 日期时间 | 日期选择 | | time | 日期时间 | 时间选择 | | datetime | 日期时间 | 日期时间 | | slider | 其他 | 滑块 | | rate | 其他 | 评分 | | color | 其他 | 颜色选择 | | upload | 其他 | 文件上传 |