Слияние кода завершено, страница обновится автоматически
vue-form-create — это основанный на Vue 3.0 и TypeScript генератор пользовательских форм. Можно импортировать с помощью npm или cdn. Поддерживает библиотеки пользовательского интерфейса ant-design-vue и element-plus.
https://fuchengwei.github.io/vue-form-create/example/index.html.
http://fuchengwei.gitee.io/vue-form-create.
https://github.com/fuchengwei/vue-form-create.
https://www.npmjs.com/package/vue-form-create.
Мы рекомендуем использовать npm или yarn, чтобы упростить отладку в среде разработки и обеспечить безопасное развертывание в производственной среде.
$ npm install vue-form-create --save
$ yarn add vue-form-create
Импортируйте файл в браузере с помощью тега script и используйте глобальную переменную formCreate. Мы предоставляем formCreate.common.js, formCreate.umd.js и formCreate.umd.min.js в пакете npm vue-form-create. Вы также можете загрузить их через или 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-vue необходимо самостоятельно импортировать moment.
Если вы не хотите устанавливать компоненты в глобальном масштабе, вы можете напрямую использовать соответствующие компоненты внутри компонентов.
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>
<template>
<AntdDesignForm ref="designForm" />
</template>
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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) | Получение кода, который может быть непосредственно использован в редакторе. Тип 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 | Макет сетки |
<template>
<AntdGenerateForm ref="generateForm" />
</template>
| Параметр | Описание | Тип | По умолчанию |
|---|---|---|---|
| data | Данные формы в формате JSON, полученные из редактора форм | object | - |
| value | Данные формы, полученные от генератора форм | object | - |
| disabled | Состояние отключения | boolean | false |
Экземпляр можно получить через ref и вызвать его методы.
| Метод | Описание | Параметры |
|---|---|---|
| getData() | Получить данные формы (возвращает Promise) | - |
| reset() | Сбросить данные формы | Данные, полученные с помощью getJson |
Для одиночных и множественных вариантов выбора, выпадающих списков и иерархических списков выбор должен генерироваться на основе данных. В этом случае можно настроить удалённые данные.
Задайте метод удалённого доступа и возвращаемое значение.
Заполните информацию о конфигурации, такую как адрес загрузки на сервер и имя параметра.
Текущая версия — это первая версия v1.0.0. Планируется добавить больше функциональных компонентов и макетов, а также поддержку мобильных устройств.
Если вы считаете, что это хорошо и полезно, пожалуйста, поставьте звёздочку 🌟🌟🌟.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )