vue form json schema

Vue Form Json Schema

เครื่องกำเนิดฟอร์มแบบฟอร์ม JSON นำส่วนประกอบของคุณมา!

ใช้องค์ประกอบ VUE หรือองค์ประกอบ HTML!

ไม่มีส่วนประกอบ prebuilt สำหรับคุณที่จะไขปริศนาแบบฟอร์มของคุณด้วย คุณสามารถใช้องค์ประกอบหรือองค์ประกอบใด ๆ ที่ปล่อยเหตุการณ์กำหนดเองหรือดั้งเดิม

โปรดทราบว่าส่วนประกอบ Vue ทั้งหมดที่ใช้ v-model ปล่อยเหตุการณ์ input (หรือคล้ายกัน) ดูคู่มือของ Vue สำหรับข้อมูลเพิ่มเติม

การติดตั้ง

การอัพเกรดจาก v1? ตรวจสอบบันทึกการเปิดตัว V2 เพื่อดูว่าการย้ายถิ่นมีผลต่อคุณหรือไม่

ติดตั้งจาก NPM

npm install vue-form-json-schema

นำเข้าแอพของคุณ

 import Vue from 'vue' ;
import VueFormJsonSchema from 'vue-form-json-schema' ;

Vue . component ( 'vue-form-json-schema' , VueFormJsonSchema ) ;

หมายเหตุหากคุณไม่ได้ใช้ WebPack / Rollup และต้องการใช้เวอร์ชัน ESM คุณต้องนำเข้า VueFormjSonschema เช่นนี้:

 import VueFormJsonSchema from 'vue-form-json-schema/dist/vue-form-json-schema.esm.js' ;

ตรวจสอบการสาธิตหรือดูตัวอย่างน้อยที่สุดในคำแนะนำการใช้งานเพื่อเริ่มต้น

umd

หากคุณใช้เวอร์ชัน UMD คุณสามารถค้นหาตัวอย่างเพิ่มเติมในโฟลเดอร์ examples ของ GitHub Repo และการสาธิต UMD ด้านล่าง

หากคุณต้องการใช้ vue-form-json-schema โดยตรงในเบราว์เซอร์คุณสามารถทำได้โดยใช้เวอร์ชัน UMD รุ่น UMD AutoInstalls ส่วนประกอบ vue-form-json-schema หากพบ Vue บนหน้าต่าง โมดูลทั้งหมดยังมีอยู่ใน window.VueFormJsonSchema ซึ่งสามารถเข้าถึงการส่งออกที่มีชื่อเช่นตัวอย่างเช่น vfjsFieldMixin

โฮสต์โดย unkpg

<script src="https://unpkg.com/vue-form-json-schema@latest/dist/vue-form-json-schema.umd.js"></script>

คุณสามารถเปลี่ยน vue-form-json-schema@latest ไปยังเวอร์ชันคงที่เช่น [email protected]

ติดตั้งจาก NPM

<script src="../node_modules/dist/vue-form-json-schema.umd.js"></script>

การสาธิต

โปรดทราบว่าการสาธิตทั้งหมดใช้สไตล์ bootstrap แต่ไม่มีสไตล์รวมอยู่ในแพ็คเกจนี้และขึ้นอยู่กับคุณว่าควรใช้สไตล์อะไร

ตัวอย่างน้อยที่สุด

จำนวนการกำหนดค่าน้อยที่สุดในการแสดงองค์ประกอบ input

การสาธิต UI ที่ซ้อนกัน

การใช้คลาส bootstrap เพื่อแสดงว่าเค้าโครงแตกต่างกันอย่างไรสำหรับอุปกรณ์ที่มีขนาดหน้าจอที่แตกต่างกัน ในตัวอย่างนี้สองฟิลด์อินพุตจะถูกห่อหุ้มภายใน DIV ด้วยคลาส col-12 col-sm-6 ลองปรับขนาดหน้าต่างเบราว์เซอร์ของคุณด้วยดูการทำงาน

การมองเห็นแบบมีเงื่อนไขและการสาธิตแอนิเมชั่น

