f render
v2.2.2
f-render é uma ferramenta de design de formulário visual desenvolvida com base no vue-ele-form. É adequada para vários mecanismos de processo e projetos de formulário dinâmico, economizando muito seu tempo de desenvolvimento;
Observe que este designer não existe de forma independente, mas depende do vue-ele-form. Certifique-se de ler a documentação do vue-ele-form antes de usá-lo.
100k após compactação Gzip;不更改源码; https://dream2023.gitee.io/f-render/
Embora o f-render possa alcançar uma grande personalização sem alterar o código-fonte, muitas pessoas ainda esperam realizar o desenvolvimento secundário de acordo com as necessidades da empresa.
Então lancei um tutorial para implementar todo o projeto do zero. Se você estiver interessado no processo de implementação e pensando em f-render, pode clicar em Implementar Visual Form Component from Zero 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 os formulários dinâmicos em duas etapas:
Chamamos esses dois estágios de modo de design de formulários e modo de usuário, respectivamente. Já falamos sobre a configuração do formulário no modo design. Vejamos a configuração do formulário no modo usuário:
Através do atributo pure , ele pode ser usado diretamente como um formulário. O método de envio de dados é o mesmo do 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 > Se o design visual e o uso do formulário não forem mais o mesmo sistema, você poderá usar vue-ele-form diretamente sem instalar f-render .
< 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 >Você precisa criar um componente personalizado de acordo com o documento vue-ele-form e registrá-lo.
Você pode consultar a configuração no código-fonte. Aqui estão exemplos e descrições 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.jsf-render/src/fixtures/form-props.jsf-render/src/fixtures/form-item-common.jsf-render/src/fixtures/extends/[扩展组件名].js Se você deseja modificar as propriedades do componente ou do formulário, reduzir ou adicionar componentes, você pode拷贝到自己的项目, consultar as instruções de configuração acima, fazer alterações e passá-las:
<!-- formProps 是表单属性 -->
<!-- comps 是组件列表和属性 -->
<!-- formItemCommon 是表单项通用属性配置 -->
< f-render
:form-props =" formProps "
:comps =" comps "
:form-item-common =" formItemCommon "
/> Especificamente, se quisermos que cada componente input carregue clearable: true , podemos fazer isso:
< 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 se o painel direito é exibido por meio isShowRight e personalizar o nome específico do painel exibido por meio de rightTabs , da seguinte forma:
< 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 > Apenas substitua o estilo diretamente. Tenha cuidado para não adicionar scoped , caso contrário a substituição não será bem-sucedida.
Se os requisitos de você e de seu gerente de produto não puderem ser atendidos apenas pela personalização属性e样式, então o desenvolvimento personalizado é necessário. Pessoalmente, acho que o código geral é muito simples. Você pode clone o código ou baixá-lo (recomenda-se usá-lo). gitee), faça as alterações correspondentes. Existem duas maneiras de processar as alterações:
dependencies de instalação para o projeto para desenvolvimento;Para detalhes específicos, haverá um processo detalhado no tutorial mencionado no início. Espero que você possa apoiá-lo.
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 ,
// ....
} , Exemplo:
< template >
< f-render >
<!-- 左侧插槽 -->
< template v-slot:left =" {frender} " >
< div >
< div > left </ div >
< div > {{frender.comps}} </ div >
</ div >
</ template >
</ f-render >
< template > </ template
> </ template > Os dados frender são uma coleção de dados do componente f-render . Para dados específicos, consulte o código-fonte. Outros slots possuem este parâmetro.
| Projeto | Status | Descrição |
|---|---|---|
| vue-ele-form | Conecte-se a formulários baseados em dados baseados em ElementUI | |
| f-renderizar | Ferramenta de design de formulário visual desenvolvida especialmente para vue-ele-form | |
| vue-ele-form-json-editor | Editor JSON (extensão vue-ele-form) | |
| vue-ele-form-upload-arquivo | componente de upload de arquivo de upload (extensão vue-ele-form) | |
| vue-ele-form-image-uploader | Carregar componente de aprimoramento de imagem (extensão vue-ele-form) | |
| vue-ele-form-tree-selecionar | Componente da caixa de seleção de árvore (extensão vue-ele-form) | |
| vue-ele-form-table-editor | Editor de formulário (extensão vue-ele-form) | |
| vue-ele-form-dinâmico | Formulário dinâmico (extensão vue-ele-form) | |
| vue-ele-form-video-uploader | Carregar componente de aprimoramento de vídeo (extensão vue-ele-form) | |
| vue-ele-form-quill-editor | Editor de rich text (extensão vue-ele-form) | |
| vue-ele-form-markdown-editor | editor de markdown (extensão vue-ele-form) | |
| vue-ele-form-bmap | Componente de mapa Baidu (extensão vue-ele-form) | |
| vue-ele-form-codemirror | Editor de código (extensão vue-ele-form-gallery) | |
| galeria vue-ele-form | Componente de exibição de imagem/vídeo (extensão vue-ele-form) | |
| editor de dados de formulário vue-ele | Editor de dados leve (extensão vue-ele-form) |
Excelente atendimento ao cliente | Shengjie Yuanchuang | Damonnie | xzusoft | verentrar | agudo |
Se você acha que é útil para você, você pode comprar uma xícara de café para o autor para fazer o código aberto ir mais longe. Clique para entrar na nuvem de código para apreciá-lo, junte-se ao grupo de comunicação abaixo e envie-me o link.
Os agradecimentos vão para essas pessoas maravilhosas (chave emoji):
Zhang Chaojie ? | sábio | IWANABETHATGUY |
Este projeto segue as especificações de todos os contribuidores. Contribuições de qualquer tipo são bem-vindas!
