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 คุณสามารถคลิก Implement Visual Form Component from Zero เพื่อเรียนรู้
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 สำหรับข้อมูลเฉพาะ โปรดดูที่ซอร์สโค้ดอื่นๆ ที่มีพารามิเตอร์นี้
| โครงการ | สถานะ | คำอธิบาย |
|---|---|---|
| วิวเอเลฟอร์ม | เชื่อมต่อกับแบบฟอร์มที่ขับเคลื่อนด้วยข้อมูลตาม ElementUI | |
| f-เรนเดอร์ | เครื่องมือออกแบบรูปแบบวิชวลที่พัฒนาขึ้นเป็นพิเศษสำหรับ vue-ele-form | |
| vue-ele-form-json-editor | โปรแกรมแก้ไข JSON (ส่วนขยาย vue-ele-form) | |
| vue-ele-form-อัพโหลดไฟล์ | อัพโหลดองค์ประกอบการอัพโหลดไฟล์ (นามสกุล 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-ไดนามิก | รูปแบบไดนามิก (นามสกุล vue-ele-form) | |
| vue-ele-form-video-uploader | อัปโหลดองค์ประกอบการเพิ่มประสิทธิภาพวิดีโอ (ส่วนขยาย vue-ele-form) | |
| vue-ele-form-quill-editor | โปรแกรมแก้ไขข้อความแบบ Rich Text (ส่วนขยาย vue-ele-form) | |
| vue-ele-form-markdown-editor | โปรแกรมแก้ไขมาร์กดาวน์ (ส่วนขยาย vue-ele-form) | |
| vue-ele-form-bmap.php | ส่วนประกอบแผนที่ Baidu (ส่วนขยาย vue-ele-form) | |
| vue-ele-form-codemirror | โปรแกรมแก้ไขโค้ด (ส่วนขยาย vue-ele-form-gallery) | |
| vue-ele-form-แกลลอรี่ | ส่วนประกอบการแสดงภาพ/วิดีโอ (ส่วนขยาย vue-ele-form) | |
| vue-ele-form-data-editor | โปรแกรมแก้ไขข้อมูลที่มีน้ำหนักเบา (ส่วนขยาย vue-ele-form) |
การบริการลูกค้าที่ดีเยี่ยม | เซิงเจี๋ย หยวนจวง | ดาโมนี่ | xzusoft | ผู้เห็น | แหลมสูง |
หากคุณคิดว่ามันเป็นประโยชน์สำหรับคุณ คุณสามารถซื้อกาแฟสักแก้วให้ผู้เขียนเพื่อให้โอเพ่นซอร์สก้าวต่อไปได้ คลิกเพื่อเข้าสู่โค้ดคลาวด์เพื่อชื่นชม เข้าร่วมกลุ่มการสื่อสารด้านล่าง และส่งลิงก์มาให้ฉัน
ขอขอบคุณผู้คนที่แสนวิเศษเหล่านี้ (คีย์อีโมจิ):
จางเชาเจี๋ย - | ไวเซ่น | อิวานาเบธัตกาย |
โครงการนี้เป็นไปตามข้อกำหนดของผู้มีส่วนร่วมทุกคน ยินดีต้อนรับการบริจาคทุกรูปแบบ!
