v formly v3

v-formly-v3

v-formly-v3 は、vue 3 用の動的 (JSON 駆動) フォーム ライブラリです。

シンプルさを第一に

高速、簡潔、効率的な標準の JSON スキーマと Ajv バリデータを通じて、複雑な動的フォームと検証を生成します。

再利用性

JSON 形式でフォーム テンプレートを生成すると、フォームを変更するだけで複数の場所で再利用できます。従来の HTML フォームを作成する場合と比較して、JSON フォームを使用してフォームを定義すると、開発効率が大幅に向上します。

Vueドライバー

現在、Vue 3.x がサポートされており、コンポーネント ライブラリは antdv v3 と element-plus をサポートしています。Vue 3.x 用の他の UI ライブラリ (DevUI など) のサポートは開発中です。 。 。

クイックスタート

ドキュメントとデモ

導入

書類

Stackblitzantdv、CodeSandboxantdv

Stackblitz 要素、CodeSandbox 要素

インストール

プロジェクトのビルドには 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" ) ; 

要素プラスコンポーネント ライブラリに基づく

 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-present v-formly-v3