f render下載 - f render原始碼下載

f-render | 基於ElementUI 的表單設計器

交流群
介紹
注意
特性
Demo
教學
1 分鐘快速接入
- 第1 步：安裝
- 第2 步：註冊
- 第3 步：使用
使用者模式
- 基於f-render 的配置
- 基於vue-ele-form 的配置
客製化
- 新增官方擴充元件（以富文本擴充為例）
  - 安裝組件
  - 註冊組件
  - 配置屬性
- 新增自訂元件
  - 建立元件並全域註冊
  - 書寫配置
  - 合併配置並傳入
- 客製化原組件配置& 表單配置
- 客製化右側Tabs
- 樣式客製化
二次開發
f-render 問答片段錦
Props 說明
插槽
生態
特別感謝贊助者
Contributors

介紹

f-render 是基於vue-ele-form 開發的視覺化表單設計工具, 適用於各種流程引擎和動態表單項目，大大節省你的開發時間；

f-render 演示圖

注意

注意，此設計器不是獨立存在的，是依託於vue-ele-form，在使用前請務必閱讀vue-ele-form 的文檔。

特性

組件方式：以組件方式接入，1 分鐘輕鬆接入；
體積小：Gzip 壓縮後約100k ；
易擴充：可以在不更改源码的情況下增刪改屬性、元件；

Demo

https://dream2023.gitee.io/f-render/

教學

雖然f-render 可以做到在不更改原始碼的情況下實現大量的客製化，但是依然有不少人希望能夠根據公司的需求進行二次開發。

所以我推出了一個從0 實現整個專案的教程，如果感興趣f-render 的實現過程和思考，可以點擊從0 實現視覺化表單元件進行學習。

1 分鐘快速接入

第1 步：安裝

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

第2 步：註冊

 // 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 ) ;

第3 步：使用

 < 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 >

使用者模式

我們把動態表單分成兩個階段：

首先是設計階段：透過拖曳設計表單；
然後是使用者階段：將設計好的表單以純表單的形式讓使用者填寫。

我們別分稱這兩個階段的表單為設計模式和使用者模式。設計模式的表單配置我們已經講了，下面看使用者模式下的表單配置：

基於f-render 的配置

透過屬性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 的配置

如果你的視覺化設計和表單使用，不再一個系統，可以直接使用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.js
表單設定目錄： f-render/src/fixtures/form-props.js
表單項目通用屬性配置： f-render/src/fixtures/form-item-common.js
擴充元件目錄： f-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 >

客製化右側Tabs

我們可以透過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的依賴複製到項目，進行開發即可；
直接開發，然後發佈到公司私服，如果是開源，則可以發到GitHub 或者gitee，然後安裝自己的即可

具體的細節，開頭提的教學裡會有詳細的過程，希望大家可以支持一下。

f-render 問答片段錦

1、f-render 不能做什麼？
2.怎麼實現options URL 配置？

Props 說明

 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 ,
  // ....
} ,

插槽

left：左側元件列表
main: 中間區域
main-header: 頭部操作區
main-content: 表單設計區
right: 右側屬性配置區

舉例：

 < 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組件數據的集合，具體都有哪些數據，可以參考源碼，其它插槽均有此參數。

生態

Project	Status	Description
vue-ele-form		接基於ElementUI 的資料驅動表單
f-render		專為vue-ele-form 開發的視覺化表單設計工具
vue-ele-form-json-editor		JSON 編輯器(vue-ele-form 擴充)
vue-ele-form-upload-file		upload 檔案上傳元件(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-editor		富文本編輯器(vue-ele-form 擴充)
vue-ele-form-markdown-editor		markdown 編輯器(vue-ele-form 擴充)
vue-ele-form-bmap		百度地圖元件(vue-ele-form 擴充)
vue-ele-form-codemirror		程式碼編輯器(vue-ele-form-gallery 擴充)
vue-ele-form-gallery		圖片/影片展示組件(vue-ele-form 擴充)
vue-ele-form-data-editor		輕量級資料編輯器(vue-ele-form 擴充)