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 - 文件上传地址(图片上传、文件上传、设计时富文本中的图片与文件上传)
- ......
fieldListApi：Object - 后端字段列表API，要求的数据格式的示例如下：[{label:"用户名",name:"username"}]
- URL：String - 请求链接，默认拼接在 globalDsv.BASEURL 之后
- nameKey：String - 字段名称的Key
- labelKey：String - 字段标签的Key
- headers：Object - 请求头
- params：Object - 请求参数
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

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 - 文件上传地址(富文本中的图片与文件上传)
- ......
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 官方技术交流群：扫如下二维码加群

variant-form3-builds

variant-form3-builds

起步

1. 安装NPM包

2. 引入并全局注册VForm 3组件

3. 使用表单设计器组件

4. 使用表单渲染器组件

Props & API

设计器 VFormDesigner

渲染器 VFormRender

一些VForm官方的资源链接

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

variant-form3-builds

variant-form3-builds

起步

1. 安装NPM包

2. 引入并全局注册VForm 3组件

3. 使用表单设计器组件

4. 使用表单渲染器组件

Props & API

设计器 VFormDesigner

渲染器 VFormRender

一些VForm官方的资源链接

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads