af-form-designer

基于 Arco Design Vue 的可视化表单设计器和渲染器。

安装

本插件依赖于 @arco-design/web-vue 等库，请确保项目中已安装这些依赖。

# 安装 af-form-designer
npm install af-form-designer

# 安装必要的 Peer Dependencies (如果尚未安装)
npm install @arco-design/web-vue vuedraggable @vueuse/core lodash

快速上手

1. 全局注册

在你的入口文件（如 main.ts 或 main.js）中引入并注册插件。

import { createApp } from 'vue'
import App from './App.vue'

// 1. 引入 Arco Design 及其样式
import ArcoVue from '@arco-design/web-vue'
import '@arco-design/web-vue/dist/arco.css'
import ArcoVueIcon from '@arco-design/web-vue/es/icon' // 务必引入图标库

// 2. 引入 af-form-designer 及其样式
import AfFormDesigner from 'af-form-designer'
import 'af-form-designer/style.css'

const app = createApp(App)

// 3. 注册插件
app.use(ArcoVue)
app.use(ArcoVueIcon)
app.use(AfFormDesigner)

app.mount('#app')

2. 组件使用

表单设计器 (Form Designer)

用于可视化设计表单。

<template>
  <div style="height: 100vh;">
    <af-form-designer />
  </div>
</template>

表单渲染器 (Form Renderer)

用于渲染设计好的表单数据。

<template>
  <!-- 传入 request 方法以支持远程数据源 -->
  <af-form-renderer :data="formJson" :request="customRequest" />
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

// 这里填入设计器生成的 JSON 数据
const formJson = ref({
  widgetList: [],
  formConfig: {}
})

// 自定义请求方法（可选），用于处理远程选项加载
// 如果不传，默认使用内部的 axios
const customRequest = (config) => {
  return axios(config)
}
</script>

依赖说明

本项目依赖以下库，请确保你的项目环境满足要求：

• Vue 3.x
• @arco-design/web-vue 2.x
• vuedraggable 4.x (适配 Vue 3)

更新日志

2026-01-05 优化更新

• 性能优化：
  • 实现组件异步按需加载 (defineAsyncComponent)，显著减小首屏包体积。
  • 优化 widget-form-item 渲染逻辑，使用 computed 缓存组件查找，减少不必要的计算。
• 代码重构：
  • 规范化组件间数据流，移除子组件对 Props 的直接修改，改为事件驱动。
  • 优化组件注册机制，支持更灵活的加载策略。
• 体验改进：
  • 增强可访问性 (A11y)，为操作按钮添加 aria-label。
  • 优化交互事件处理，修复潜在的点击穿透问题。