OSCHINA-MIRROR/dream2023-f-render

FRender


#### 第 3 步：Использование
```html
<template>
  <f-render
    @save="handleSave"
    :loading="loading"
    height="calc(100vh - 60px)"
    :config="formConfig"
  />
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        formConfig: {}
      };
    },
    methods: {
      handleSave(res) {
        // Здесь сохраняется в localStorage, вы можете сохранить на сервер
        localStorage.setItem("form-config", res);
        this.$message.success("Сохранение успешно!");
      }
    },
    mounted() {
      // Имитация асинхронной загрузки
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.formConfig = localStorage.getItem("form-config") || "";
      }, 1000);
    }
  };
</script>

Пользовательский режим

Мы разделяем динамические формы на два этапа:

Первый этап — это этап проектирования: проектирование форм с помощью перетаскивания;
Второй этап — пользовательский этап: предоставление пользователям готовых форм для заполнения.

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

Конфигурация на основе f-render

С помощью атрибута pure можно использовать непосредственно как форму, способ отправки данных такой же, как у vue-ele-form, подробности см. в документации.

<template>
  <f-render
    v-model="formData"
    :request-fn="handleSubmit"
    @request-success="handleSuccess"
    :config="formConfig"
    pure
  />
</template>

<script>
  export default {
    data() {
      return {
        formData: {},
        formConfig: ""
      };
    },
    methods: {
      handleSubmit(data) {
        console.log(data);
        return Promise.resolve();
      },
      handleSuccess() {
        this.$message.success("Создание успешно");
      }
    },
    mounted() {
      // Имитация асинхронной загрузки
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.formConfig = localStorage.getItem("form-config") || "";
      }, 1000);
    }
  };
</script>

Конфигурация на основе vue-ele-form

Если ваш визуальный дизайн и формы не являются частью одной системы, вы можете напрямую использовать vue-ele-form без установки f-render, как показано ниже:

<template>
  <ele-form
    v-model="formData"
    :request-fn="handleSubmit"
    @request-success="handleSuccess"
    v-if="formConfig"
    v-bind="formConfig"
  />
</template>

<script>
  export default {
    data() {
      return {
        formData: {},
        formConfig: null
      };
    },
    methods: {
      handleSubmit(data) {
        console.log(data);
        return Promise.resolve();
      },
      handleSuccess() {
        this.$message.success("Создание успешно");
      }
    },
    mounted() {
      try {
        this.formConfig = eval(`(${localStorage.getItem("form-config")})`);
      } catch {
        this.$message.error("Ошибка анализа данных");
      }
    }
  };
</script>

Настройка

Добавление официального расширения компонента (на примере расширения с богатым текстом)

Установка компонента

yarn add vue-ele-form-quill-editor

Регистрация компонента

Vue.component("quill-editor", EleFormQuillEditor);

Настройка свойств

<template>
  <!-- Опустить другие свойства -->
  <f-render :comps="comps" />
</template>

<script>
  // По умолчанию
  import comps from "f-render/src/fixtures/comps";
  // Расширение с богатым текстом
  import quillEditor from "f-render/src/fixtures/extends/quill-editor";
  // Можно изменить отображаемый порядок компонентов, по умолчанию 10
  quillEditor.sort = 2;

  export default {
    data() {
      return {
        comps: comps.concat(quillEditor)
      };
    }
  };
</script>

Добавление пользовательского компонента

Создание компонента и глобальная регистрация

Необходимо создать пользовательский компонент в соответствии с документацией vue-ele-form и зарегистрировать его.

Написание конфигурации

Вы можете обратиться к примеру и описанию свойств в исходном коде (./src/fixtures/comps.js), вот пример и описание свойств:

// custom-url.js
export default {
  type: "custom-url",
  label: "URL",
  sort: 1,
  config: {
    url: "https://www.xxx.com",
    attrs: {
      config: {
        max: {
          type: "number",
          label: "Максимальная длина ввода"
        },
        name: {
          type: "input",
          label: "Исходное имя",
          required: true
        }
        // ....
      }
      // ...
    }
    // ...
  }
};
``` ### Экосистема

