vxe-pc-ui Vxe UI 表单设计器、零代码表单设计器

安装 Vxe UI PC端组件库

官方文档
查看 github、gitee

 // ...
 import VxeUI from 'vxe-pc-ui'
 import 'vxe-pc-ui/lib/style.css'
 // ...

 // ...
 createApp(App).use(VxeUI).mount('#app')
 // ...

使用

vxe-form-design 设计器组件
vxe-form-view 视图渲染组件

<template>
  <div>
    <div class="row-wrapper">
      <vxe-form-design :widgets="formDesignWidgets" :height="800" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const formDesignWidgets = ref([
  {
    title: '基础控件',
    children: [
      'input',
      'textarea',
      'select'
    ]
  },
  {
    title: '布局控件',
    children: [
      'row'
    ]
  }
])
</script>

设计器-效果预览：