码农之家 - iframe
type: channel
link: http://blog.liyx.fun/index.php/tag/iframe/
items: form-generator 添加 iframe组件 若依

form-generator 添加 iframe组件 若依
type: item
date: 2023-06-29T16:24:00+08:00
description: form-generator的作者是这样介绍的:Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中;也可导出JSON表单,使用配套的解析器将JSON解析成真实的表单。本文是在 RuoYi-flowable 的基础上修改的，如果是在RuoYi原版本上修改也是差不多的，找到对应的文件就行。一、全局注册ifarme组件，src/main.js// iframe组件 import iFrame from "@/components/iFrame/index" Vue.component('iFrame', iFrame) 二、将组件添加到表单设计器config.js，src/utils/generator/config.js，在文件最后添加// iFrame组件 【左面板】 export const iframeComponents = [ { __config__: { label: 'iframe组件', showLabel: false, changeTag: true, tag: 'i-frame', tagIcon: 'row', defaultValue: undefined, span: 24, layout: 'colFormItem', document: '#' }, style: { height: '300px', width: '100%' }, height: 300, } ] 三、组件属性的可视化修改，/src/views/tool/build/RightPanel.vue <el-input :value="setDefaultValue(activeData.__config__.defaultValue)" :placeholder="activeData.__config__.tag !== 'i-frame' ? '请输入默认值' : '请输入链接地址(src)'" @input="onDefaultValueInput" /> // 导入添加iframeComponents import { inputComponents, selectComponents, layoutComponents, iframeComponents } from '@/utils/generator/config' // tagList() 添加iframe组件 computed: { tagList() { return [ { label: '输入型组件', options: inputComponents }, { label: '选择型组件', options: selectComponents }, { label: 'iframe组件', options: iframeComponents } ] }, } 四、生成html代码，/src/utils/generator/html.js// iframe组件生成html代码时带上src，非必要，在编辑表单页面点击运行按钮生成的html代码会带上src const layouts = { colFormItem(scheme) { const tagDom = (config.tag === 'i-frame' && config.defaultValue) ? `<${config.tag} :src="${config.defaultValue}" />` : tags[config.tag] ? tags[config.tag](scheme) : null } } // 添加iframe组件的html输出 const tags = { 'i-frame': el => { const { tag } = attrBuilder(el) const src = `:src=""` return `<${tag} ${src} />` }, } 五、json渲染表单添加iframe组件支持，src/components/render/render.jsfunction vModel(dataObject, defaultValue, config) { // iframe组件设置src if (config.tag === 'i-frame') { dataObject.attrs["src"] = defaultValue; return; } } 参考：https://github.com/JakHuang/form-generator表单设计器 · 开发教程.vue代码生成器 · 开发教程表单解析器 · 开发教程