Appearance
关于 sun-form-v3
0.简介
sun-form-v3
是基于 vue3
+tailwindcss
所编写的低代码框架引擎,其中 UI 基于 element-plus
,表格基于 vxe-table
。定位为前端开发人员提供快速搭建页面、实现不仅仅是表单的数据交互。
sun-form-v3
由设计器designer
和渲染器sunForm
两个组件构成。
sun-form-v3
提供了非常丰富的组件属性、表单交互和 api 方法等,可通过拖转或单击生成你想要的页面。
1.安装
shell
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
组件
javascript
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 模版中使用设计器组件
vue
<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 模版中使用渲染器组件
vue
<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>