Поскольку я недавно сделал систему динамического рабочего процесса, мне нужно использовать функцию пользовательской формы. Однако, поскольку мой собственный проект разработан на основе vue3.0, эти пользовательские формы, представленные в настоящее время на рынке, не поддерживаются. Подумав об этом, лучше сделать его самостоятельно, а масштабируемость будет относительно сильна позже. Поэтому я сделал плагин для пользовательских форм на основе vue3.0 + ts со ссылкой на функции большинства пользовательских форм на рынке. Поддерживаются две библиотеки пользовательского интерфейса, ant-design-vue и element-plus. В настоящее время только что сделана первая версия, поэтому я дам краткое введение.Если вам это нужно, вы можете использовать его напрямую.
vue-form-create
Пользовательский конструктор форм на основе Vue3.0 + TS. Поддержите способ, представленный npm и cdn. Библиотека пользовательского интерфейса поддерживает ant-design-vue и element-plus.
Функция поддержки
- удаленный сбор данных
- загрузить изображение
- редактор форматированного текста
- Макет сетки
- Сгенерировать JSON
- сгенерировать код
Демонстрационный адрес (github)
Муж становится .GitHub.IO/v UE-form-adult…
Демонстрационный адрес (gitee)
Муж становится .git ee.IO/v UE-form-adult…
github
npm
Уууу, эта лошадь plus.com/package/v ue…
1 установка
Установить с помощью npm или пряжи
Мы рекомендуем использовать npm или yarn для разработки, можно не только легко отладить в среде разработки, но также можно с уверенностью упаковать и развернуть в производственной среде, используя множество преимуществ, предоставляемых всей экосистемой и цепочкой инструментов.
$ npm install vue-form-create --save
$ yarn add vue-form-create
импорт браузера
использовать в браузереscriptМетки импортируются непосредственно в файл и используют глобальные переменные.formCreate.
Наш релизный пакет npmvue-form-create/distпри условииformCreate.common.js formCreate.umd.js formCreate.umd.min.js. ты можешь пройтиUNPKGскачивать.
<script src="https://unpkg.com/vue-form-create/dist/formCreate.umd.min.js"></script>
Уведомление
-
Независимо от того, импортируется ли он с помощью npm или cdn, его необходимо импортировать глобально.ant-design-vueилиelement-plus. и проект зависит отacejs, который необходимо импортировать с помощью cdn глобально.
<script src="https://unpkg.com/ace-builds/src-noconflict/ace.js"></script> -
cdn должен сам импортировать ant-design-vuemoment.
-
Вы можете использовать соответствующий компонент непосредственно в компоненте, не устанавливая его глобально.
import { AntdDesignForm, ElDesignForm, AntdGenerateForm, ElGenerateForm } from 'vue-form-create'
Пример
импорт нпм
import { createApp } from 'vue'
import antd from 'ant-design-vue'
import App from './App.vue'
import DesignForm from 'vue-form-create'
import 'ant-design-vue/dist/antd.css'
createApp(App)
.use(antd)
.use(DesignForm)
.mount('#app')
импорт браузера
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://unpkg.com/ant-design-vue@next/dist/antd.min.css"
/>
</head>
<body>
<div id="app">
<antd-design-form />
</div>
<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue-form-create/dist/formCreate.umd.min.js"></script>
<script src="https://unpkg.com/ace-builds/src-noconflict/ace.js"></script>
<script src="https://unpkg.com/moment/moment.js"></script>
<script src="https://unpkg.com/ant-design-vue@next/dist/antd.min.js"></script>
<script>
const { createApp, reactive, toRefs } = Vue
createApp({})
.use(antd)
.use(formCreate)
.mount('#app')
</script>
</body>
</html>
2 Компонент Описание
Конструктор форм (AntdDesignForm)
Пример
<template>
<AntdDesignForm ref="designForm" />
</template>
API
Props
| параметр | иллюстрировать | Типы | По умолчанию |
|---|---|---|---|
| preview | Дизайнер Предварительный просмотр кнопки действия | boolean | true |
| generateCode | Кнопка "Создать код" в конструкторе | boolean | true |
| generateJson | Дизайнер генерирует кнопку Json | boolean | true |
| uploadJson | Кнопка импорта JSON в конструкторе | boolean | true |
| clearable | Кнопка очистки дизайнера | boolean | true |
| basicFields | Базовая конфигурация полей в левой части дизайнера | array | - |
| advanceFields | Расширенная конфигурация полей в левой части дизайнера | array | - |
| layoutFields | Конфигурация поля макета в левой части дизайнера | array | - |
метод
Вы можете получить экземпляр и вызвать метод экземпляра через ref
| имя метода | иллюстрировать | параметр |
|---|---|---|
| getJson() | Получить данные JSON для конфигурации дизайнера | - |
| setJson(value) | Установите информацию о конфигурации дизайнера | Данные получены с помощью getJson |
| clear() | Очистить конструктор | |
| getTemplate(type) | Получите готовый к использованию код, сгенерированный дизайнером | тип имеет тип «vue» или «html» |
Поле Описание
Базовые поля (basicFields)
| type | имя поля |
|---|---|
| input | однострочный текст |
| password | поле пароля |
| textarea | многострочный текст |
| number | прилавок |
| radio | группа переключателей |
| checkbox | Группа флажков |
| time | выбор времени |
| date | выбор даты |
| rate | счет |
| select | выпадающее окно выбора |
| switch | выключатель |
| slider | ползунок |
| text | Слово |
Расширенные поля (advanceFields)
| type | имя поля |
|---|---|
| img-upload | картина |
| richtext-editor | редактор форматированного текста |
| cascader | Каскадный селектор |
layoutFields
| type | имя поля |
|---|---|
| grid | Макет сетки |
Генератор форм (AntdGenerateForm)
Пример
<template>
<AntdGenerateForm ref="generateForm" />
</template>
API
Props
| параметр | иллюстрировать | Типы | По умолчанию |
|---|---|---|---|
| data | данные конфигурации формы json (json получен из конструктора форм) | object | - |
| value | данные формы (значение, полученное из конструктора форм) | object | - |
метод
Вы можете получить экземпляр и вызвать метод экземпляра через ref
| имя метода | иллюстрировать | параметр |
|---|---|---|
| getData() | Получить данные формы (вернуть обещание) | - |
| reset() | сбросить данные формы | Данные получены с помощью getJson |
3 Описание функции
удаленные данные
Такие элементы выбора, как переключатели, поля множественного выбора, раскрывающиеся поля выбора и каскадные селекторы, необходимо генерировать с помощью данных, и в это время можно настроить удаленные данные.
Установите адрес удаленного метода и возвращаемое значение.
Файл загружен
Заполните информацию о конфигурации, такую как адрес загрузки сервера и имя параметра.
4 Последующее планирование
В настоящее время он является основной версией V1.0.0, которая, как ожидается, будет поддерживать более функциональные компоненты и компоненты макета и поддержку для мобильных устройств. Для мобильного терминала я не знаю, чтобы использовать библиотеку пользовательского интерфейса, вы можете сказать мне на следующем сообщении, и я отдам приоритет поддержке.
Наконец, если вы считаете, что это хорошо и просто в использовании, пожалуйста, дайте ему звезду 😜😜😜.