Пусть фронтенд дама с удовольствием развивает форму

Vue.js
Пусть фронтенд дама с удовольствием развивает форму

Официантка: «Есть много форм, которые нужно разработать для новых бизнес-функций. Есть ли у меня план, чтобы выполнить эту задачу эффективно и с удовольствием?»

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

Официантка: "Какова концепция разработки конфигурации?"

Для разработки формы необходимо просто определить данные конфигурации JSON.

Официантка: «Все отлично, я сначала поищу».

Через некоторое время~~

Официантка: «Есть довольно много, но какую выбрать?»

Что ж, тогда поговорим о выборе формы разработки концепции конфигурации.

1. Справочная документация

Это очень важно Без документации, кто посмеет его использовать?

2. Интуитивно понятный дисплей функций

Я не хочу тратить много времени на чтение холодных слов сначала, а потом приходится использовать свое воображение

Лучше всего отображать большинство или даже все функции сверхинтуитивным, супервизуальным и суперудобным способом, например, так:

image

3. Из коробки

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

Например, часто используются следующие компоненты:

image

Например, часто используются следующие правила проверки:

image

4. Расширяемость

Независимо от того, сколько компонентов и правил проверки предоставлено государством, оно не может удовлетворить все бизнес-сценарии, поэтому оно должно бытьДружелюбный (легко и удобно)Поддержка разработчиков в настройке их собственных компонентов формы и правил проверки

5. Поддержка сложных структур данных

Структура данных формы, за исключением простых типов объектов только с одним уровнем свойств (например,{name: 'daniel', age: 18}), многие реальные сценарии могут быть такими:

{
  "name": {
    "firstName": "daniel",
    "lastname": "xiao"
  }
}

Это может выглядеть так:

{
  "name": "daniel",
  "hobbies": [
    {
      "id": 1,
      "name": "Coding"
    },
    {
      "id": 2,
      "name": "Singing"
    }
  ]
}

Резюме одного предложения: поддержка типа массива, вложенный объект объекта, вложенный массив объекта, элементы массива являются обычными типами или типами объектов или типами массивов.

6. Взаимодействие между элементами управления формы

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

Вот несколько репрезентативных сценариев:

  • Тип "Согласен продолжить"
    image

image

  • Тип "Выбор города"

    image

  • Тип "Требуется старше 18"

    image

  • тип "сравнение дат"

    image

  • Тип "Автозаполнение полного имени"

    image

Я чувствую, что их слишком много, поэтому я не буду перечислять их по одному.

Поэтому, мисс Front-end, если проект-кандидат с открытым исходным кодом может соответствовать вышеуказанным условиям, его можно использовать.

Мисс Front-end: «О, у вас есть рекомендация?»

Конечно. . .

Ха-ха, дальше рекламное время.Если судьи сочтут вышеперечисленные условия отбора разумными, тоncformхороший выбор

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

Поставляется с множеством стандартных компонентов и правил проверки.

Благодаря мощному взаимодействию с элементами управления и возможностям расширения делайте то, что хотите.

Посетите официальный Github, чтобы узнать больше:GitHub.com/NC form/Может стать Буддой…

tags: vue, form, json-schema, generator

Категории