VForm3是一款基于Vue 3.x的低代码表单,支持Element PlusUI库,定位为前端开发人员提供快速搭建表单、实现表单交互和数据收集的功能。 VForm由表单设计器VFormDesigner和表单渲染器VFormRender两部分构成,VFormDesigner通过拖拽组件方式生成JSON格式的表单对象,VFormRender负责将表单JSON渲染为Vue组件。
npm i vform3-builds yarn add vform3-builds //另外需要下载依赖Element-plus,Vue3用plus npm i element-plus yarn add element-plus 1. 2. 3. 4. 5. 6. 7. 3.使用 引入并全局注册VForm组件 修改vue项目的main.js,如下所示(包含注释的6行代码): import { createApp } from 'vue' import App ...
VForm是一款基于Vue 2/Vue 3的低代码表单,支持Element UI、iView两种UI库,定位为前端开发人员提供快速搭建表单、实现表单交互和数据收集的功能。 VForm全称为Variant Form,寓意为灵活的、动态的、多样化的Vue低代码表单。 VForm由表单设计器VFormDesigner和表单渲染器VFormRender两部分构成,VFormDesigner通过拖拽组件方...
2.1、全局组件注册语法 Vue.component(组件名称,{ data:组件数据, template:组件模板内容 }) 1. 2. 3. 4. 定义一个名为button-counter的新组件 Vue.component('button-counter',{ data:function(){ return { count:0 } }, template:'<button v-on:click="count++">点击了{{count}}次</button>' })...
支持扩展组件API方法; > 支持浏览器缓存功能,自动保存表单最新状态,无须担心工作成果丢失; > 可导出Vue组件或HTML源码,方便在历史项目中集成; > 可导出、导入JSON配置,便于表单迁移,支持Vue2、Vue3两个版本; > 内置表单模板功能,常见表单模板化、一键生成; > 支持组件层次结构树视图查看; > 更多功能等待您体验....
使用背景技术栈：Vue3 + ElementUI-plus 安装使用方式一：npm i vform3-builds 方式二：注意，VForm 3依赖Element Plus，需先安装Element Plus 使用 VFormDesigner 组件：它是表单设计器，设计完成后生成特定的 json 数据结构，用于页面加载。在 main.js 中引入，在 vue 模板中使用。使用 VForm...
跟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-pl...
使用json描述表单内容 支持多平台(移动端和桌面端) 支持多个组件库(Element UI、Ant Design Vue、Antd Mobile Vue,Vant) 支持嵌套表单 支持任意数据的数组解构 支持副作用函数,统一处理表单内各项的数据联动 支持解构数据,减少自定义的数据转换 支持表单校验(使用async-validator,并内置了常用的邮箱、电话号码、ip地址...
在Vue3中,v-model的双向绑定原理实际上是基于表单元素的value属性和input事件来实现的。当我们使用v-model进行双向绑定时,Vue3会自动为表单元素添加value属性,并且监听input事件。这样一来,当表单元素的值发生改变时,input事件就会被触发,触发后会通知Vue3更新数据,从而实现了数据和表单元素之间的双向绑定。 对于el-f...
跟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-pl...