f render

f-render | ElementUI に基づくフォーム デザイナー

• コミュニケーショングループ
• 導入
• 知らせ
• 特性
• デモ
• チュートリアル
• 1分でクイックアクセス
  • ステップ 1: インストール
  • ステップ 2: 登録する
  • ステップ 3: 使用する
• ユーザーモード
  • f-render に基づく構成
  • vue-ele-form に基づく設定
• カスタマイズされた
  • 公式拡張コンポーネントを追加しました (リッチテキスト拡張機能を例に挙げます)
    • コンポーネントのインストール
    • レジスタコンポーネント
    • 構成プロパティ
  • カスタムコンポーネントを追加する
    • コンポーネントを作成してグローバルに登録する
    • 設定の書き込み
    • 設定をマージして渡す
  • オリジナルコンポーネント構成＆フォーム構成をカスタマイズ
  • カスタマイズされた右側のタブ
  • スタイルのカスタマイズ
• 二次開発
• f-render Q&A集
• 小道具の説明
• スロット
• 生態学
• スポンサーに感謝します
• 貢献者

導入

f-render は、vue-ele-form に基づいて開発されたビジュアル フォーム デザイン ツールで、さまざまなプロセス エンジンや動的フォーム プロジェクトに適しており、開発時間を大幅に節約します。

知らせ

このデザイナーは独立して存在するものではなく、vue-ele-form に依存していることに注意してください。使用する前に、vue-ele-form のドキュメントを必ずお読みください。

特性

• コンポーネント モード: コンポーネント モードでアクセスすると、1 分で簡単にアクセスできます。
• 小さいサイズ: Gzip 圧縮後約100k 。
• 拡張が簡単:不更改源码プロパティとコンポーネントを追加、削除、または変更できます。

デモ

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

チュートリアル

f-render はソースコードを変更せずに大幅なカスタマイズを実現できますが、企業のニーズに応じて二次開発を行うことを希望する人も多くいます。

そこで、プロジェクト全体を最初から実装するためのチュートリアルを開始しました。実装プロセスに興味があり、f-render について考えている場合は、「ゼロからビジュアル フォーム コンポーネントを実装する」をクリックして学ぶことができます。

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 > 

ユーザーモード

動的フォームを 2 つの段階に分けます。

• 1 つ目は設計段階です。ドラッグ アンド ドロップによってフォームを設計します。
• 次に、ユーザー段階が来ます。つまり、ユーザーがデザインされたフォームを純粋なフォームの形式で入力できるようになります。

これら 2 つのフォーム段階をそれぞれデザイン モードとユーザー モードと呼びます。デザイン モードのフォーム構成についてはすでに説明しました。ユーザー モードのフォーム構成を見てみましょう。

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 に基づく設定

ビジュアルデザインとフォームの使用が同じシステムではなくなった場合は、 f-renderインストールせずに直接vue-ele-form使用できます。詳細は次のとおりです。

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

カスタマイズされた右側のタブ

次のように、 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 scoped追加しないように注意してください。追加しないと、オーバーライドが成功しません。

二次開発

属性と样式カスタマイズだけではあなたとあなたのプロダクト マネージャーの要件を満たすことができない場合は、カスタマイズされた開発が必要になると個人的には思います。コードをcloneか、ダウンロードすることをお勧めします。 gitee) に対応する変更を加えます。変更を処理するには 2 つの方法があります。

• これをプロジェクト ディレクトリに直接配置し、インストールのdependenciesを開発用のプロジェクトにコピーします。
• 直接開発して会社のプライベート サーバーに公開し、オープン ソースの場合は、GitHub または gitee に送信して、独自のものをインストールできます。

具体的な手順については、冒頭に記載したチュートリアルに詳しく記載しておりますので、ご支援いただければ幸いです。

f-render Q&A集

• 1. f-render でできないことは何ですか?
• 2. オプション URL 構成を実装するにはどうすればよいですか?

小道具の説明

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

スロット

• 左: 左のコンポーネントリスト
• メイン：ミドルエリア
• main-header: ヘッダ操作領域
• main-content: フォームデザインエリア
• 右: 右の属性設定エリア

例：

 < 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-editor		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-editor		リッチ テキスト エディター (vue-ele-form 拡張機能)
vue-ele-form-markdown-editor		マークダウンエディター (vue-ele-form 拡張機能)
vue-ele-form-b​​map		Baidu 地図コンポーネント (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 拡張機能)

スポンサーに感謝します

優れた顧客サービス	シェンジエ・ユアンチュアン	デーモニー	ズズソフト	見る人	甲高い

これが役に立ったと思われる場合は、オープンソースをさらに前進させるために著者にコーヒーを買って感謝してください。また、以下のコミュニケーション グループに参加して、リンクを私に送ってください。

貢献者

これらの素晴らしい人々に感謝します (絵文字キー):

張超傑 ?

ワイゼン

イワナベザットガイ

このプロジェクトは、あらゆる種類の貢献を歓迎します。