บางครั้งควรแสดงฟิลด์เฉพาะในกรณีที่พบเงื่อนไข ใช้ <transition> เพื่อให้ภาพเคลื่อนไหว

การสาธิต Vue Components

ดูวิธีการใช้ส่วนประกอบ Vue ของคุณเองหรือบุคคลที่สามใน vue-form-json-schema

vue async โหลดแบบฟอร์ม

กำลังโหลดแบบฟอร์มจากแบ็กเอนด์? ตรวจสอบตัวอย่างนี้

แบบฟอร์มการลงทะเบียนพร้อมการตรวจสอบ

ตัวอย่างที่สมบูรณ์ยิ่งขึ้นด้วยข้อความการตรวจสอบและข้อผิดพลาด

ตัวอย่างแบบฟอร์มการลงทะเบียนที่มีคุณสมบัติซ้อนกัน

แบบฟอร์มการลงทะเบียนด้านบนซึ่งคีย์แบบฟอร์มจะซ้อนอยู่ภายใต้คีย์อื่น

การสาธิต UMD

ตัวอย่างทั้งหมดข้างต้นจะทำซ้ำโดยใช้เวอร์ชัน UMD ในโฟลเดอร์ examples ของ repo นี้

เวอร์ชันออนไลน์ของการสาธิตครั้งแรก

คุณสมบัติ

• รองรับองค์ประกอบ HTML หรือองค์ประกอบ Vue ใด ๆ
• เล็ก ( 32K ไม่บีบอัด, 6.5K gzipped)
• สคีมา JSON มาตรฐานสำหรับคำอธิบายประกอบและการตรวจสอบ (โดย AJV)
• เค้าโครงเป็นอิสระจากโครงสร้างข้อมูล

เอกสาร

สมุดหนังสือ

การใช้งาน

ตัวอย่างพื้นฐานที่มีหนึ่งฟิลด์

สำหรับการใช้เวอร์ชัน UMD ลองดูโฟลเดอร์ examples ที่การสาธิตทั้งหมดด้านบนทำซ้ำโดยใช้เวอร์ชัน UMD

ดูการสาธิต

 < template >
    < vue-form-json-schema
      v-model = "model"
      : schema = "schema"
      : ui-schema = "uiSchema"
    >
  </ vue-form-json-schema >
</ template >

< script >
  export default {
    data ( ) {
      return {
        // An object which holds the form values
        model : { } ,
        // A valid JSON Schema object
        schema : {
          type : 'object' ,
          properties : {
            firstName : {
              type : 'string' ,
            } ,
          } ,
        } ,
        // Array of HTML elements or Vue components
        uiSchema : [ {
          component : 'input' ,
          model : 'firstName' ,
          // Same API as [Vue's render functions](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)
          fieldOptions : {
            class : [ 'form-control' ] ,
            on : [ 'input' ] ,
            attrs : {
              placeholder : 'Please enter your first name' ,
            } ,
          } ,
        } ] ,
      } ;
    }
  } ;
< / script >

การพึ่งพาอาศัยกัน

AJV

สำหรับการตรวจสอบแบบฟอร์มโดยใช้ JSON Schema และการตรวจสอบภายใน

การอึกทึก

get set และ merge ทั่วทั้งแพ็คเกจ ขนาดมัดมีความสำคัญมากและได้รับการพิจารณาเสมอดังนั้นเราจึงตัด Lodash ลงอย่างมากเพื่อรวมเฉพาะสิ่งจำเป็นที่แน่นอน

ความเต็ม

ทดสอบด้วย v2.5.9 แต่อาจจะทำงานกับเวอร์ชันใดก็ได้> = v2.4.0

สิ่งที่ต้องทำ

• การทดสอบเขียน
• เพิ่มการสนับสนุน i18n
  • เพิ่มใน 1.15.2 พร้อมตัวเลือกการตั้ง options.ajv.locale
• เขียน readme นี้
• ใช้ AJV ภายในเพื่อตรวจสอบ:
  • vfs-global prop ui-schema
  • vfs-component prop ui-schema
• เขียนเอกสาร
• เผยแพร่ด้วย gitbook