f render
v2.2.2
f-render ist ein visuelles Formulardesign-Tool, das auf Basis von vue-ele-form entwickelt wurde. Es eignet sich für verschiedene Prozess-Engines und dynamische Formularprojekte und spart Ihnen erheblich Entwicklungszeit.
Beachten Sie, dass dieser Designer nicht unabhängig existiert, sondern auf vue-ele-form basiert. Bitte lesen Sie unbedingt die Dokumentation von vue-ele-form, bevor Sie ihn verwenden.
100k nach der Gzip-Komprimierung;不更改源码; https://dream2023.gitee.io/f-render/
Obwohl f-render eine große Menge an Anpassungen erreichen kann, ohne den Quellcode zu ändern, hoffen viele Menschen immer noch, eine Sekundärentwicklung entsprechend den Anforderungen des Unternehmens durchführen zu können.
Deshalb habe ich ein Tutorial gestartet, um das gesamte Projekt von Grund auf zu implementieren. Wenn Sie sich für den Implementierungsprozess und die Überlegungen zu f-render interessieren, können Sie auf „Visuelle Formkomponente von Null aus implementieren“ klicken, um es zu lernen.
yarn add element-ui # npm install element-ui -S
yarn add vue-ele-form # npm install vue-ele-form -S
yarn add f-render # npm install f-render -S // vue-ele-form 的注册可参考：https://www.yuque.com/chaojie-vjiel/vbwzgu/xl46cd
import EleForm from "vue-ele-form" ;
import FRender from "f-render" ;
import ElementUI from "element-ui" ;
import "element-ui/lib/theme-chalk/index.css" ;
Vue . use ( ElementUI ) ;
Vue . use ( EleForm ) ;
Vue . component ( "f-render" , FRender ) ; < template >
< f-render
@save =" handleSave "
:loading =" loading "
height =" calc(100vh - 60px) "
:config =" formConfig "
/>
</ template >
< script >
export default {
data ( ) {
return {
loading : false ,
formConfig : { }
} ;
} ,
methods : {
handleSave ( res ) {
// 这里是保存到 localStorage，你可以保存到服务器
localStorage . setItem ( "form-config" , res ) ;
this . $message . success ( "保存成功啦~" ) ;
}
} ,
mounted ( ) {
// 模拟异步加载
this . loading = true ;
setTimeout ( ( ) => {
this . loading = false ;
this . formConfig = localStorage . getItem ( "form-config" ) || "" ;
} , 1000 ) ;
}
} ;
</ script > Wir unterteilen dynamische Formen in zwei Phasen:
Wir nennen diese beiden Phasen des Formularentwurfsmodus bzw. Benutzermodus. Wir haben bereits über die Formularkonfiguration im Designmodus gesprochen. Schauen wir uns die Formularkonfiguration im Benutzermodus an:
Durch das Attribut pure kann es direkt als Formular verwendet werden. Die Datenübermittlungsmethode ist die gleiche wie bei vue-ele-form . Weitere Informationen finden Sie in der Dokumentation.
< template >
< f-render
v-model =" formData "
:request-fn =" handleSubmit "
@request-success =" handleSuccess "
:config =" formConfig "
pure
/>
</ template >
< script >
export default {
data ( ) {
return {
formData : { } ,
formConfig : ""
} ;
} ,
methods : {
handleSubmit ( data ) {
// eslint-disable-next-line no-console
console . log ( data ) ;
return Promise . resolve ( ) ;
} ,
handleSuccess ( ) {
this . $message . success ( "创建成功" ) ;
}
} ,
mounted ( ) {
// 模拟异步加载
this . loading = true ;
setTimeout ( ( ) => {
this . loading = false ;
this . formConfig = localStorage . getItem ( "form-config" ) || "" ;
} , 1000 ) ;
}
} ;
</ script > Wenn Ihr visuelles Design und Ihre Formularverwendung nicht mehr dasselbe System sind, können Sie vue-ele-form direkt verwenden, ohne f-render zu installieren. Die Details sind wie folgt:
< template >
< ele-form
v-model =" formData "
:request-fn =" handleSubmit "
@request-success =" handleSuccess "
v-if =" formConfig "
v-bind =" formConfig "
/>
</ template >
< script >
export default {
data ( ) {
return {
formData : { } ,
formConfig : null
} ;
} ,
methods : {
handleSubmit ( data ) {
// eslint-disable-next-line no-console
console . log ( data ) ;
return Promise . resolve ( ) ;
} ,
handleSuccess ( ) {
this . $message . success ( "创建成功" ) ;
}
} ,
mounted ( ) {
// 模拟异步加载
setTimeout ( ( ) => {
try {
// 这里必须对字符串进行反序列化
this . formConfig = eval ( `( ${ localStorage . getItem ( "form-config" ) } )` ) ;
} catch {
this . $message . error ( "数据解析失败" ) ;
}
} , 1000 ) ;
}
} ;
</ script > yarn add vue-ele-form-quill-editor Vue . component ( "quill-editor" , EleFormQuillEditor ) ; < template >
<!-- 省略其它属性 -->
< f-render :comps =" comps " />
</ template >
< script >
// 默认配置
import comps from "f-render/src/fixtures/comps" ;
// 富文本配置
import quillEditor from "f-render/src/fixtures/extends/quill-editor" ;
// 可以更改显示组件位置，默认为 10
// 这里更改为 2，显示更靠前
quillEditor . sort = 2 ;
export default {
data ( ) {
return {
// 拼接上即可
comps : comps . concat ( quillEditor )
} ;
}
} ;
</ script >Sie müssen eine benutzerdefinierte Komponente gemäß dem vue-ele-form-Dokument erstellen und registrieren.
Sie können sich auf die Konfiguration im Quellcode beziehen. Hier finden Sie Beispiele und Attributbeschreibungen:
// custom-url.js
export default {
// 假如这个组件叫 url（必填）
type : "custom-url" ,
// 默认标签名（必填）
label : "URL" ,
// 用于排序，值越小，越靠前
sort : 1 ,
// 属性配置
config : {
// 属性配置说明地址（可省略）
url : "https://www.xxx.com" ,
// 组件属性配置（不知道啥是组件属性，可以看一下界面右侧）
attrs : {
// config 配置 参考 FormDesc:
// https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf#KOPkD
config : {
// max 为属性名
max : {
type : "number" ,
label : "最大输入长度"
} ,
name : {
type : "input" ,
label : "原生 name" ,
// 必填
required : true
}
// ....
} ,
// 默认值，如果在配置文件里设置了，则每个组件都会携带
data : {
name : "url"
}
} ,
// 表单项配置，是 FormDesc 中非 attrs 的其它配置，
// 具体可看：https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf#hl4pm
common : {
config : {
// 默认值
default : {
type : "input" ,
label : "默认值"
}
} ,
data : { }
}
}
} ; < template >
<!-- 省略其它属性 -->
< f-render :comps =" comps " />
</ template >
< script >
import comps from "f-render/src/fixtures/comps" ;
import customUrl from "some/path/custom-url" ;
export default {
data ( ) {
return {
comps : comps . concat ( customUrl )
} ;
}
} ;
</ script >f-render/src/fixtures/comps.jsf-render/src/fixtures/form-props.jsf-render/src/fixtures/form-item-common.jsf-render/src/fixtures/extends/[扩展组件名].js Wenn Sie Komponenteneigenschaften oder Formulareigenschaften ändern, Komponenten reduzieren oder hinzufügen möchten, können Sie拷贝到自己的项目, die obigen Konfigurationsanweisungen lesen, Änderungen vornehmen und diese übergeben:
<!-- formProps 是表单属性 -->
<!-- comps 是组件列表和属性 -->
<!-- formItemCommon 是表单项通用属性配置 -->
< f-render
:form-props =" formProps "
:comps =" comps "
:form-item-common =" formItemCommon "
/> Wenn wir insbesondere möchten, dass jede input clearable: true trägt, können wir Folgendes tun:
< template >
<!-- 其它属性省略 -->
<!-- 将更改后的 comps 传递过去即可 -->
< f-render :comps =" comps " />
</ template >
< script >
import comps from "f-render/src/fixtures/comps" ;
// 查找 input 组件，当然你也可以看源码，直接查看索引
const inputIndex = comps . findIndex ( item => item . type === "input" ) ;
// 更改 config.attrs.data 值即可
comps [ inputIndex ] . config . attrs . data = { clearable : true } ;
export default {
data ( ) {
return {
comps
} ;
}
} ;
</ script > Wir können über isShowRight steuern, ob das rechte Panel angezeigt wird, und den spezifischen Namen des angezeigten Panels über rightTabs wie folgt anpassen:
< template >
<!-- 定制化右侧 tabs -->
< f-render :right-tabs =" tabs " />
</ template >
< script >
export default {
data ( ) {
return {
tabs : [
{ label : "表单项属性配置" , name : "form-item-common" } ,
{ label : "组件属性配置" , name : "form-item-attrs" }
// 注释下面的内容，就可以不显示
// { label: "表单配置", name: "form-props" }
]
} ;
}
} ;
</ script > Überschreiben Sie einfach den Stil direkt und fügen Sie scoped nicht hinzu, da die Überschreibung sonst nicht erfolgreich ist.
Wenn die Anforderungen von Ihnen und Ihrem Produktmanager nicht allein durch die Anpassung von属性und样式erfüllt werden können, ist eine individuelle Entwicklung erforderlich. Ich persönlich halte den gesamten Code für sehr einfach. Sie können den Code clone oder herunterladen gitee), nehmen Sie entsprechende Änderungen vor. Es gibt zwei Möglichkeiten, die Änderungen zu verarbeiten:
dependencies zur Entwicklung in das Projekt.Für spezifische Details finden Sie im eingangs erwähnten Tutorial einen detaillierten Prozess. Ich hoffe, Sie können ihn unterstützen.
props : {
// 表单内容
config : {
type : [ Object , String ] ,
required : true
} ,
// 设计器整体高度
height : {
type : [ String , Number ] ,
default : "400px"
} ,
// 保存格式
saveFormat : {
type : String ,
default : "string" ,
validator ( val ) {
return [ "object" , "string" ] . includes ( val ) ;
}
} ,
// 是否纯净（用于显示表单）
pure : Boolean ,
// 表单配置
formProps : {
type : Object ,
default : ( ) => formProps
} ,
// 表单项配置
formItemCommon : {
type : Object ,
default : ( ) => formItemCommonDefault
} ,
// 组件列表
comps : {
type : Array ,
default : ( ) => comps
} ,
// 操作配置
operations : {
type : Array ,
default : ( ) => [ "preview" , "data" , "code" , "batch" , "clear" , "save" ]
} ,
// 是否显示右侧
isShowRight : {
type : Boolean ,
default : true
} ,
// 右侧属性面板 Tabs
rightTabs : {
type : Array ,
default : ( ) => [
{ label : "表单项属性配置" , name : "form-item-common" } ,
{ label : "组件属性配置" , name : "form-item-attrs" } ,
{ label : "表单配置" , name : "form-props" }
]
} ,
// 是否在加载
loading : Boolean ,
// 表单相关（pure 为 true 时）, 同 vue-ele-form
// https://www.yuque.com/chaojie-vjiel/vbwzgu/dyw8a7
requestFn : Function ,
isLoading : Boolean ,
formError : Object ,
// ....
} , Beispiel:
< template >
< f-render >
<!-- 左侧插槽 -->
< template v-slot:left =" {frender} " >
< div >
< div > left </ div >
< div > {{frender.comps}} </ div >
</ div >
</ template >
</ f-render >
< template > </ template
> </ template > Bei den frender -Daten handelt es sich um eine Sammlung von f-render Komponentendaten. Weitere Informationen finden Sie im Quellcode. Andere Slots verfügen über diesen Parameter.
| Projekt | Status | Beschreibung |
|---|---|---|
| vue-ele-form | Stellen Sie eine Verbindung zu datengesteuerten Formularen basierend auf ElementUI her | |
| f-render | Visuelles Formulardesign-Tool, das speziell für vue-ele-form entwickelt wurde | |
| vue-ele-form-json-editor | JSON-Editor (vue-ele-form-Erweiterung) | |
| vue-ele-form-upload-datei | Datei-Upload-Komponente hochladen (vue-ele-form-Erweiterung) | |
| vue-ele-form-image-uploader | Bildverbesserungskomponente hochladen (vue-ele-form-Erweiterung) | |
| vue-ele-form-tree-select | Baumauswahlfeldkomponente (vue-ele-form-Erweiterung) | |
| vue-ele-form-table-editor | Formulareditor (vue-ele-form-Erweiterung) | |
| vue-ele-form-dynamic | Dynamisches Formular (vue-ele-form-Erweiterung) | |
| vue-ele-form-video-uploader | Videoverbesserungskomponente hochladen (vue-ele-form-Erweiterung) | |
| vue-ele-form-quill-editor | Rich-Text-Editor (vue-ele-form-Erweiterung) | |
| vue-ele-form-markdown-editor | Markdown-Editor (vue-ele-form-Erweiterung) | |
| vue-ele-form-bmap | Baidu-Kartenkomponente (vue-ele-form-Erweiterung) | |
| vue-ele-form-codemirror | Code-Editor (vue-ele-form-gallery-Erweiterung) | |
| vue-ele-form-gallery | Bild-/Videoanzeigekomponente (vue-ele-form-Erweiterung) | |
| vue-ele-form-data-editor | Leichter Dateneditor (vue-ele-form-Erweiterung) |
Exzellenter Kundenservice | Shengjie Yuanchuang | Damonnie | xzusoft | seeenter | hoch gestimmt |
Wenn Sie der Meinung sind, dass es für Sie hilfreich ist, können Sie dem Autor eine Tasse Kaffee kaufen, um Open Source voranzutreiben. Klicken Sie, um die Code-Wolke zu betreten, um es zu schätzen, treten Sie der Kommunikationsgruppe unten bei und senden Sie mir den Link.
Der Dank geht an diese wunderbaren Menschen (Emoji-Taste):
Zhang Chaojie ? | Weise | IWANABETHATGUY |
Dieses Projekt folgt der All-Contributors-Spezifikation. Beiträge jeglicher Art sind willkommen!
