variant-form3-builds v1.6.30
variant-form3-builds
Packaged version of Variant Form 3.x - For Vue 3.x
此为非官方版,仅私人及公司项目使用如需使用Vform3请下载: 官方版
起步
1. 安装NPM包
npm i variant-form3-builds
2. 引入并全局注册VForm 3组件
/* ... some code */
// 引入element-plus库
import ElementPlus from 'element-plus'
// 引入element-plus样式
import 'element-plus/dist/index.css'
// 引入本库
import VForm3 from 'variant-form3-builds'
// 设计器样式
import 'variant-form3-builds/dist/designer.style.css'
// 渲染器样式
import 'variant-form3-builds/dist/render.style.css'
/* ... some code */
// 全局注册element-plus
app.use(ElementPlus)
// 全局注册组件
// 设计
app.use(VForm3.VFormDesigner)
// 渲染
app.use(VForm3.VFormRender)
/* ... some code */
3. 使用表单设计器组件
<template>
<v-form-designer ref="vFormDesignRef"></v-form-designer>
</template>
<script setup>
const vFormDesignRef = ref(null)
</script>
<style lang="scss">
body {
margin: 0; /* 如果页面出现垂直滚动条,则加入此行CSS以消除 */
}
</style>
4. 使用表单渲染器组件
<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":""}, "dataSource": []})
const formData = reactive({})
const optionData = reactive({})
const vFormRef = ref(null)
const submitForm = () => {
vFormRef.value.getFormData().then(formData => {
// 验证通过
alert( JSON.stringify(formData) )
}).catch(error => {
// 验证失败
ElMessage.error(error)
})
}
</script>
Props & API
设计器 VFormDesigner
props:
- globalDsv:Object - 全局数据源变量
- BASEURL:String - 用于数据源、获取服务器字段的请求时使用:
https://www.baidu.com
- dataSourceDefaultParams: Object - 用于在设计时对 全局数据源请求时的默认参数 进行说明,{参数名:描述}
- commonDataSources(未完成): Object - 用于在设计时快速新增通用数据源,会使用dataSourceDefaultParams设定的参数
- token:String - 用于数据源、获取服务器字段的请求时使用的全局请求头,用于登录及权限校验
- tokenKey:String - 用于指定
token
请求头名称 - uploadUrl:String - 文件上传地址(图片上传、文件上传、设计时富文本中的图片与文件上传)
- ......
- BASEURL:String - 用于数据源、获取服务器字段的请求时使用:
fieldListApi:Object - 后端字段列表API,要求的数据格式的示例如下:
[{label:"用户名",name:"username"}]
- URL:String - 请求链接,默认拼接在
globalDsv.BASEURL
之后 - nameKey:String - 字段名称的Key
- labelKey:String - 字段标签的Key
- headers:Object - 请求头
- params:Object - 请求参数
- URL:String - 请求链接,默认拼接在
bannedWidgets:String[] - 禁止显示的组件名称数组
designerConfig:Object - 设计器配置
- header:Boolean - 是否显示Header,默认值
false
- languageMenu:Boolean - 是否显示语言切换菜单,默认值
true
- externalLink:Boolean - 是否显示GitHub、文档等外部链接,默认值
true
- formTemplates:Boolean - 是否显示表单模板,默认值
false
- eventCollapse:Boolean - 是否显示组件事件属性折叠面板,默认值
true
- widgetNameReadonly:Boolean - 禁止修改组件名称,默认值
false
- clearDesignerButton:Boolean - 是否显示清空设计器按钮,默认值
true
- previewFormButton:Boolean - 是否显示预览表单按钮,默认值
true
- importJsonButton:Boolean - 是否显示导入JSON按钮,默认值
true
- exportJsonButton:Boolean - 是否显示导出JSON器按钮,默认值
true
- exportCodeButton:Boolean - 是否显示导出代码按钮,默认值
false
- generateSFCButton:Boolean - 是否显示生成SFC按钮,默认值
false
- toolbarMaxWidth:Number|String - 设计器工具按钮栏最大宽度(单位像素),默认值
450
- toolbarMinWidth:Number|String - 设计器工具按钮栏最小宽度(单位像素),默认值
300
- presetCssCode:String - 设计器预设CSS样式代码,默认值
''
- resetFormJson:Boolean - 是否在设计器初始化时将表单内容重置为空,默认值
false
- header:Boolean - 是否显示Header,默认值
API:
- getFormJson:获取表单JSON
setFormJson:设置表单JSON
(formJson: any) => void
clearDesigner:清空表单设计器
- refreshDesigner:刷新表单设计器
changeLanguage:切换语言【部分暂未支持】
(langName: string) => void
upgradeFormJson:升级表单json,以补充最新的组件属性
(formJson: any) => void
allFormForEach:全表单组件递归,并对字段组件执行回调
(callback: (widget: any) => {}, /* 排除的组件type */ exclude: string[]) => void
getServerFieldList:获取通过
fieldListApi
得到的服务器返回的字段列表- getUsedServerFieldList:获取已使用的服务器字段列表
getUsedFieldList:获取已使用的表单字段列表
() => [string[]/*使用的服务器字段*/, string[]/*表单自有字段*/]
渲染器 VFormRender
props:
globalDsv:Object - 全局数据源变量
- BASEURL:String - 用于数据源、获取服务器字段的请求时使用:
https://www.baidu.com
- dataSourceDefaultParams: Object - 用于数据源请求时的默认参数,{参数名:值}
- token:String - 用于数据源、获取服务器字段的请求时使用的全局请求头,用于登录及权限校验
- tokenKey:String - 用于指定
token
请求头名称 - uploadUrl:String - 文件上传地址(富文本中的图片与文件上传)
- ......
- BASEURL:String - 用于数据源、获取服务器字段的请求时使用:
formJson:Object - 表单JSON配置
- formData:Object - 表单数据
vars:Object - 待注入对象 API:
changeLanguage:切换语言【部分暂未支持】
(langName: string) => void
getNativeForm:获取原生form引用
- getFormRef:获取渲染器组件实例
getWidgetRef:获取字段组件信息
(widgetName: string, showError = false) => any
clearFormDataModel:清空表单数据
setFormJson:设置表单Json
(formJson: any) => void
getFormData:获取表单数据
(needValidation: boolean) => void
setFormData:设置表单数据
(formData: any) => void
getFieldValue:获取指定字段的值
(fieldName: string) => any
setFieldValue:设置指定字段的值
(fieldName: string, fieldValue: any) => void
disableForm:禁用表单
- enableForm:启用表单
- resetForm:重置表单
- clearValidate:清空校验
disableWidgets:禁用字段组件
(widgetNames: string|string[]) => void
enableWidgets:启用字段组件
(widgetNames: string|string[]) => void
hideWidgets:隐藏字段组件
(widgetNames: string|string[]) => void
showWidgets:显示字段组件
(widgetNames: string|string[]) => void
getFieldWidgets:获取所有字段组件
- getContainerWidgets:获取所有容器组件
- getGlobalDsv:获取
globalDsv
对象
Events:
- loadSuccess: 表单加载成功,无参数
- loadFail: 表单加载失败,无参数
一些VForm官方的资源链接
文档官网:www.vform666.com 在线演示:演示站点 Github仓库:github.com/vform666/variant-form3-vite Gitee仓库:gitee.com/vdpadmin/variant-form3-vite 更新日志:changelog 订阅Pro版:www.vform666.com/pages/pro 官方技术交流群:扫如下二维码加群
11 months ago
11 months ago
12 months ago
11 months ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
10 months ago
10 months ago
12 months ago
12 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago