0.0.3 • Published 2 years ago
hlw-vform3-builds v0.0.3
VForm 3 Builds
本版本仅是为了个人学习使用,请勿其他人使用,如有此需求请参考下面的地址去访问原作者的官网,谢谢?
Packaged version of Variant Form 3
VForm 3 Builds 为 VForm 3 打包发布的库文件,不包含源码。
VForm 3,一款高效的 Vue 3.x 低代码表单,可视化设计,一键生成源码,享受更多摸鱼时间。
立即体验
友情链接
Fantastic-admin —— 一款开箱即用的 Vue 中后台管理系统框架(支持 Vue2/Vue3)
REBUILD —— 高度可定制化的企业管理系统
功能一览
> 拖拽式可视化表单设计;
> 支持PC、Pad、H5三种布局;
> 支持运行时动态加载表单;
> 支持表单复杂交互控制;
> 支持自定义CSS样式;
> 支持自定义校验逻辑;
> 支持国际化多语言;
> 可导出Vue组件、HTML源码;
> 可导出Vue的SFC单文件组件;
> 支持开发自定义组件;
> 支持响应式自适应布局;
> 支持VS Code插件;
> 更多功能等你探究...;
浏览器兼容性
Chrome(及同内核的浏览器如QQ浏览器、360浏览器等等),Firefox,Safari
跟 Vue 3.x 项目集成
1. 安装包
npm i vform3-builds
或
yarn add vform3-builds
2. 引入并全局注册 VForm 3 组件
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus' //引入element-plus库
import 'element-plus/dist/index.css' //引入element-plus样式
import VForm3 from 'vform3-builds' //引入VForm 3库
import 'vform3-builds/dist/designer.style.css' //引入VForm3样式
const app = createApp(App)
app.use(ElementPlus) //全局注册element-plus
app.use(VForm3) //全局注册VForm 3(同时注册了v-form-designer和v-form-render组件)
app.mount('#app')
3. 在 Vue 3.x 模板中使用表单设计器组件
<template>
<v-form-designer ref="vfdRef"></v-form-designer>
</template>
<script setup>
const vfdRef = ref(null)
</script>
<style lang="scss">
body {
margin: 0; /* 如果页面出现垂直滚动条,则加入此行CSS以消除之 */
}
</style>
4. 在 Vue 3.x 模板中使用表单渲染器组件
<template>
<div>
<v-form-render
:form-json="formJson"
:form-data="formData"
:option-data="optionData"
ref="vFormRef"
>
</v-form-render>
<el-button type="primary" @click="submitForm">Submit</el-button>
</div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
const formJson = reactive({
widgetList: [],
formConfig: {
modelName: "formData",
refName: "vForm",
rulesName: "rules",
labelWidth: 80,
labelPosition: "left",
size: "",
labelAlign: "label-left-align",
cssCode: "",
customClass: "",
functions: "",
layoutType: "PC",
jsonVersion: 3,
onFormCreated: "",
onFormMounted: "",
onFormDataChange: "",
},
});
const formData = reactive({});
const optionData = reactive({});
const vFormRef = ref(null);
const submitForm = () => {
vFormRef.value
.getFormData()
.then((formData) => {
// Form Validation OK
alert(JSON.stringify(formData));
})
.catch((error) => {
// Form Validation failed
ElMessage.error(error);
});
};
</script>
资源链接
文档官网:https://www.vform666.com/
在线演示:http://120.92.142.115:81/vform3/
Github 仓库:https://github.com/vform666/variant-form3-vite
Gitee 仓库:https://gitee.com/vdpadmin/variant-form3-vite
更新日志:https://www.vform666.com/changelog.html
技术交流群:扫如下二维码加群