{"_rev":"5-269b2b80b3e04c5e738e099991d763eb","time":{"created":"2026-07-06T09:14:56.607Z","modified":"2026-07-06T09:14:57.061Z","0.0.1":"2026-07-06T09:03:58.979Z","0.0.2":"2026-07-06T09:09:05.167Z","0.0.3":"2026-07-06T09:14:56.861Z"},"_id":"@ankangji/v3-dragger-form","name":"@ankangji/v3-dragger-form","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.3":{"name":"@ankangji/v3-dragger-form","version":"0.0.3","type":"module","publishConfig":{"access":"public"},"main":"./dist/v3-dragger-form.umd.js","module":"./dist/v3-dragger-form.es.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/v3-dragger-form.es.js","require":"./dist/v3-dragger-form.umd.js","types":"./dist/index.d.ts"},"./dist/style.css":"./dist/style.css"},"scripts":{"dev":"vite","build":"run-p type-check \"build-only {@}\" --","preview":"vite preview","build-only":"vite build","build-lib":"vue-tsc -p tsconfig.lib.json --noEmit && cross-env LIB=true vite build","type-check":"vue-tsc --build","lint":"run-s \"lint:*\"","lint:oxlint":"oxlint . --fix","lint:eslint":"eslint . --fix --cache","format":"prettier --write --experimental-cli src/"},"dependencies":{"element-plus":"^2.14.2","pinia":"^3.0.4","vue":"^3.5.38","vue-router":"^5.1.0","vuedraggable":"^4.1.0"},"peerDependencies":{"element-plus":"^2.14.0","pinia":"^3.0.0","vue":"^3.5.0","vuedraggable":"^4.1.0"},"devDependencies":{"@microsoft/api-extractor":"^7.58.9","@tsconfig/node24":"^24.0.4","@types/node":"^24.13.2","@vitejs/plugin-vue":"^6.0.7","@vitejs/plugin-vue-jsx":"^5.1.5","@vue/eslint-config-typescript":"^14.8.0","@vue/tsconfig":"^0.9.1","cross-env":"^10.1.0","eslint":"^10.5.0","eslint-config-prettier":"^10.1.8","eslint-plugin-oxlint":"~1.69.0","eslint-plugin-vue":"~10.9.2","jiti":"^2.7.0","npm-run-all2":"^9.0.2","oxlint":"~1.69.0","prettier":"3.8.4","typescript":"~6.0.0","vite":"^8.0.16","vite-plugin-dts":"^5.0.3","vite-plugin-vue-devtools":"^8.1.2","vue-eslint-parser":"^10.4.1","vue-tsc":"^3.3.5"},"engines":{"node":"^22.18.0 || >=24.12.0"},"_id":"@ankangji/v3-dragger-form@0.0.3","description":"基于 Vue 3 + Element Plus 的可视化拖拽表单设计器 + 渲染器。","_nodeVersion":"22.12.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-vv9M3PFtGVXZzzBrkbVV/HMaKGqwX/AhntUwgpGauT8WmcnMYS0ojzfK9s1peFxlvwPy/jBCVHls+BC6PudIig==","shasum":"a0e8f69e3f3ff4fd60b965f76532cb77dd939b53","tarball":"https://registry.npmjs.org/@ankangji/v3-dragger-form/-/v3-dragger-form-0.0.3.tgz","fileCount":29,"unpackedSize":64905,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIALnC7Qbp6ovWhAASPHsTvoNw7fLWOoO333o3eLMa5KwAiAFebMYK+Ws2+R/aH539ztFxI4JijW9YexMImIxoUGLrQ=="}]},"_npmUser":{"name":"ankangji","email":"ankangji@qq.com"},"directories":{},"maintainers":[{"name":"ankangji","email":"ankangji@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/v3-dragger-form_0.0.3_1783329296716_0.8032446111131091"},"_hasShrinkwrap":false}},"maintainers":[{"name":"ankangji","email":"ankangji@qq.com"}],"description":"基于 Vue 3 + Element Plus 的可视化拖拽表单设计器 + 渲染器。","readme":"# v3-dragger-form\n\n基于 Vue 3 + Element Plus 的可视化拖拽表单设计器 + 渲染器。\n\n## 特性\n\n- **拖拽设计** — 左侧组件库拖入画布，支持排序、选择、删除\n- **属性编辑** — 右侧面板实时编辑标签、占位、必填、禁用、选项、日期格式等\n- **全局设置** — Label 位置、字体大小、输入框高度全局统一\n- **JSON 导出** — 设计完成后导出为标准 JSON 格式\n- **表单渲染** — 配套 `RenderPanel` 根据 JSON 渲染真实表单，支持插槽自定义\n- **17 种组件** — input / textarea / password / number / input-tag / select / radio / checkbox / switch / date / time / datetime / slider / rate / color / upload / cascader\n\n## 安装\n\n```bash\npnpm add v3-dragger-form\n```\n\n**Peer Dependencies**（需自行安装）：\n\n```bash\npnpm add vue pinia element-plus vuedraggable\n```\n\n## 使用\n\n### 设计器 DesignPanel\n\n完整的三栏布局表单设计器：\n\n```vue\n<script setup lang=\"ts\">\nimport { createApp } from 'vue'\nimport { createPinia } from 'pinia'\nimport ElementPlus from 'element-plus'\nimport 'element-plus/dist/index.css'\nimport 'v3-dragger-form/dist/style.css'\n\nimport { DesignPanel } from 'v3-dragger-form'\n\nconst app = createApp(App)\napp.use(createPinia())\napp.use(ElementPlus)\n</script>\n\n<template>\n  <div style=\"height: 100vh\">\n    <DesignPanel />\n  </div>\n</template>\n```\n\n### 渲染器 RenderPanel\n\n根据导出的 JSON 渲染可交互表单：\n\n```vue\n<script setup lang=\"ts\">\nimport { RenderPanel } from 'v3-dragger-form'\nimport type { FormItemData } from 'v3-dragger-form'\n\nconst formDefinition = {\n  items: [\n    {\n      id: 'field_1',\n      type: 'input',\n      label: '用户名',\n      placeholder: '请输入用户名',\n      required: true,\n      disabled: false,\n      bindKey: 'username',\n      props: {},\n    },\n    {\n      id: 'field_2',\n      type: 'select',\n      label: '城市',\n      placeholder: '请选择',\n      required: false,\n      disabled: false,\n      bindKey: 'city',\n      props: {\n        options: [\n          { label: '北京', value: 'beijing' },\n          { label: '上海', value: 'shanghai' },\n        ],\n      },\n    },\n  ],\n  labelPosition: 'left',\n  fontSize: 14,\n  inputHeight: 32,\n}\n\nfunction onSubmit(data: Record<string, any>) {\n  console.log('表单数据：', data)\n}\n</script>\n\n<template>\n  <RenderPanel\n    :formDefinition=\"formDefinition\"\n    @submit=\"onSubmit\"\n  />\n</template>\n```\n\n#### RenderPanel 插槽\n\n支持按字段和按类型自定义渲染：\n\n```vue\n<RenderPanel :formDefinition=\"formDefinition\">\n  <!-- 按字段（优先级最高） -->\n  <template #field_field_1=\"{ value, update }\">\n    <el-input :model-value=\"value\" @update:model-value=\"update\">\n      <template #prefix>🔍</template>\n    </el-input>\n  </template>\n\n  <!-- 按类型 -->\n  <template #select=\"{ item, value, update, bindings }\">\n    <el-select :model-value=\"value\" @update:model-value=\"update\" v-bind=\"bindings\">\n      <el-option label=\"全部\" value=\"\" />\n      <el-option v-for=\"opt in item.props.options\" :key=\"opt.value\" :label=\"opt.label\" :value=\"opt.value\" />\n    </el-select>\n  </template>\n</RenderPanel>\n```\n\n插槽 props：\n\n| Prop | 类型 | 说明 |\n|---|---|---|\n| `item` | `FormItemData` | 当前组件定义 |\n| `value` | `any` | 当前值 |\n| `update` | `(val: any) => void` | 更新值 |\n| `bindings` | `Record<string, any>` | 从定义自动计算的绑定属性 |\n| `formData` | `Record<string, any>` | 完整表单数据 |\n\n### 导出类型\n\n```typescript\nimport type { FormItemData, ComponentDefinition } from 'v3-dragger-form'\nimport { formComponents, useFormStore } from 'v3-dragger-form'\n```\n\n### 导出 JSON\n\n设计器内置\"导出 JSON\"按钮。导出格式：\n\n```json\n{\n  \"version\": \"1.0\",\n  \"labelPosition\": \"left\",\n  \"fontSize\": 14,\n  \"inputHeight\": 32,\n  \"items\": [\n    {\n      \"id\": \"field_xxx\",\n      \"type\": \"input\",\n      \"label\": \"输入框\",\n      \"placeholder\": \"请输入\",\n      \"required\": false,\n      \"disabled\": false,\n      \"bindKey\": \"field_xxx\",\n      \"props\": {}\n    }\n  ]\n}\n```\n\n## 开发\n\n```bash\n# 克隆后安装依赖\npnpm install\n\n# 启动开发服务器\npnpm dev\n\n# 构建应用\npnpm build\n\n# 构建 npm 包\npnpm build-lib\n```\n\n## 组件列表\n\n| 类型 | 分类 | 说明 |\n|---|---|---|\n| input | 输入控件 | 单行文本 |\n| textarea | 输入控件 | 多行文本 |\n| password | 输入控件 | 密码 |\n| number | 输入控件 | 数字 |\n| input-tag | 输入控件 | 标签 |\n| select | 选择控件 | 下拉选择 |\n| radio | 选择控件 | 单选框组 |\n| checkbox | 选择控件 | 多选框组 |\n| switch | 选择控件 | 开关 |\n| cascader | 选择控件 | 级联选择 |\n| date | 日期时间 | 日期选择 |\n| time | 日期时间 | 时间选择 |\n| datetime | 日期时间 | 日期时间 |\n| slider | 其他 | 滑块 |\n| rate | 其他 | 评分 |\n| color | 其他 | 颜色选择 |\n| upload | 其他 | 文件上传 |\n","readmeFilename":"README.md"}