关于 sun-form-v3

0.简介

sun-form-v3 是基于 vue3+tailwindcss 所编写的低代码框架引擎，其中 UI 基于 element-plus，表格基于 vxe-table。定位为前端开发人员提供快速搭建页面、实现不仅仅是表单的数据交互。

sun-form-v3 由设计器designer和渲染器sunForm两个组件构成。

sun-form-v3 提供了非常丰富的组件属性、表单交互和 api 方法等，可通过拖转或单击生成你想要的页面。

1.安装

 npm i sun-form-v3@latest
 npm i element-plus@2.7.3
 npm i @element-plus/icons-vue@2.3.1
 npm i vxe-table@4.6.17

2.引入并全局注册sun-form-v3组件

import { createApp } from "vue";

import App from "./App.vue";
import ElementPlus from "element-plus";
import "sun-form-v3/dist/style.css";
import "element-plus/dist/index.css";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import sunFormV3 from "sun-form-v3";
import VxeUITable from "vxe-table";

import "vxe-table/lib/style.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
app
  .use(sunFormV3)
  .use(ElementPlus, {
    locale: zhCn,
  })
  .use(VxeUITable)
  .mount("#app");

3.在 Vue3 模版中使用设计器组件

<script setup>
import { ref, watch, onMounted } from "vue";
//请求成功回调
const httpSuccessHandle = (res) => {
  console.log(res);
};
//请求失败回调
const httpErrorHandle = (err) => {
  console.log(err);
};
//请求之前发送参数
const httpBeforeSendHandle = () => {
  return {};
};
//每个请求所带的前缀
const baseUrl = "/api";
//请求头
const headers = {
  //比如store中的token放在请求头中
  token: "***",
};
//低代码组件传递的事件，如：低代码中按钮点击事件传递到项目中可以再此接收
const componentEvent = (params) => {
  console.log(params);
};
</script>

<template>
  <div class="h-screen">
    <designer
      ref="des"
      :httpSuccessHandle="httpSuccessHandle"
      :httpErrorHandle="httpErrorHandle"
      :httpBeforeSendHandle="httpBeforeSendHandle"
      :baseUrl="baseUrl"
      :headers="headers"
      @componentEvent="componentEvent"
    >
      <div>我是弹窗插槽内容</div>
    </designer>
  </div>
</template>

<style scoped></style>

4.在 Vue3 模版中使用渲染器组件

<template>
  <sunForm
    :widgetConfig="widgetConfig"
    :httpSuccessHandle="httpSuccessHandle"
    :httpErrorHandle="httpErrorHandle"
    :httpBeforeSendHandle="httpBeforeSendHandle"
    :baseUrl="baseUrl"
    :headers="headers"
    @componentEvent="componentEvent"
    ref="formRef"
  >
  </sunForm>
</template>

<script setup>
import { ref, reactive, nextTick } from "vue";
const widgetConfig = ref(null);
const httpSuccessHandle = (res) => {};
const httpErrorHandle = (err) => {};
const httpBeforeSendHandle = () => {
  return {};
};
const baseUrl = "/api";
const headers = {};
const formRef = ref(null);
//获取低代码所有的方法
const getDesigner = () => {
  return formRef.value.designer;
};
defineExpose({
  getDesigner: getDesigner,
});
getConfig();
</script>

<style scoped lang="scss"></style>