русский   |   English

Классическая модульная фронтендовая UI библиотека

Gitee   |   Онлайн демо

ayq-layui-form-designer

Введение

Начальный дизайн формы, основанный на layui, создан на основе FWR layui Form Designer.

Обращение

Базовый код уже загружен. Вы можете протестировать его и сообщить о найденных ошибках. Надеюсь, вы сможете задать вопросы и принять участие в предоставлении некоторых интересных компонентов. Версия 1.0.0 была выпущена. Разработка и написание документации — нелёгкий труд, требуются некоторые усилия для развития проекта. Поддержите проект звездой, пожалуйста.

Адрес демонстрационной страницы

http://116.62.237.101:8009/#### Примечание: основные компоненты почти готовы. В будущем будет проведено общее улучшение функциональности для повышения удобства использования. Также будут оптимизированы некоторые эффекты отображения, главным образом для получения и вывода данных формы. Компонент рукописного подписания пока не является открытым исходным кодом. Рукописные подписи адаптированы как для ПК, так и для мобильных устройств, но вы можете протестировать некоторые из них и высказать полезные мнения.#### Адрес демонстрационной страницы рукописного подписания

http://www.anyongqiang.com/HandwrittenSignature/index.html

Инструкции по использованию

1. Проект основан на layui, jQuery и sortable.

2. Проект реализует основные возможности перетаскиваемого макета и родительско-детского макета.

3. Проект внедряет макет большинства элементов формы на основе layui, включая поле ввода, редактор, выпадающий список, радиокнопки, группы радиокнопок, множественный выбор, дату, слайдер, рейтинг, вращение, изображение, выбор цвета, загрузку изображения, загрузку файла, диапазон дат, сортировку текстового поля, выбор значков, выражение Cron и компонент ручной подписи.

План развития

1. Поддержка компонентов формы layui.

2. Расширение компонентов, поддерживающих layui.

3. Поддержка метода получения данных, заполненных объектом FormDesigner, или эха данных формы.

4. Поддержка автоматического генерирования кода.

5. Поддержка получения удалённых данных для динамической отрисовки компонентов через URL (например, выпадающий список, редактор, изображение и т.д.).

6. Поддержка кастомизации макета и фона.

Пример использования (страница дизайна)

var render = formDesigner.render({
    Data: [], // данные проектирования формы
    elem: '#formdesigner'
});
//Перезагрузка данных
render.reload(options);
//Получение соответствующей конфигурационной информации
render.getOptions();
//Получение данных проектирования формы
render.getData();
//Получение внешнего объекта редактора
render.geticeEditorObjects();

Примеры начала работы (страница просмотра)

var render = formPreview.render({
    elem: '#testdemo',
    Data: [], // данные проектирования формы
    formData: {
        "textarea_1": "123",
        "input_2": "123",
        "password_3": "123"
    } // данные формы для эхо
});
//Перезагрузка данных
render.reload(options);
//Получение соответствующей конфигурационной информации
render.getOptions();
//Получение данных проектирования формы
render.getData();
//Получение внешнего объекта редактора
render.geticeEditorObjects();
//Получение ID и пути загрузки изображения
render.getImages();

//Идентификатор объекта файла, соответствующий выбранному случаю данных, uploadurl соответствует пути загрузки файла.

[{"select": "imageimage_2", "uploadUrl": ""}]

//Получение идентификатора и пути загрузки загруженного файла

render.getFiles();

//Идентификатор объекта файла, соответствующий выбранному случаю данных, uploadurl соответствует пути загрузки файла.

[{"select": "filefile_1", "uploadUrl": ""}]

//Получение данных формы**

Примечание: текущий метод позволяет избежать проверочных правил, поэтому лучше использовать его при отправке формы.

form.on('submit(demo1)', function(data) {} );

**

render.getFormData()

// Получение данных формы

render.setFormData(json)

// Глобальное отключение всех форм

render.globalDisable()

// Глобальное включение всех форм

render.globalEnable()

**

Примечание: два компонента этих методов не контролируются (компонент файла и компонент изображения).

Я предлагаю эти два компонента отдельно через методы, так как существует множество способов загрузки файлов.

Рекомендую пользователям определять и реализовывать свои собственные методы загрузки файлов.

Особые случаи были записаны в preview.html для вашего удобства.

**

Основные параметры

Параметры компонента|Параметр | Тип | Описание | Пример значения|

