前端低代码form-generator的实现及新增自定义组件

这篇具有很好参考价值的文章主要介绍了前端低代码form-generator的实现及新增自定义组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

form-generator的实现及新增自定义组件

form-generator是什么?✨

form-generator的作者是这样介绍的:Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中;也可导出JSON表单,使用配套的解析器将JSON解析成真实的表单。

实际用大白话讲就是一个基于Element UI组件库的一个低代码平台,通过拖拽的方式,将单个的组件组合成你想要的样子,最终一键生成代码,可以直接放到你的Vue项目中,提高开发效率。

form-generator的实现✨

布局

前端低代码form-generator的实现及新增自定义组件,vue.js,javascript,前端,elementui
左侧:供拖拽的组件
中间:组件单个及组合预览效果
右侧:组件及表达的配置项

实现

  1. 把组件在config.js配置成json
  2. 通过拖拽把当前组件的json转化成vue render可以识别的数据格式

那请问什么样的数据格式是vue render可以识别的?
这个时候你就要了解下vue的render方法了~

render函数讲解

在使用render函数中,会使用到一个参数createElement,而这个createElement参数,本质上,也是一个函数,是vue中构建虚拟dom所使用的工具。下面就围绕着这个createElement来看一下。
在createelement方法,有三个参数:
前端低代码form-generator的实现及新增自定义组件,vue.js,javascript,前端,elementui
1. 第一个参数(必要参数):主要是用于提供dom中的html内容,类型可以是字符串、对象或函数。
2. 第二个参数(对象类型,可选):用于设置这个dom中的一些样式、属性、传的组件的参数、绑定事件之类的。
3. 第三个参数(类型是数组,数组元素类型是VNode,可选):主要用于设置分发的内容,如新增的其他组件。

注意:组件树中的所有vnode必须是唯一的 通过传入createElement参数,创建虚拟节点,然后再将节点返回给render返回出去。
总的来说,render函数的本质就是创建一个虚拟节点。

render方法了解的差不多了,那我们看下form-generator里面把json转化后的vnode
前端低代码form-generator的实现及新增自定义组件,vue.js,javascript,前端,elementui
到此form-generator大概的实现思路我们知道了,下面我们看下如何自定义组件,在form-generator的基础上添砖加瓦,实现我们项目的业务需求~

如何自定义组件✨

  1. src\components\generator\config.js 中添加一个json
  2. src\compontnes\目录下创建对应的组件
  3. main.js中全局注册刚创建的组件
  4. src\views\index\RightPanel.vue 中绑定第一步中json中添加的各个属性值

代码

//第一步:在/form-generator/src/components/generator/config.js里面加入组件json
{
    __config__: {
      label: '自定义按钮',
      showLabel: false,
      changeTag: true,
      labelWidth: null,
      tag: 'customButton',
      tagIcon: 'button',
      span: 24,
      layout: 'colFormItem',
    },
    __slot__: {
      default: '自定义按钮111'
    },
    style: {
      width: 'auto',
      height: '35px',
      margin: '20px',
      borderRadius: '30px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      color: '#FFF',
      backgroundColor: '#409EFF',
      borderColor: '#409EFF'
    },
    dataName: '自定义按钮',
    type: 'primary',
    icon: '',
    round: false,
    size: 'normal',
    site: 'center', // 按钮位置 左:flex-start 中:cneter 右:flex-end
    plain: false,
    circle: false,
    disabled: false,
    funcType: 'share'
}
//第二步:在components里面写自己的组件 
//如:/form-generator/src/components/customButton/index.vue

<template>
  <div ref="customButton" class="customButton" @click="handleShare">
    <div v-text="btnText"></div>
  </div>
</template>
    
<script>
export default {
  name: "customButton",
  data() {
    return {};
  },
  computed: {
    btnText() {
      return this.$attrs.dataName;
    },
  },
  methods: {
    handleShare() {
      this.$emit("openShare", "customButton");
    },
  },
};
</script>
//第三步:在/form-generator/src/views/index/main.js里面引入我们的自定义组件
import customButton from '@/components/customButton/index.vue'
Vue.component('customButton', customButton)
//第四步:在/form-generator/src/views/index/RightPanel.vue里面写上想要配置的属性值
<el-form-item v-if="activeData.__config__.tag === 'customButton'" label="按钮标题">
     <el-input v-model="activeData.dataName" placeholder="请输入按钮标题" @input="changeRenderKey"
     />
</el-form-item>

注意:这里的__config__.tag一定要唯一,和json里面的tag对应,来定义当前组件的配置项。

