Динамический компонент формы, основанный на Vant-UI

# Установка зависимостей
$ npm run bootstarp

# Запуск проекта
$ npm run dev

# Рекомендуется использовать yarn для установки, использование npm может привести к неполной зависимости
yarn add @xuanmo/v-form

// Введение компонентов
import VForm from '@xuanmo/v-form'
import '@xuanmo/v-form/packages/style/index.less'

// Нераспакованное введение (не рекомендуется)
// import VForm from '@xuanmo/v-form/dist/v-form.uddy.min.js'
// import '@xuanmo/v-form/dist/index.css'
```// Подключение переменных через этот файл заменяет переменные, пример можно найти в example/App.vue
// import '@xuanmo/v-form/packages/style/var.less'

// Регистрация компонентов
// Более подробные параметры см.: https://github.com/D-xuanmo/v-form/blob/master/src/index.js#L6-L14
/**
 * Настройка JSON данных для компонента выбора адреса, компонент по умолчанию не регистрирует данные
 * Для использования своих данных, используйте эту структуру файла
 */
import ADDRESS_JSON from '@xuanmo/v-form/packages/Address/data.json'
Vue.use(VForm, {
  addressJSON: ADDRESS_JSON
})

// Настройка времени задержки, по умолчанию 200 миллисекунд
Vue.use(VForm, {
  debounceTime: 200
})

// vue.config.js
module.exports = {
  transpileDependencies: [
    '@xuanmo/v-form'
  ]
}

Vue.use(VForm, {
  primaryData: true
})

// По умолчанию модель данных
const model1 = [
  {
    key: 'text1',
    value: '',
    rules: {
      label: 'текст1',
      type: 'VInput',
      vRules: 'required|custom:@text2,@text3',
      placeholder: 'Введите текст',
      errMsg: 'Введите текст'
    }
  }
]
```// описание модели данных при значении primaryData равном true
const model2 = [
  {
    ключ: 'text1',
    значение: '',
    метка: 'текст1',
    тип: 'VInput',
    правила: 'требуется|пользовательское:@text2,@text3',
    плейсхолдер: 'введите текст',
    сообщение_ошибки: 'введите текст'
  }
]
```### регистрация глобальных пользовательских правил валидации
```js
/**
 * пример регистрации пользовательского правила валидации, которое следует правилам расширения VeeValidate
 * больше информации смотрите здесь: https://logaretm.github.io/vee-validate/guide/basics.html#validation-provider
 */
