ng-form: создание открытого и мощного компонента динамической формы Vue

NG-FORM-ELEMENTPLUS

Описание

В настоящее время началась поддержка версии 2.0, которая в основном совместима с версией 1.x. Различия между ними следующие:

1. В версии 1.x можно было настроить диапазон выбора даты с помощью атрибута, а в версии 2.x эта функция разделена на два компонента.

2. Версия 2.x по умолчанию использует сетку для глобального макета, и каждый компонент занимает 24 ячейки после импорта конфигурации из версии 1.x.

Онлайн-пример

https://jjxliu306.github.io/ng-form-elementplus/dist

Адрес версии element-ui

https://gitee.com/jjxliu306/ng-form-element

Адрес версии iView

https://gitee.com/jjxliu306/ng-form-iview

Серверная часть

Функция анализа и проверки ngtool

https://gitee.com/jjxliu306/ngtool

Документация (постоянно обновляется)

http://www.ng-form.cn

Пример

Базовая форма

Проверка формы и динамическое отображение компонентов

Динамическая таблица

Введение

Это конструктор форм, реализованный на Vue и Element-Plus. Он позволяет быстро создавать страницу формы с помощью перетаскивания, форму можно экспортировать в формате JSON или импортировать через JSON.

Отличие от других открытых форм

• Каждый компонент можно динамически скрывать и отображать, и он предоставляет различные правила проверки, кроме обязательных, поддерживая выражение и регулярные выражения.
• Значения скрытых компонентов могут быть настроены так, чтобы не выводиться, что уменьшает размер выходных данных.
• Для селективных элементов управления (radio, select, checkbox) предоставляется функция вызова после выбора, поддерживающая выражение. Селективные элементы управления поддерживают функцию связывания данных, которая может выполнять многоуровневую связь.
• Динамическая таблица предоставляет отдельное всплывающее окно для заполнения и редактирования.
• Поддерживаются различные макеты, включая сетку, таблицу и другие.
• Форма предварительного просмотра поддерживает все компоненты, не выводя их, показывая только текст.
• Выбранные значения селективных элементов управления (радио, выбор, флажок) сохраняются отдельно в метке, что удобно для отображения.

Компоненты

• ng-form-design — конструктор форм (на основе визуального взаимодействия для быстрого проектирования страницы формы, генерации конфигурации JSON или страницы).
• ng-form-build — построитель форм (создаёт страницу формы на основе полученной конфигурации JSON, добавляет атрибут readonly для предварительного просмотра формы).

Установка

npm install --save  ng-form-elementplus

Ссылка

// Импорт библиотеки компонентов
import NgFormElementPlus from 'ng-form-elementplus'
import 'ng-form-elementplus/lib/style.css'

Регистрация

const app = createApp(App)
// Регистрация библиотеки компонентов
app.use(NgFormElementPlus) 

Ссылка на страницу

<div id="app"> 
    <ng-form-design />
</div>

Общение

Присоединяйтесь к группе QQ для обсуждения и обратной связи об ошибках [Группа общения: 152592057]