问题点:

  1. 大家一定很奇怪,这里我明明只配置了一条属性,为啥会展示这么多?
    前端低代码form-generator的实现及新增自定义组件,vue.js,javascript,前端,elementui
    其实是RightPanel这个文件里面,配置了许多默认展示的属性值,大家可以看看文件
  2. 看代码里面没有几个自定义的组件,那其他组件都是怎么来的呢?
    大家可以看下这个文件,里面会有一些其他组件的代码
    前端低代码form-generator的实现及新增自定义组件,vue.js,javascript,前端,elementui

以上是我对form-generator的一点了解,希望对和我遇到类似需求的你有一点点帮助,同时也期待大家的指点。文章来源地址https://www.toymoban.com/news/detail-655847.html

到了这里,关于前端低代码form-generator的实现及新增自定义组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 低代码开发重要工具:jvs-form(表单引擎)2.1.7功能清单及新增功能介绍

    在低代码开发平台中,表单是用于收集和编辑数据的页面。它通常用于创建、更新或查看单个记录的详细信息。 jvs-form是jvs快速开发平台的8大引擎的其中之一,它的特点: 与动态模型联动,支持动态的调整物理库表,也就是说无需先建库表,表单根据所需要的数据字段 可以

    2024年02月13日
    浏览(54)
  • 前端 -- 基础 VSCode 工具生成骨架标签新增代码 解释详解

    目录 文档类型声明标签 Lang  语言种类  字符集 !DOCTYPE   文档类型声明,作用就是告诉浏览器 当前的页面是 使用哪种 HTML 版本 来显示的网页  HTML 版本也很多呀 ,比如 :  HTML5 ,HTML4,XHTML 等  !DOCTYPE html  就告诉浏览器,当前页面 是采用的是 HTML5 版本  来显示的网页  注

    2024年02月11日
    浏览(41)
  • RuoYi-Vue-generator 代码生成模块 动态 多数据源切换 前端+后台

    需求场景: 若依框架的30张数据表 和 业务使用的数据表,同数据源,但分开的两个库,原生若依只支持主库的代码生成,故自己修改添加代码来实现 若依多数据源的使用 修改页面ruoyi-uisrcviewstoolgenimportTable.vue el-form 中新增 el-form-item 添加 data 添加方法 ruoyi-uisrcapitool

    2024年02月04日
    浏览(45)
  • flutter 中实现动态表单 form generator

    最近有人问我 flutter 前端如何处理动态表单。 这种是企业开发中的常见问题,特别是问卷和工作流审核表单。 今天我们就来实现下这个功能,主要是处理这个业务功能的思路。 原文 https://ducafecat.com/blog/flutter-form-generate-dymic-data http://www.form-create.com/designer/ https://github.com/Gav

    2024年02月12日
    浏览(39)
  • Form Generator 扩展子表单组件之表单校验(超详细)

    form-generator的作者是这样介绍的:Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中;也可导出JSON表单,使用配套的解析器将JSON解析成真实的表单。 但目前它提供的组件并不能满足我们在项目中的使用。所以该专栏主要讲解如何在该项目中从零

    2024年02月16日
    浏览(71)
  • 前端代码审查(Code Review)---具体实践规范会持续更新(新增Vite基础组件全局注册方式)

    针对目录结构、SCSS规范、JS规范、Vue规范 可参照官方给出的风格指南(Code Review) 1、POST/PUT/DELETE 请求按钮需要添加 loading 状态,防止重复提交。 建议使用 Element UI 提供的button 组件的loading属性,或者自己封装一个 loading 状态的按钮组件。 2、模板上超过两个的判断条件,写

    2024年04月17日
    浏览(87)
  • Form Generator 表单JSON数据储存以及JSON回显表单

    form-generator的作者是这样介绍的:Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中;也可导出JSON表单,使用配套的解析器将JSON解析成真实的表单。 但目前它提供的组件并不能满足我们在项目中的使用。所以该专栏主要讲解如何在该项目中从零

    2024年02月14日
    浏览(41)
  • vue3使用工作流bpmn.js实现保存 ,新增,修改 ,右边工具栏自定义,属性栏自定义

    vue3使用工作流bnpm.js实现保存 ,新增,修改 ,右边工具栏自定义,属性栏自定义

    2024年02月13日
    浏览(36)
  • 【开发方案】KaiOS 新增APN信息字段的代码实现

    KaiOS 基线不提供MCC、MNC、MVNO和bearer等信息的显示,因此在APN详情页无法查看单条APN的这些信息,跟Android 原生逻辑存在差异,需要自行实现。 KaiOS APN Settings模块代码-CSDN博客 KaiOS 运营商相关文件operator_variant_manager.js代码功能和调试-CSDN博客 KaiOS Data业务代码调试验证方法(无

    2024年02月22日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包