| Проект                                                                                     | Статус                                                                               | Описание                                |
| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | --------------------------------------- |
| [vue-ele-form](https://github.com/dream2023/vue-ele-form)                                  | [![npm](https://img.shields.io/npm/v/vue-ele-form)](https://github.com/dream2023/vue-ele-form) | Элемент управления данными на основе ElementUI |
| [f-render](https://github.com/dream2023/f-render)                                           | [![npm](https://img.shields.io/npm/v/f-render)](https://github.com/dream2023/f-render)     | Визуальный инструмент проектирования форм для vue-ele-form |
| [vue-ele-form-json-editor](https://github.com/dream2023/vue-ele-form-json-editor)          | [![npm](https://img.shields.io/npm/v/vue-ele-form-json-editor)](https://github.com/dream2023/vue-ele-form-json-editor) | Редактор JSON (расширение vue-ele-form)   |
| [vue-ele-form-upload-file](https://github.com/dream2023/vue-ele-form-upload-file)          | [![npm](https://img.shields.io/npm/v/vue-ele-form-upload-file)](https://github.com/dream2023/vue-ele-form-upload-file) | Компонент загрузки файлов (расширение vue-ele-form) |
| [vue-ele-form-image-uploader](https://github.com/dream2023/vue-ele-form-image-uploader)   | [![npm](https://img.shields.io/npm/v/vue-ele-form-image-uploader)](https://github.com/dream2023/vue-ele-form-image-uploader) | Улучшенный компонент загрузки изображений (расширение vue-ele-form) |
| [vue-ele-form-tree-select](https://github.com/dream2023/vue-ele-form-tree-select)         | [![npm](https://img.shields.io/npm/v/vue-ele-form-tree-select)](https://github.com/dream2023/vue-ele-form-tree-select) | Компонент выбора дерева (расширение vue-ele-form) |
| [vue-ele-form-table-editor](https://github.com/dream2023/vue-ele-form-table-editor)       | [![npm](https://img.shields.io/npm/v/vue-ele-form-table-editor)](https://github.com/dream2023/vue-ele-form-table-editor) | Редактор таблиц (расширение vue-ele-form)    |
| [vue-ele-form-dynamic](https://github.com/dream2023/vue-ele-form-dynamic)                 | [![npm](https://img.shields.io/npm/v/vue-ele-form-dynamic)](https://github.com/dream2023/vue-ele-form-dynamic) | Динамическая форма (расширение vue-ele-form) |
| [vue-ele-form-video-uploader](https://github.com/dream2023/vue-ele-form-video-uploader)   | [![npm](https://img.shields.io/npm/v/vue-ele-form-video-uploader)](https://github.com/dream2023/vue-ele-form-video-uploader) | Расширенный компонент загрузки видео (расширение vue-ele-form) |
| [vue-ele-form-quill-editor](https://github.com/dream2023/vue-ele-form-quill-editor)       | [![npm](https://img.shields.io/npm/v/vue-ele-form-quill-editor)](https://github.com/dream2023/vue-ele-form-quill-editor) | Текстовый редактор Quill (расширение vue-ele-form) |
| [vue-ele-form-markdown-editor](https://github.com/dream2023/vue-ele-form-markdown-editor) | [![npm](https://img.shields.io/npm/v/vue-ele-form-markdown-editor)](https://github.com/dream2023/vue-ele-form-markdown-editor) | Редактор Markdown (расширение vue-ele-form) |
| [vue-ele-form-bmap](https://github.com/dream2023/vue-ele-form-bmap)                       | [![npm](https://img.shields.io/npm/v/vue-ele-form-bmap)](https://github.com/dream2023/vue-ele-form-bmap) | Компонент Baidu Map (расширение vue-ele-form) | Вклад любого рода приветствуется!