v formly v3

v-formly-v3

v-formly-v3 เป็นไลบรารีฟอร์มไดนามิก (ขับเคลื่อนด้วย JSON) สำหรับ vue 3

ความเรียบง่ายก่อน

สร้างแบบฟอร์มไดนามิกที่ซับซ้อนและการตรวจสอบยืนยันผ่าน JSON Schema & Ajv Validator มาตรฐาน ซึ่งรวดเร็ว กระชับ และมีประสิทธิภาพ

การนำกลับมาใช้ใหม่

สร้างเทมเพลตฟอร์มในรูปแบบของ JSON และแบบฟอร์มสามารถนำมาใช้ซ้ำได้ในหลายๆ ที่โดยเพียงแค่ปรับเปลี่ยน! ช่วยให้คุณสามารถพัฒนาหน้าแบบฟอร์มได้อย่างรวดเร็ว เมื่อเปรียบเทียบกับการเขียนแบบฟอร์ม html แบบดั้งเดิม การใช้แบบฟอร์ม JSON เพื่อกำหนดแบบฟอร์มสามารถปรับปรุงประสิทธิภาพการพัฒนาได้อย่างมาก

คนขับรถวิว

ปัจจุบันรองรับ Vue 3.x และไลบรารีส่วนประกอบรองรับ antdv v3 & element-plus การสนับสนุนไลบรารี UI อื่น ๆ (DevUI ฯลฯ ) สำหรับ Vue 3.x อยู่ระหว่างการพัฒนา - -

เริ่มต้นอย่างรวดเร็ว

เอกสารและการสาธิต

การแนะนำ

เอกสาร

Stackblitzantdv, CodeSandboxantdv

องค์ประกอบ Stackblitz องค์ประกอบ CodeSandbox

ติดตั้ง

ขอแนะนำให้ใช้ vite cli เพื่อสร้างโปรเจ็กต์

หลังจากสร้างเสร็จแล้ว:

ติดตั้ง v-formly-v3 โดยใช้ yarn :

yarn add v-formly-v3

หรือติดตั้งโดยใช้ npm :

npm i v-formly-v3 --save

ใช้

อิงตามไลบรารีคอมโพเนนต์ antdv v3

 import { createApp } from "vue" ;
import App from "./App.vue" ;
import Antd from "ant-design-vue" ;
import "ant-design-vue/dist/antd.css" ;
import * as antIcons from "@ant-design/icons-vue" ;
import VFormly from "v-formly-v3/antdv" ;

const app = createApp ( App ) ;
app . use ( Antd ) ;
Object . keys ( antIcons ) . forEach ( ( key ) => {
  app . component ( key , ( antIcons as any ) [ key ] ) ;
} ) ;
app . config . globalProperties . $antIcons = antIcons ;

app . use ( VFormly , {
  ui : {
    errors : {
      required : "必填项" ,
    } ,
  } ,
} ) ;
app . mount ( "#app" ) ; 

ขึ้นอยู่กับไลบรารีองค์ประกอบองค์ประกอบบวก

 import { createApp } from "vue" ;
import App from "./App.vue" ;
import ElementPlus from "element-plus" ;
import "element-plus/dist/index.css" ;
import * as elIcons from "@element-plus/icons-vue" ;
import VFormly from "v-formly-v3/element" ;

const app = createApp ( App ) ;
app . use ( ElementPlus ) ;
for ( const [ key , component ] of Object . entries ( elIcons ) ) {
  app . component ( key , component ) ;
}
app . config . globalProperties . $elIcons = elIcons ;

app . use ( VFormly , {
  lib : "element" ,
  ui : {
    errors : {
      required : "必填项" ,
    } ,
  } ,
} ) ;
app . mount ( "#app" ) ; 

อื่น

ไม่ว่าคุณจะกำลังเรียนรู้หรือใช้ v-formly-v3 หากคุณมีคำถามใด ๆ คุณสามารถเข้าร่วมกลุ่ม QQ: 610930944 เราจะตอบความไม่สะดวกในกระบวนการใช้ v-formly-v3 ให้กับคุณ!

ได้รับอนุญาตจาก MIT |. ลิขสิทธิ์ © 2022-ปัจจุบัน v-formly-v3