f render
v2.2.2
f-render est un outil de conception de formulaires visuels développé sur la base de vue-ele-form. Il convient à divers moteurs de processus et projets de formulaires dynamiques, ce qui permet d'économiser considérablement votre temps de développement ;
Notez que ce concepteur n'existe pas indépendamment, mais s'appuie sur vue-ele-form. Assurez-vous de lire la documentation de vue-ele-form avant de l'utiliser.
100k après compression Gzip ;不更改源码 ; https://dream2023.gitee.io/f-render/
Bien que f-render puisse réaliser un grand nombre de personnalisations sans modifier le code source, de nombreuses personnes espèrent toujours effectuer un développement secondaire en fonction des besoins de l'entreprise.
J'ai donc lancé un didacticiel pour implémenter l'ensemble du projet à partir de zéro. Si vous êtes intéressé par le processus d'implémentation et que vous pensez à f-render, vous pouvez cliquer sur Implémenter le composant de formulaire visuel à partir de zéro pour apprendre.
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 > Nous divisons les formes dynamiques en deux étapes :
Nous appelons respectivement ces deux étapes mode conception de formulaires et mode utilisateur. Nous avons déjà parlé de la configuration du formulaire en mode conception. Regardons la configuration du formulaire en mode utilisateur :
Grâce à l'attribut pure , il peut être utilisé directement comme formulaire. La méthode de soumission des données est la même que vue-ele-form .
< 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 > Si votre conception visuelle et votre utilisation de formulaire ne sont plus le même système, vous pouvez utiliser vue-ele-form directement sans installer f-render . Les détails sont les suivants :
< 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 >Vous devez créer un composant personnalisé selon le document vue-ele-form et l'enregistrer.
Vous pouvez vous référer à la configuration dans le code source. Voici des exemples et des descriptions d'attributs :
// 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 Si vous souhaitez modifier les propriétés des composants ou des formulaires, réduire ou ajouter des composants, vous pouvez拷贝到自己的项目, vous référer aux instructions de configuration ci-dessus, apporter des modifications et les transmettre :
<!-- formProps 是表单属性 -->
<!-- comps 是组件列表和属性 -->
<!-- formItemCommon 是表单项通用属性配置 -->
< f-render
:form-props =" formProps "
:comps =" comps "
:form-item-common =" formItemCommon "
/> Plus précisément, si nous voulons que chaque composant input porte clearable: true , nous pouvons faire ceci :
< 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 > Nous pouvons contrôler si le panneau de droite est affiché via isShowRight et personnaliser le nom spécifique du panneau affiché via rightTabs , comme suit :
< 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 > Écrasez simplement le style directement. Veillez à ne pas ajouter scoped , sinon le remplacement ne réussira pas.
Si vos exigences et celles de votre chef de produit ne peuvent pas être satisfaites uniquement par la personnalisation属性et样式, un développement personnalisé est nécessaire. Personnellement, je pense que le code global est très simple. Vous pouvez clone le code ou le télécharger (il est recommandé de l'utiliser). gitee), effectuez les modifications correspondantes. Il existe deux manières de traiter les modifications :
dependencies d'installation dans le projet pour le développement ;Pour des détails spécifiques, il y aura un processus détaillé dans le didacticiel mentionné au début. J'espère que vous pourrez le soutenir.
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 ,
// ....
} , Exemple:
< template >
< f-render >
<!-- 左侧插槽 -->
< template v-slot:left =" {frender} " >
< div >
< div > left </ div >
< div > {{frender.comps}} </ div >
</ div >
</ template >
</ f-render >
< template > </ template
> </ template > Les données frender sont une collection de données de composants f-render . Pour des données spécifiques, veuillez vous référer au code source. Les autres emplacements ont ce paramètre.
| Projet | Statut | Description |
|---|---|---|
| vue-ele-form | Connectez-vous à des formulaires basés sur les données basés sur ElementUI | |
| f-rendu | Outil de conception de formulaires visuels spécialement développé pour vue-ele-form | |
| vue-ele-form-json-editor | Éditeur JSON (extension vue-ele-form) | |
| vue-ele-form-upload-file | composant de téléchargement de fichier de téléchargement (extension vue-ele-form) | |
| vue-ele-form-image-uploader | Télécharger un composant d'amélioration d'image (extension vue-ele-form) | |
| vue-ele-form-tree-select | Composant boîte de sélection d'arbre (extension vue-ele-form) | |
| vue-ele-form-table-editor | Editeur de formulaire (extension vue-ele-form) | |
| vue-ele-form-dynamique | Formulaire dynamique (extension vue-ele-form) | |
| vue-ele-form-video-uploader | Télécharger un composant d'amélioration vidéo (extension vue-ele-form) | |
| vue-ele-form-quill-editor | Éditeur de texte enrichi (extension vue-ele-form) | |
| vue-ele-form-markdown-editor | éditeur de démarques (extension vue-ele-form) | |
| vue-ele-form-bmap | Composant de carte Baidu (extension vue-ele-form) | |
| vue-ele-form-codemirror | Éditeur de code (extension vue-ele-form-gallery) | |
| vue-ele-form-gallery | Composant d'affichage image/vidéo (extension vue-ele-form) | |
| vue-ele-form-data-editor | Éditeur de données léger (extension vue-ele-form) |
Excellent service client | Shengjie Yuanchuang | Damonnie | xzusoft | voirentrer | aigu |
Si vous pensez que cela vous est utile, vous pouvez acheter une tasse de café à l'auteur pour aller plus loin dans l'open source. Cliquez pour entrer dans le nuage de codes pour l'apprécier, rejoignez le groupe de communication ci-dessous et envoyez-moi le lien.
Merci à ces personnes merveilleuses (clé emoji) :
Zhang Chaojie ? | Sage | IWANABETHATGUY |
Ce projet suit la spécification de tous les contributeurs. Les contributions de toute nature sont bienvenues !
