vxe-form-design 分享表单设计器的使用

官网文档：https://vxeui.com

vxe-form-design 表单设计器是一个支持任意扩展的设计器容器，可以任意添加自定义的控件。

安装最新版本

我用的是 vue3，安装最新版本，https://vxeui.com

// 导入UI，搭配自带控件，渲染性能可以达到极致流畅。根据自己项目使用的 UI 库区决定使用就可以了
import VxeUI from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'

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

使用

使用非常简单，只需要传 widgets 属性就可以，里面就是指定需要导入的控件。

<template>
  <div>
    <div class="row-wrapper">
      <vxe-button status="primary" @click="clickEvent">获取json</vxe-button>
      <vxe-form-design ref="formDesignRef" :widgets="formDesignWidgets" :height="800" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const formDesignRef = ref()
const formDesignWidgets = ref([
  {
    group: 'base',
    children: [
      'VxeInput',
      'VxeTextarea',
      'VxeSelect',
      'VxeSwitch',
      'VxeRadioGroup',
      'VxeCheckboxGroup'
    ]
  }
])
const clickEvent = () => {
  const $formDesign = formDesignRef.value
  if ($formDesign) {
    console.log(JSON.stringify($formDesign.getConfig()))
  }
}
</script>

github https://github.com/x-extends/vxe-design-templat
gitee https://gitee.com/x-extends/vxe-design-template