vue3-package

一个轻量级的 Vue 3 可视化表单配置与渲染工具包。

特性

• 🚀 可视化配置：通过 Editor 组件快速生成表单配置。
• 📝 动态渲染：通过 Render 组件根据 JSON 配置动态渲染表单。
• 📦 开箱即用：支持常见表单项（Input, Select, Checkbox, Radio, Textarea）。
• 🎨 轻量简洁：不依赖大型 UI 库，体积小巧。

安装

npm install vue3-package
# 或
pnpm add vue3-package

快速上手

1. 引入样式

在你的入口文件（如 main.ts）中引入样式：

import 'vue3-package/dist/index.css'

2. 使用组件

<script setup>
import { Editor, Render } from 'vue3-package'
</script>

<template>
  <!-- 可视化配置编辑器 -->
  <Editor />

  <hr />

  <!-- 动态表单渲染项 -->
  <Render />
</template>

组件说明

Editor 组件

Editor 提供了一个交互界面，允许用户动态添加各种类型的表单项并配置其属性。

• 功能：
  • 点击“生成随机组件”可添加新的表单项。
  • 点击“复制配置”可将当前配置列表复制到剪贴板（JSON 格式）。
• 支持类型：input, select, checkbox, radio, textarea。

Render 组件

Render 组件是一个预览与编辑工具。

• 功能：
  • 顶部包含一个 textarea，用于粘贴 Editor 生成的配置 JSON。
  • 下方会根据解析出的配置实时通过动态组件渲染出对应的表单输入框。
  • 支持双向绑定，修改渲染出的表单值会同步更新数据结构。

类型定义

本项目提供完整的 TypeScript 支持。你可以直接导入 ConfigItem 等类型进行二次开发。

import type { ConfigItem } from 'vue3-package'

// ConfigItem 结构:
// {
//   type: "input" | "select" | "checkbox" | "radio" | "textarea"
//   value: string
//   options?: Array<{ label: string; value: string }>
// }

License

MIT