ng form element

ng-form berkomitmen untuk menciptakan komponen formulir dinamis Vue open source yang paling kuat

NG-BENTUK-ELEMEN

menjelaskan Mulai dari versi 2.1.0, ini mendukung internasionalisasi dan memiliki dua bahasa bawaan: Cina Sederhana dan Inggris.

Contoh daring

https://jjxliu306.github.io/ng-form-element/dist/index.html

alamat versi iview https://gitee.com/jjxliu306/ng-form-iview

versi elemen-plus (versi VUE3) alamat https://gitee.com/jjxliu306/ng-form-elementplus

Layanan ujung belakang

fungsi penguraian dan verifikasi backend ngtool https://gitee.com/jjxliu306/ngtool

Dokumentasi (terus diperbarui)

http://www.ng-form.cn

##Contoh terminal seluler komponen uniapp ng-form https://ext.dcloud.net.cn/plugin?id=20207

Contoh integrasi

Kasus integrasi pemisahan front-end dan back-end berdasarkan springboot + vue

Springboot ujung belakang: https://gitee.com/jjxliu306/ng-server

Tampilan depan: https://gitee.com/jjxliu306/ng-ui

Contoh

bentuk dasar

Validasi formulir dan tampilan dinamis komponen

Tabel dinamis

Perkenalan

Perancang formulir berdasarkan vue dan elemen-ui. Buat halaman formulir dengan cepat dengan menyeret dan melepas. Formulir dapat diekspor ke format json, atau formulir yang digambar oleh orang lain dapat dipulihkan melalui impor json.

Perbedaan dari bentuk open source lainnya

• Setiap komponen dapat disembunyikan dan ditampilkan secara dinamis, dan menyediakan berbagai verifikasi aturan selain "wajib", mendukung verifikasi ekspresi dan verifikasi reguler.
• Nilai pengikatan komponen tersembunyi dapat dikonfigurasi agar tidak menjadi keluaran, sehingga mengurangi ukuran data keluaran
• Menyediakan panggilan pemicu setelah pemilihan untuk kontrol selektif (radio, pilih, kotak centang) dan mendukung ekspresi. Mendukung fungsi hubungan data untuk kontrol selektif, yang melaluinya hubungan multi-level dapat dilakukan
• Formulir dinamis menyediakan kotak pop-up terpisah untuk diisi dan diedit
• Metode tata letak yang beragam, menyediakan kisi, tabel, dan metode tata letak lainnya
• Mendukung mode pratinjau formulir, semua konten formulir tidak terkomponen, dan semua teks ditampilkan
• Setelah memilih kontrol selektif (radio, pilih, kotak centang), label terkait akan disimpan secara terpisah agar mudah ditampilkan.

komponen

• ng-form-design form designer (mendesain halaman formulir dengan cepat berdasarkan operasi visual dan menghasilkan json atau halaman konfigurasi)
• ng-form-build form builder (dengan cepat membuat halaman formulir berdasarkan konfigurasi data json yang diperoleh di desainer, menambahkan atribut readonly dan menampilkan formulir pratinjau)

Memasang

Untuk versi 2.2.0+ dan yang lebih baru, silakan gunakan scaffolding vue-cli3 atau yang lebih baru.

 npm install --save  ng-form-element

Mengutip

 // 导入组件库
import NgFormElement  from 'ng-form-element'
import 'ng-form-element/lib/ng-form-element.css'

daftar

 // 注册组件库
Vue.use(NgFormElement) 

Referensi halaman

 <div id="app"> 
    <ng-form-design  />
</div>

berkomunikasi

Klik tautan untuk bergabung dengan obrolan grup QQ, di mana Anda dapat langsung mengajukan pertanyaan dan melaporkan bug [Grup komunikasi: 152592057]