f render

f-render |. Perancang formulir berdasarkan ElementUI

• Kelompok komunikasi
• memperkenalkan
• Melihat
• ciri
• Demo
• tutorial
• Akses cepat dalam 1 menit
  • Langkah 1: Instalasi
  • Langkah 2: Daftar
  • Langkah 3: Gunakan
• mode pengguna
  • Konfigurasi berdasarkan f-render
  • Konfigurasi berdasarkan vue-ele-form
• Disesuaikan
  • Menambahkan komponen ekstensi resmi (ambil ekstensi teks kaya sebagai contoh)
    • Pasang komponen
    • Daftarkan komponen
    • Properti konfigurasi
  • Tambahkan komponen khusus
    • Buat komponen dan daftarkan secara global
    • konfigurasi penulisan
    • Gabungkan konfigurasi dan teruskan
  • Konfigurasi komponen asli & konfigurasi formulir yang disesuaikan
  • Tab kanan yang disesuaikan
  • Kustomisasi gaya
• Perkembangan sekunder
• Koleksi Tanya Jawab f-render
• Deskripsi Alat Peraga
• celah
• ekologi
• Terima kasih khusus kepada sponsor
• Kontributor

memperkenalkan

f-render adalah alat desain bentuk visual yang dikembangkan berdasarkan vue-ele-form. Sangat cocok untuk berbagai mesin proses dan proyek bentuk dinamis, sangat menghemat waktu pengembangan Anda;

Melihat

Perhatikan bahwa desainer ini tidak berdiri sendiri, tetapi bergantung pada vue-ele-form. Pastikan untuk membaca dokumentasi vue-ele-form sebelum menggunakannya.

ciri

• Mode komponen: Akses dalam mode komponen, akses mudah dalam 1 menit;
• Ukuran kecil: sekitar 100k setelah kompresi Gzip;
• Mudah untuk diperluas: properti dan komponen dapat ditambahkan, dihapus, atau dimodifikasi不更改源码;

Demo

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

tutorial

Meskipun f-render dapat mencapai banyak penyesuaian tanpa mengubah kode sumber, banyak orang masih berharap untuk melakukan pengembangan sekunder sesuai dengan kebutuhan perusahaan.

Jadi saya meluncurkan tutorial untuk mengimplementasikan keseluruhan proyek dari awal. Jika Anda tertarik dengan proses implementasi dan memikirkan f-render, Anda dapat mengklik Implementasi Komponen Formulir Visual dari Nol untuk mempelajarinya.

Akses cepat dalam 1 menit

Langkah 1: Instalasi

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 

Langkah 2: Daftar

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

Langkah 3: Gunakan

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

mode pengguna

Kami membagi bentuk dinamis menjadi dua tahap:

• Yang pertama adalah tahap desain: mendesain formulir melalui drag and drop;
• Kemudian tibalah tahap pengguna: membiarkan pengguna mengisi formulir yang dirancang dalam bentuk formulir murni.

Kami masing-masing menyebut dua tahap mode desain formulir dan mode pengguna. Kita telah membicarakan tentang konfigurasi formulir dalam mode desain. Mari kita lihat konfigurasi formulir dalam mode pengguna:

Konfigurasi berdasarkan f-render

Melalui atribut pure , dapat digunakan langsung sebagai formulir. Cara pengiriman datanya sama dengan 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 > 

Konfigurasi berdasarkan vue-ele-form

Jika desain visual dan penggunaan form Anda tidak lagi sama sistemnya, Anda dapat menggunakan vue-ele-form secara langsung tanpa menginstal 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 > 

Disesuaikan

Menambahkan komponen ekstensi resmi (ambil ekstensi teks kaya sebagai contoh)

Pasang komponen

yarn add vue-ele-form-quill-editor

Daftarkan komponen

 Vue . component ( "quill-editor" , EleFormQuillEditor ) ; 

Properti konfigurasi

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

Tambahkan komponen khusus

Buat komponen dan daftarkan secara global

Anda perlu membuat komponen khusus sesuai dengan dokumen vue-ele-form dan mendaftarkannya.

konfigurasi penulisan

Anda dapat merujuk ke konfigurasi di kode sumber. Berikut adalah contoh dan deskripsi atribut:

 // 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 : { }
    }
  }
} ; 

Gabungkan konfigurasi dan teruskan

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

Konfigurasi komponen asli & konfigurasi formulir yang disesuaikan

• Direktori konfigurasi komponen: f-render/src/fixtures/comps.js
• Direktori konfigurasi formulir: f-render/src/fixtures/form-props.js
• Konfigurasi atribut umum item formulir: f-render/src/fixtures/form-item-common.js
• Direktori komponen yang diperluas: f-render/src/fixtures/extends/[扩展组件名].js

Jika Anda ingin mengubah properti komponen atau properti formulir, mengurangi atau menambah komponen, Anda dapat拷贝到自己的项目, merujuk ke petunjuk konfigurasi di atas, membuat perubahan, dan meneruskannya ke:

 <!-- formProps 是表单属性 -->
