f render
v2.2.2
f-render — это инструмент визуального проектирования форм, разработанный на основе vue-ele-form. Он подходит для различных процессов и проектов динамических форм, что значительно экономит время разработки;
Обратите внимание, что этот конструктор не существует отдельно, а опирается на vue-ele-form. Перед его использованием обязательно прочтите документацию vue-ele-form.
100k после сжатия Gzip;不更改源码; https://dream2023.gitee.io/f-render/
Хотя f-render позволяет добиться большого количества настроек без изменения исходного кода, многие люди все еще надеются провести вторичную разработку в соответствии с потребностями компании.
Поэтому я запустил руководство по реализации всего проекта с нуля. Если вы заинтересованы в процессе реализации и думаете о f-render, вы можете нажать «Реализовать компонент визуальной формы с нуля», чтобы узнать.
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 > Динамические формы разделим на два этапа:
Мы называем эти два этапа режимом разработки форм и пользовательским режимом соответственно. Мы уже говорили о настройке формы в режиме дизайна. Давайте посмотрим на настройку формы в пользовательском режиме:
Благодаря атрибуту pure его можно использовать непосредственно в качестве формы. Метод отправки данных такой же, как и 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 > Если ваш визуальный дизайн и использование форм больше не являются одной и той же системой, вы можете использовать vue-ele-form напрямую, не устанавливая 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 >Вам необходимо создать собственный компонент в соответствии с документом vue-ele-form и зарегистрировать его.
Вы можете обратиться к конфигурации в исходном коде. Вот примеры и описания атрибутов:
// 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 Если вы хотите изменить свойства компонента или свойства формы, уменьшить или добавить компоненты, вы можете拷贝到自己的项目, обратиться к приведенным выше инструкциям по настройке, внести изменения и передать их:
<!-- formProps 是表单属性 -->
<!-- comps 是组件列表和属性 -->
<!-- formItemCommon 是表单项通用属性配置 -->
< f-render
:form-props =" formProps "
:comps =" comps "
:form-item-common =" formItemCommon "
/> В частности, если мы хотим, чтобы каждый input компонент имел атрибут clearable: true , мы можем сделать это:
< 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 > Мы можем контролировать отображение правой панели с помощью атрибута isShowRight и настраивать конкретное имя отображаемой панели с помощью rightTabs следующим образом:
< 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 > Просто перезапишите стиль напрямую. Будьте осторожны и не добавляйте scoped , иначе переопределение не будет успешным.
Если требования вас и вашего менеджера по продукту не могут быть удовлетворены только за счет настройки属性и样式, то требуется индивидуальная разработка. Лично я считаю, что общий код очень прост. Вы можете clone код или загрузить его (рекомендуется использовать). gitee) , внесите соответствующие изменения. Обработать изменения можно двумя способами:
dependencies установки в проект для разработки;Конкретные детали подробно описаны в руководстве, упомянутом в начале. Надеюсь, вы сможете его поддержать.
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 ,
// ....
} , Пример:
< template >
< f-render >
<!-- 左侧插槽 -->
< template v-slot:left =" {frender} " >
< div >
< div > left </ div >
< div > {{frender.comps}} </ div >
</ div >
</ template >
</ f-render >
< template > </ template
> </ template > Данные frender представляют собой набор данных компонента f-render . Конкретные данные можно найти в исходном коде. Другие слоты имеют этот параметр.
| Проект | Статус | Описание |
|---|---|---|
| vue-ele-form | Подключайтесь к формам, управляемым данными, на основе ElementUI. | |
| f-рендеринг | Инструмент визуального дизайна форм, специально разработанный для vue-ele-form. | |
| vue-ele-form-json-редактор | Редактор JSON (расширение vue-ele-form) | |
| vue-ele-form-upload-file | компонент загрузки файла (расширение vue-ele-form) | |
| vue-ele-form-image-uploader | Загрузить компонент улучшения изображения (расширение vue-ele-form) | |
| vue-ele-form-tree-select | Компонент поля выбора дерева (расширение vue-ele-form) | |
| vue-ele-form-table-editor | Редактор форм (расширение vue-ele-form) | |
| vue-ele-form-dynamic | Динамическая форма (расширение vue-ele-form) | |
| vue-ele-form-video-uploader | Загрузить компонент улучшения видео (расширение vue-ele-form) | |
| vue-ele-form-quill-редактор | Редактор форматированного текста (расширение vue-ele-form) | |
| vue-ele-form-markdown-редактор | редактор уценки (расширение vue-ele-form) | |
| vue-ele-form-bmap | Компонент карты Baidu (расширение vue-ele-form) | |
| vue-ele-form-codemirror | Редактор кода (расширение vue-ele-form-gallery) | |
| vue-ele-form-галерея | Компонент отображения изображения/видео (расширение vue-ele-form) | |
| редактор данных vue-ele-form | Облегченный редактор данных (расширение vue-ele-form) |
Отличное обслуживание клиентов | Шэнцзе Юаньчуан | Дэймонни | xzusoft | видетьвход | высокий |
Если вы считаете, что это полезно для вас, вы можете купить автору чашку кофе, чтобы открытый исходный код пошел дальше. Нажмите, чтобы войти в облако кода, чтобы оценить его, присоединиться к коммуникационной группе ниже и отправить мне ссылку.
Спасибо этим замечательным людям (ключ смайлика):
Чжан Чаоцзе ? | Уизен | ИВАНАБЕТАТПАРЬ |
Этот проект соответствует требованиям для всех участников. Любой вклад приветствуется!
