f-render es una herramienta de diseño de formularios visuales desarrollada en base a vue-ele-form. Es adecuada para varios motores de procesos y proyectos de formularios dinámicos, lo que le ahorra mucho tiempo de desarrollo;
Tenga en cuenta que este diseñador no existe de forma independiente, sino que se basa en vue-ele-form. Asegúrese de leer la documentación de vue-ele-form antes de usarlo.
100k
después de la compresión Gzip;不更改源码
; https://dream2023.gitee.io/f-render/
Aunque f-render puede lograr una gran personalización sin cambiar el código fuente, muchas personas todavía esperan realizar un desarrollo secundario de acuerdo con las necesidades de la empresa.
Así que lancé un tutorial para implementar todo el proyecto desde cero. Si está interesado en el proceso de implementación y piensa en f-render, puede hacer clic en Implementar componente de formulario visual desde cero para aprender.
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 >
Dividimos las formas dinámicas en dos etapas:
A estas dos etapas las llamamos modo de diseño de formularios y modo de usuario respectivamente. Ya hemos hablado de la configuración del formulario en modo diseño. Veamos la configuración del formulario en modo usuario:
A través del atributo pure
, se puede utilizar directamente como formulario. El método de envío de datos es el mismo que vue-ele-form
. Consulte la documentación para obtener más detalles.
< 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 su diseño visual y uso de formularios ya no son el mismo sistema, puede usar vue-ele-form
directamente sin instalar f-render
. Los detalles son los siguientes:
< 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 >
Debe crear un componente personalizado de acuerdo con el documento vue-ele-form y registrarlo.
Puede consultar la configuración en el código fuente. Aquí hay ejemplos y descripciones de atributos:
// 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.js
f-render/src/fixtures/form-props.js
f-render/src/fixtures/form-item-common.js
f-render/src/fixtures/extends/[扩展组件名].js
Si desea modificar las propiedades de los componentes o las propiedades del formulario, reducir o agregar componentes, puede拷贝到自己的项目
, consultar las instrucciones de configuración anteriores, realizar cambios y pasarlos:
<!-- formProps 是表单属性 -->
<!-- comps 是组件列表和属性 -->
<!-- formItemCommon 是表单项通用属性配置 -->
< f-render
:form-props =" formProps "
:comps =" comps "
:form-item-common =" formItemCommon "
/>
Específicamente, si queremos que cada componente input
lleve clearable: true
, podemos hacer esto:
< 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 >
Podemos controlar si el panel derecho se muestra a través isShowRight
y personalizar el nombre específico del panel mostrado a través de rightTabs
, de la siguiente manera:
< 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 >
Simplemente sobrescriba el estilo directamente. Tenga cuidado de no agregar scoped
; de lo contrario, la anulación no se realizará correctamente.
Si sus requisitos y los de su gerente de producto no se pueden cumplir únicamente mediante la personalización de属性
y样式
, entonces se requiere un desarrollo personalizado. Personalmente, creo que el código general es muy simple. Puede clone
el código o descargarlo (se recomienda su uso). gitee), realice los cambios correspondientes. Hay dos formas de procesar los cambios:
dependencies
de instalación al proyecto para su desarrollo;Para detalles específicos, habrá un proceso detallado en el tutorial mencionado al principio. Espero que puedan apoyarlo.
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 ,
// ....
} ,
Ejemplo:
< template >
< f-render >
<!-- 左侧插槽 -->
< template v-slot:left =" {frender} " >
< div >
< div > left </ div >
< div > {{frender.comps}} </ div >
</ div >
</ template >
</ f-render >
< template > </ template
> </ template >
Los datos frender
son una colección de datos de componentes f-render
. Para obtener datos específicos, consulte el código fuente. Otras ranuras tienen este parámetro.
Proyecto | Estado | Descripción |
---|---|---|
formulario-vue-ele | Conéctese a formularios basados en datos basados en ElementUI | |
renderizado f | Herramienta de diseño de formularios visuales especialmente desarrollada para vue-ele-form | |
vue-ele-form-json-editor | Editor JSON (extensión vue-ele-form) | |
vue-ele-formulario-carga-archivo | cargar componente de carga de archivos (extensión vue-ele-form) | |
vue-ele-form-cargador de imágenes | Cargar componente de mejora de imagen (extensión vue-ele-form) | |
vue-ele-form-tree-select | Componente del cuadro de selección de árbol (extensión vue-ele-form) | |
vue-ele-form-table-editor | Editor de formularios (extensión vue-ele-form) | |
vue-ele-forma-dinámica | Formulario dinámico (extensión vue-ele-form) | |
vue-ele-form-video-uploader | Cargar componente de mejora de video (extensión vue-ele-form) | |
vue-ele-form-pluma-editor | Editor de texto enriquecido (extensión vue-ele-form) | |
vue-ele-form-markdown-editor | editor de rebajas (extensión vue-ele-form) | |
vue-ele-formulario-bmap | Componente de mapa de Baidu (extensión vue-ele-form) | |
vue-ele-form-codemirror | Editor de código (extensión vue-ele-form-gallery) | |
galería-vue-ele-form | Componente de visualización de imagen/vídeo (extensión vue-ele-form) | |
vue-ele-formulario-editor de datos | Editor de datos ligero (extensión vue-ele-form) |
Excelente servicio al cliente | Shengjie Yuanchuang | damonnie | xzusoft | verentrar | tono alto |
Si cree que le resulta útil, puede comprarle una taza de café al autor para que el código abierto llegue más lejos. Haga clic para ingresar a la nube de código para apreciarlo, unirse al grupo de comunicación a continuación y enviarme el enlace.
Gracias a estas maravillosas personas (tecla emoji):
Zhang Chao Jie ? | sabio | IWANABETHATGUY |
Este proyecto sigue la especificación de todos los contribuyentes. ¡Se aceptan contribuciones de cualquier tipo!