|---|---|---|---| |ID | string | указывает идентификатор компонента (уникальный) и имя поля формы | "field"| |Label | string | метка поля | "name"| |Tag | string | тип формы | "input"| |Placeholder | string | плейсхолдер | "введите значение"| |DefaultValue | object | значение по умолчанию компонента | "name"| |Width | string | ширина компонента | "100%"| |LabelWidth | string | ширина метки | "250px"| |ReadOnly | boolean | только чтение | true, false| |Disabled | boolean | отключено | true, false| |Required | boolean | обязательно | true, false| |Columns | number | количество колонок сетки | 2 | |MaxValue | object | максимальное значение | ""| |MinValue | object | минимальное значение | ""| |Expression | string | валидация | "email"| |StepValue | number | шаг слайдера | 2 ||Isinput | логическое значение | отображение поля ввода | true, false |

|Datetype | строка | тип даты | выбор времени |

|Dateformat | строка | формат даты | "yyyy-MM-dd" |

|Ratelength | число | количество звездочек | 5 |

|Interval | число | интервал вращения в миллисекундах | 3000 |

|Autoplay | логическое значение | автоматическое включение вращения | true, false |

|Anim | объект | режим смены {текст: 'переключение влево/вправо', значение: 'по умолчанию'} |

|Arrow | объект | стрелка переключения {текст: 'отображается при наведении', значение: 'при наведении'} |

Журнал обновлений

• 2021-06-15

1. Добавлены базовые правила проверки, предоставленные полем ввода layui.

2. Оптимизация отображения эффекта.

3. Улучшение формы отображения слайдера, оценки и цветового селектора; решение проблемы получения значения поля при отправке формы.

• 2021-06-17

1. Добавлен компонент диапазона времени (код ещё не был отправлен).

2. Оптимизация адаптивности страницы.

• 2021-06-22

1. Добавлен компонент диапазона времени.

2. Оптимизация параметров отправки представления страницы.

• 2021-06-24

1. Внедрен компонент редактирования richText IceEditor.

• 2021-06-30

1. Добавлен компонент редактирования richText IceEditor.

2. Решена проблема аномального стиля строки с несколькими колонками.

3. Проблема вложения одной строки с несколькими колонками.

4. Оптимизация параметров редактора richText, чтобы можно было получать данные.- 2021-07-01

5. Добавлен компонент сортировки текстового поля.

6. Добавлен компонент выбора значков.

7. Добавлен компонент выражения Cron.

8. Оптимизация редактора richText (редактирование меню приводит к проблемам с��域问题时，解决方案建议使用Nginx或Tomcat等服务器进行代理以解决此类问题)。

9. Выпуск версии v1.0.0

• 2021-07-23

1. Обновление до версии v1.0.1

2. Добавлен компонент меток

3. Добавлен компонент сборки кнопок

4. Оптимизация проблемы путаницы стилей при внутреннем перетаскивании внутри забора

5. Оптимизация проблемы неправильной сортировки при перетаскивании нескольких компонентов

6. Избыточность оптимизированного компонента меток привела к смещению стилистики сортировки компонентов

• 2021-08-03

1. Добавлен компонент рукописной подписи

• 2021-08-11

1. Оптимизация взаимодействия компонентов

2. Получение и отображение новых данных формы в представлении формы

3. Добавление возможности отключения и активации формы в представлении формы

4. Обновление до версии V1.1.0

• 2021-08-26

1. Добавление функции перетаскивания для выпадающих списков, множественного выбора, одиночного выбора и значений по умолчанию для вращения (значения по умолчанию можно установить на страницах конфигурации и дизайна)

2. Улучшение опыта изменения ширины с использованием ползунка

3. Добавление и модификация атрибута длины поля ввода и операции с ползунком

4. Добавление обязательных элементов для отображения*

5. Оптимизация функции генерации кода7. Добавление нового окна для открытия страницы отображения

6. Обновление версии до v1.1.5

• 2021-10-11

1. Упрощение стилей и возврат к простоте layui

2. Оптимизация некоторых связанных деталей

3. Обновление версии до v1.1.6

Примечание

1. Использование файла Readme_30.md для поддержки различных языков, таких как readme_en.md, Readme_zh.md

2. Официальный блог Gitee blog.gitee.com

3. Вы можете использовать этот адрес https://gitee.com/explore для изучения отличных проектов с открытым исходным кодом на Gitee

4. GVP