v formly v3

v-formly-v3

v-formly-v3 — это динамическая (управляемая JSON) библиотека форм для vue 3.

Простота прежде всего

Создавайте сложные динамические формы и проверяйте их с помощью стандартной схемы JSON и валидатора Ajv, которые являются быстрыми, краткими и эффективными.

Многоразовое использование

Создавайте шаблоны форм в формате JSON, и форму можно будет повторно использовать в нескольких местах, просто изменив ее! Он позволяет быстро разрабатывать страницы форм. По сравнению с написанием традиционных форм HTML, использование форм JSON для определения форм может значительно повысить эффективность разработки.

Драйвер Vue

В настоящее время поддерживается Vue 3.x, а библиотека компонентов поддерживает antdv v3 и element-plus. Поддержка других библиотек пользовательского интерфейса (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" ) ; 

На основе библиотеки компонентов 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" ) ; 

другой

Независимо от того, учитесь ли вы или используете v-formly-v3, если у вас есть какие-либо вопросы, вы можете присоединиться к группе QQ: 610930944. Мы ответим на любые неудобства в процессе использования v-formly-v3 за вас!

Лицензия MIT | © 2022 г. по настоящее время v-formly-v3