ng form element

ng-form มุ่งมั่นที่จะสร้างคอมโพเนนต์ฟอร์มแบบไดนามิก Vue แบบโอเพ่นซอร์สที่ทรงพลังที่สุด

NG-แบบฟอร์ม-องค์ประกอบ

แสดงให้เห็น เริ่มตั้งแต่เวอร์ชัน 2.1.0 รองรับการทำให้เป็นสากลและมีภาษาในตัวสองภาษา: จีนตัวย่อและอังกฤษ

ตัวอย่างออนไลน์

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

ที่อยู่เวอร์ชัน iview https://gitee.com/jjxliu306/ng-form-iview

ที่อยู่เวอร์ชัน element-plus (เวอร์ชัน VUE3) https://gitee.com/jjxliu306/ng-form-elementplus

บริการแบ็กเอนด์

ฟังก์ชั่นการแยกวิเคราะห์และการตรวจสอบแบ็กเอนด์ ngtool https://gitee.com/jjxliu306/ngtool

เอกสารประกอบ (ปรับปรุงอย่างต่อเนื่อง)

http://www.ng-form.cn

## ตัวอย่างเทอร์มินัลมือถือ uniapp ng-form ส่วนประกอบ https://ext.dcloud.net.cn/plugin?id=20207

ตัวอย่างการบูรณาการ

กรณีการรวมการแยกส่วนหน้าและส่วนหลังตาม springboot + vue

สปริงบูตแบ็กเอนด์: https://gitee.com/jjxliu306/ng-server

มุมมองส่วนหน้า: https://gitee.com/jjxliu306/ng-ui

ตัวอย่าง

แบบฟอร์มพื้นฐาน

การตรวจสอบแบบฟอร์มและการแสดงผลแบบไดนามิกของส่วนประกอบ

ตารางแบบไดนามิก

การแนะนำ

ผู้ออกแบบแบบฟอร์มตาม vue และ element-ui สร้างหน้าแบบฟอร์มอย่างรวดเร็วโดยการลากและวาง แบบฟอร์มสามารถส่งออกเป็นรูปแบบ json หรือแบบฟอร์มที่ผู้อื่นวาดสามารถเรียกคืนได้ผ่านการนำเข้า json

ความแตกต่างจากรูปแบบโอเพ่นซอร์สอื่นๆ

• แต่ละองค์ประกอบสามารถซ่อนและแสดงแบบไดนามิกได้ และยังมีการตรวจสอบกฎที่หลากหลาย นอกเหนือจาก "จำเป็น" ซึ่งรองรับการตรวจสอบนิพจน์และการตรวจสอบตามปกติ
• ค่าการเชื่อมโยงส่วนประกอบที่ซ่อนอยู่สามารถกำหนดค่าไม่ให้ส่งออกได้ ซึ่งจะช่วยลดขนาดข้อมูลเอาต์พุต
• ให้การเรียกทริกเกอร์หลังจากเลือกสำหรับการควบคุมแบบเลือก (วิทยุ เลือก กล่องกาเครื่องหมาย) และรองรับนิพจน์ รองรับฟังก์ชันการเชื่อมโยงข้อมูลสำหรับการควบคุมแบบเลือก ซึ่งสามารถทำการเชื่อมโยงหลายระดับได้
• แบบฟอร์มแบบไดนามิกจะมีกล่องป๊อปอัปแยกต่างหากสำหรับการกรอกและแก้ไข
• วิธีการจัดวางที่หลากหลาย โดยจัดให้มีตาราง ตาราง และวิธีการจัดวางอื่นๆ
• รองรับโหมดแสดงตัวอย่างแบบฟอร์ม เนื้อหาแบบฟอร์มทั้งหมดไม่มีส่วนประกอบ และข้อความทั้งหมดจะปรากฏขึ้น
• หลังจากเลือกการควบคุมแบบเลือก (วิทยุ, เลือก, ช่องทำเครื่องหมาย) ป้ายที่เกี่ยวข้องจะถูกจัดเก็บแยกต่างหากเพื่อให้แสดงผลได้ง่าย

ส่วนประกอบ

• ผู้ออกแบบแบบฟอร์ม ng-form-design (ออกแบบหน้าแบบฟอร์มอย่างรวดเร็วตามการดำเนินการด้วยภาพและสร้างการกำหนดค่า json หรือเพจ)
• เครื่องมือสร้างแบบฟอร์ม ng-form-build (สร้างหน้าแบบฟอร์มอย่างรวดเร็วตามข้อมูลการกำหนดค่า json ที่ได้รับในตัวออกแบบ เพิ่มแอตทริบิวต์แบบอ่านอย่างเดียวและแสดงแบบฟอร์มแสดงตัวอย่าง)

ติดตั้ง

สำหรับเวอร์ชัน 2.2.0+ และสูงกว่า โปรดใช้ vue-cli3 หรือสูงกว่า scaffolding

 npm install --save  ng-form-element

อ้าง

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

ลงทะเบียน

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

การอ้างอิงหน้า

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

สื่อสาร

คลิกลิงก์เพื่อเข้าร่วมแชทกลุ่ม QQ ซึ่งคุณสามารถถามคำถามและรายงานข้อบกพร่องได้โดยตรง [กลุ่มการสื่อสาร: 152592057]