Icarys Form Designer

一个强大的 Vue 3 表单设计器组件库，用于构建动态表单。

安装

npm install @icarys/form-designer

注意：安装此包时会自动安装所有必需的依赖，包括 Vue 3、Element Plus、CodeMirror 等。

依赖说明

安装 @icarys/form-designer 时会自动安装所有必需依赖。大部分依赖会被设为外部依赖（不打包），但以下依赖由于兼容性原因会被打包进组件库：

• codemirror: 版本兼容性要求严格，避免使用项目版本冲突

其他所有依赖都会作为外部依赖自动安装，确保组件库轻量化且版本统一。

核心依赖

• vue: ^3.0.0 - Vue 3 框架
• element-plus: ^2.0.0 - Element Plus UI 组件库
• vant: ^4.0.0 - Vant UI 组件库
• codemirror: ^5.65.0 - 代码编辑器（已打包）

功能依赖

• vuedraggable: 4.1.0 - 拖拽功能
• dayjs: ^1.11.13 - 日期处理
• sortablejs: ^1.15.6 - 排序功能
• jsbarcode: ^3.11.6 - 条形码生成
• signature_pad: ^5.0.4 - 手写签名
• marked: ^15.0.9 - Markdown 解析
• qr-code-styling: ^1.9.1 - 二维码生成

FormCreate 相关

• @form-create/core: ^3.2.32 - 核心库
• @form-create/element-ui: ^3.2.32 - Element UI 集成
• @form-create/utils: ^3.2.31 - 工具函数
• @form-create/vant: ^3.2.32 - Vant UI 集成
• vant: ^4.0.0 - Vant UI 组件库
• 及其相关组件

基础用法

全局注册

import { createApp } from 'vue'
import IcarysFormDesigner from '@icarys/form-designer'
import '@icarys/form-designer/dist/style.css'

const app = createApp(App)
app.use(IcarysFormDesigner)
app.mount('#app')

组件使用

<template>
  <div>
    <FcDesigner v-model="formData" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import FcDesigner from '@icarys/form-designer'

const formData = ref([])
</script>

API

FcDesigner 组件

表单设计器的主要组件。

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|-------| | v-model | 表单配置数据 | Array | [] | | options | 表单配置选项 | Object | {} |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | change | 表单配置改变时触发 | (data) => void |

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

许可证

ISC License

作者

FormCreate Team