schema form editor

ผู้สร้างรูปแบบสคีมา

Schema-Form-Maker เป็นตัวแก้ไขตารางภาพตาม Vue

สำหรับรายละเอียดโปรดดูการติดตั้งที่เกี่ยวข้องกับ Wiki

การพึ่งพาการติดตั้ง

ใช้ NPM ดั้งเดิมสำหรับการติดตั้ง ไม่รองรับ CNPM ในขณะนี้

 npm install

(สำหรับรายละเอียดโปรดดูการติดตั้ง)

เรียกใช้บรรณาธิการ

หลังจากเสร็จสิ้นการติดตั้งแล้วให้ดำเนินการ

 npm run dev

เรียกใช้ตัวแก้ไขแบบฟอร์มและเปิด http://localhost:8080/ การเข้าถึงหลังจากเริ่มต้น

(สำหรับรายละเอียดโปรดดูการดำเนินการ)

สร้างแบบฟอร์ม

รวมสามพื้นที่ในด้านซ้ายกลางและขวาของตัวแก้ไขรูปแบบ: ทั้งหมดสามพื้นที่:

แถบส่วนประกอบ

ด้านซ้ายสุดของมุมมองคือ [ส่วนประกอบแถบ]

สร้างพื้นที่

ตรงกลางของมุมมองคือ [พื้นที่ก่อสร้าง] ซึ่งแสดงรูปแบบที่แก้ไขในปัจจุบัน
หลังจากคลิกหนึ่งในแบบฟอร์มในนั้นคุณสามารถแก้ไขได้ที่ [เมนูการกำหนดค่า] ทางด้านขวา
ในระหว่างกระบวนการแก้ไขคุณสามารถกด Ctrl + S หรือ CMD + S เพื่อบันทึกได้ตลอดเวลา

(สำหรับรายละเอียดโปรดดูรูปแบบของพื้นที่ที่สร้างขึ้นแบบฟอร์ม)

เมนูการกำหนดค่า

ด้านขวาของมุมมองคือ [เมนูการกำหนดค่า] ซึ่งสามารถแก้ไขได้ในรายการรูปแบบที่เลือก [พื้นที่ก่อสร้าง]

สคีมาส่งออก

หลังจากเสร็จสิ้นการตั้งค่าของแบบฟอร์มที่ด้านล่างของพื้นที่ก่อสร้างให้คลิกปุ่ม [โครงสร้าง] เพื่อดูสคีมาของแบบฟอร์มในกล่องโต้ตอบป๊อปอัพ
ที่มุมขวาบนของกล่องโต้ตอบสคีมามีสองปุ่มของ [สำเนา] และ [ดาวน์โหลด] ซึ่งสามารถใช้ในการส่งออกสคี

แบบฟอร์มการแสดงผล

หลังจากการส่งออกสคีมาคุณสามารถกำหนดรูปแบบใหม่เพื่อแลกแบบฟอร์มในโครงการของคุณเองด้วยความช่วยเหลือของส่วนประกอบสคีมาฟอร์มเรนเดอร์

รหัสตัวอย่าง:

< template >
  ...
    <!-- DeviceSchema 为渲染表单需要的 schema -->
    <!-- device 为表单数据 -->
    < SchemaFormRender
      :schema = " DeviceSchema "
      :data = " device "
    />
    < el-button @click = " updateDevice " >
      提交
    </ el-button >
  ...
</ template >
< script >
...
export default {
  ...
  methods : {
    async updateDevice () {
      // 用户操作表单后 this.device 的数据会实时更新
      // 这里可以直接通过 this.device 访问到表单中的数据
      await axios . put ( ` http://api.com/device/ ${ this . device . id } ` , this . device );
      this . $message . success ( '保存成功' );
    }
  }
}
</ script >