Vue.use(VForm, {
  validator: {
    пользовательское: {
      // значения, определенные здесь, могут быть получены во втором аргументе функции validate
      параметры: ['длина'],
      сообщение: 'длина не должна превышать {длина}',
      validate: (значение, { длина }) => {
        return значение.length <= длина
      }
    },
});
```    // связанные правила валидации, позволяющие сравнивать несколько полей формы
    цель: {
      параметры: ['цель1', 'цель2'],
      сообщение: 'валидация связанных полей провалена',
      // метод validate принимает третий аргумент, представляющий экземпляр компонента, который выполняет валидацию
      validate: (значение, { цель1, цель2 }, ctx) => {
        return значение === цель1 && значение === цель2;
      },
    },
  },
});

<v-form v-model="значение" :модель="модель"></v-form>

// импорт общего мультиплексера компонента
import { vFormItemBaseMixin } from '@xuanmo/v-form';
export default {
  name: 'FormItemTest',
};  // использование мультиплексера
  mixins: [vFormItemBaseMixin],

  methods: {
    ввод(значение) {
      // Этот метод обязательно вызывается; иначе компонент не сможет принимать данные.
      // Каждый раз, когда данные меняются, используется метод e__input для отправки данных компоненту.
      this.e__input(значение);
    }
  }
}
``````md
### Отправка пользовательских событий
Если требуется отправить пользовательское событие, можно использовать следующий метод:
```javascript
this.__eventHandler('input', значение)

import Vue from 'vue';
import FormItemTest from 'путь';
Vue.component(FormItemTest.name, FormItemTest);

const модель = [
  {
    ключ: 'тест',
    значение: '',
    правила: {
      метка: 'Пользовательский компонент',
      // В качестве аргумента передается имя компонента
      тип: 'FormItemTest',
      плейсхолдер: 'Нажмите чтобы ввести',
      vRules: 'required',
      паттерн: /^\d+$/,
      ошибочное_сообщение: 'Ошибка при использовании пользовательского компонента'
    }
  }
];
```## Атрибуты
| Поле | Описание | Тип | По умолчанию |
| --- | --- | --- | --- |
| v-model(значение) | Получает данные, обработанные компонентом | объект | {} |
| модель | Модель данных (тип данных см. последующую документацию) | массив | [] |
| отключено | Отключение формы | логическое значение | false |
| ширина-метки | Ширина метки | строка | 20% |
| положение-метки | Выравнивание метки, варианты: left/right | строка | left |
| цвет-метки | Цвет текста метки | строка | - |
| показывать-метку | Показывать ли метку | логическое значение | true |
| проверка | Локальные правила проверки | объект | {} |## Методы
| Метод | Описание | Аргументы |
| --- | --- | --- |
| validate | Выполнение проверки всей формы | (колбэк: Функция, список_ошибок: []) => void |
| переключить_видимость_элемента_формы | Переключение видимости элемента формы | (ключ: строка, видимость: логическое значение) => void |
| установить_опции_элемента_формы | Установка опций элемента формы, поддерживаются компоненты: VAddress, VCheckbox, VRadio, VSelect | (ключ, данные) принимают два аргумента, 1. Ключ данных, 2. Данные — это массив или `() => <Promise>[]` |

## События
| Название события | Описание | Аргументы колбэка |
| --- | --- | --- |
| изменение | Вызов при изменении данных | объект {значение, сообщение_ошибки, является_валидным} |
| событие | Отправка события при изменении данных | объект {событие, модель_формы} |

## Слоты
> Компонент может принимать несколько слотов для замены текущего компонента формы, каждый слот получает оригинальные данные этого компонента. Каждый слот имеет имя, равное ключу строки. Примечание: этот слот не наследует все правила проверки.
```html
<!-- Пример использования -->
<v-form :модель="модель">
  <шаблон v-slot="текст" v-bind="{ данные }">
    <van-field v-model="данные.значение"></van-field>
  </шаблон>

  <!-- Слот метки строки, формат {ключ}-метка -->
  <шаблон #текст-метка>
    Пользовательская метка
  </шаблон>

```## Data model format
> Below is an example of a simple data format that creates a text input field. For detailed usage, see the example section.
``````js
const model = [
  // In the following three examples of text fields, binding validation rules are used
  // Binding rule format: {rule}:@{field},@{field}
  // Format for accepted fields: @{rule}
  {
    key: 'text1',
    value: '',
    rules: {
      label: 'Text 1',
      type: 'VInput',
      vRules: 'required|custom:@text2,@text3',
      placeholder: 'Enter text',
      errMsg: 'Enter text'
    }
  },

  {
    key: 'text2',
    value: '',
    rules: {
      label: 'Text 2',
      type: 'VInput',
      vRules: 'required|@custom',
      placeholder: 'Enter text',
      errMsg: 'Enter text'
    }
  },

  {
    key: 'text3',
    value: '',
    rules: {
      label: 'Text 3',
      type: 'VInput',
      vRules: 'required|@custom',
      placeholder: 'Enter text',
      errMsg: 'Enter text'
    }
  },

  // Time selection
  {
    key: 'date',
    value: Date.now(),
    rules: {
      label: 'Date and time',
      // Four types: datetime, year-month, date, time
      type: 'VDatePicker|datetime',
      // Data format processing: timestamp - epoch time, other options see: https://github.com/D-xuanmo/datejs
      valueFormat: 'yyyy-MM-dd'
    }
  },

  // Image upload
  {
    key: 'file',
    // For displaying a list
    value: [{ path: 'https://upyun.xuanmo.xin/test/20200418225229.png' }],
    rules: {
      label: 'File upload',
      type: 'VUpload',
      action: 'xxx',
      accept: 'image/png',
      multiple: true,
      name: 'file',
      headers: {},
      // Additional data during upload
      data: {
        dir: 'test'
      },
      // Settings to specify url as property
      props: {
        url: 'path'
      }
    }
  }
]
```## Данные событий изменения компонента
|Поле|Описание|
|:---:|:---:|
|value|Объект со всеми данными после обработки находится здесь|
|errorMsg|Сборник всех сообщений об ошибках проверки|
|isValid|Флаг успешного прохождения всех проверок|```json
{
  "значение": {},
  "сообщение_ошибки": [],
  "является_валидным": false
}