<!-- comps 是组件列表和属性 -->
<!-- formItemCommon 是表单项通用属性配置 -->
< f-render
  :form-props =" formProps "
  :comps =" comps "
  :form-item-common =" formItemCommon "
/>

Khususnya, jika kita ingin setiap komponen input membawa atribut clearable: true , kita dapat melakukan ini:

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

Tab kanan yang disesuaikan

Kita dapat mengontrol apakah panel kanan ditampilkan melalui atribut isShowRight , dan menyesuaikan nama panel tertentu yang ditampilkan melalui rightTabs , sebagai berikut:

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

Kustomisasi gaya

Timpa saja gayanya secara langsung. Berhati-hatilah untuk tidak menambahkan scoped , jika tidak, penggantian tidak akan berhasil.

Perkembangan sekunder

Jika persyaratan Anda dan manajer produk Anda tidak dapat dipenuhi melalui penyesuaian属性dan样式saja, maka diperlukan pengembangan yang disesuaikan. Secara pribadi, menurut saya keseluruhan kode sangat sederhana. Anda dapat clone kode atau mengunduhnya (disarankan untuk digunakan gitee) , buat perubahan yang sesuai. Ada dua cara untuk memproses perubahan:

• Masukkan langsung ke direktori proyek, dan salin dependencies instalasi ke proyek untuk pengembangan;
• Kembangkan secara langsung lalu publikasikan ke server pribadi perusahaan. Jika open source, Anda dapat mengirimkannya ke GitHub atau gitee, lalu menginstalnya sendiri.

Untuk lebih jelasnya akan ada proses detailnya pada tutorial yang telah disebutkan di awal.

Koleksi Tanya Jawab f-render

• 1. Apa yang tidak bisa dilakukan f-render?
• 2. Bagaimana cara menerapkan konfigurasi URL opsi?

Deskripsi Alat Peraga

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

celah

• kiri: daftar komponen kiri
• utama: area tengah
• main-header: area operasi header
• konten utama: area desain formulir
• kanan: area konfigurasi atribut kanan

Contoh:

 < template >
  < f-render >
    <!-- 左侧插槽 -->
    < template v-slot:left =" {frender} " >
      < div >
        < div > left </ div >
        < div > {{frender.comps}} </ div >
      </ div >
    </ template >
  </ f-render >
  < template > </ template
> </ template >

Data frender adalah kumpulan data komponen f-render . Untuk data spesifik, silakan merujuk ke kode sumber. Slot lain memiliki parameter ini.

ekologi

Proyek	Status	Keterangan
vue-ele-bentuk		Hubungkan ke formulir berbasis data berdasarkan ElementUI
f-render		Alat desain bentuk visual yang dikembangkan khusus untuk vue-ele-form
vue-ele-form-json-editor		Editor JSON (ekstensi vue-ele-form)
vue-ele-form-upload-file		unggah file unggah komponen (ekstensi vue-ele-form)
vue-ele-form-pengunggah-gambar		Unggah komponen penyempurnaan gambar (ekstensi vue-ele-form)
vue-ele-bentuk-pohon-pilih		Komponen kotak pemilihan pohon (ekstensi vue-ele-form)
vue-ele-form-tabel-editor		Editor formulir (ekstensi vue-ele-form)
vue-ele-bentuk-dinamis		Bentuk dinamis (ekstensi vue-ele-form)
vue-ele-form-pengunggah video		Unggah komponen penyempurnaan video (ekstensi vue-ele-form)
vue-ele-form-quill-editor		Editor teks kaya (ekstensi vue-ele-form)
vue-ele-form-penurunan harga-editor		editor penurunan harga (ekstensi vue-ele-form)
vue-ele-form-bmap		Komponen peta Baidu (ekstensi vue-ele-form)
vue-ele-form-codemirror		Editor kode (ekstensi galeri vue-ele-form)
galeri vue-ele-form		Komponen tampilan gambar/video (ekstensi vue-ele-form)
vue-ele-form-data-editor		Editor data ringan (ekstensi vue-ele-form)

Terima kasih khusus kepada sponsor

Layanan pelanggan yang luar biasa	Shengjie Yuanchuang	sialan	xzusoft	lihat masuk	bernada tinggi

Jika menurut Anda ini bermanfaat bagi Anda, Anda dapat membelikan penulis secangkir kopi untuk membuat open source melangkah lebih jauh Klik untuk memasukkan kode cloud untuk menghargainya, bergabunglah dengan grup komunikasi di bawah, dan kirimkan saya tautannya.

Kontributor

Terima kasih kepada orang-orang hebat ini (kunci emoji):

Zhang Chaojie ?

Bijaksana

IWANABETHATGUY

Proyek ini mengikuti spesifikasi semua kontributor. Kontribusi apa pun diterima!