v formly v3下載 - v formly v3原始碼下載

v formly v3

其他類別

1.0.0

下載

v-formly-v3

v-formly-v3 是vue 3 的動態（JSON 驅動）表單庫。

簡潔至上

透過標準JSON Schema & Ajv Validator產生複雜的動態表單及校驗，快速、簡潔、有效率。

可複用性

透過JSON的形式產生表單模板，一份表單簡單修改即可多處重複使用！使您能夠快速開發表單頁面，相比編寫傳統的html form表單，使用JSON形式定義表單能夠極大的提高了開發效率。

Vue 驅動

目前支援Vue 3.x，元件庫支援antdv v3 & element-plus，Vue 3.x的其他UI庫（DevUI等）支援正在開發中。。。

快速開始

文檔& Demo

簡介

文件

Stackblitz antdv， CodeSandbox antdv

Stackblitz element， CodeSandbox element

安裝

推薦使用vite cli 建造項目

搭建完成後:

使用yarn安裝v-formly-v3 ：

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" ) ;

基於element-plus 元件庫

 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" ) ;