Интерфейсный визуальный редактор действий Vue

Vue.js

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

Демонстрационный адрес:форме.Несколько слов.Что/v UE-редактор.…

адрес проекта:GitHub.com/несколько слов-маленький/v UE-…

на основеJSON SchemaПростой визуальный редактор активности из коробки.

задний план

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

Использованная литература:GitHub.com/CNT Чен/CNT…

JSON SchemaВ основном используется в следующих точках:

  • на основеJSON SchemaДля динамического создания форм конфигурации данных и проверки данных
  • Синхронизация с процессом выпускаJSON SchemaПерейти в серверную систему для проверки данных интерфейса
  • Один раздел деятельности соответствует одномуJSON Schemaи видView组件Только что

выполнить

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

Нам неизбежно нужен один для каждого разделаView组件Приходите показать, потому что каждая тарелка выглядит по-разному. Форма конфигурации блока и проверка данных пройденыJSON SchemaРеализовать, а потом нести эти таблички и еще какие-то данные конфигурации через таскаемый контейнер.

Как показано ниже:

Таким образом, когда мы добавляем новый раздел, нам нужно только разработатьView组件, и напишитеJSON Schemaдля определения данных.

Функции

На основе Vue, зависит от ElementUi, vuedraggable, @lljj/vue-json-schema-form

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

Чтобы добавить новый раздел, просто перейдите кconfig/tools.jsИмпортируйте новую панель и настройте панель инструментов, например:

import componentPackFlashSaleGoodsList from '../viewComponents/FlashSaleGoodsList';

const tools = [
    {
        groupName: '图文类',
        componentList: [{
            // 比如这里添加新增的模块
            title: '秒杀商品', // 板块标题
            maxNum: 3, // 最多可添加次数
            icon: 'el-icon-picture', // 工具栏图标类名
            componentPack: componentPackFlashSaleGoodsList, // 重点是这个当前板块的组件包
            additional: {
                bottomDisplay: true, // 是否置底显示
                topDisplay: true, // 是否置顶显示
                unRemove: true // 是否为不可移除
            }
        }]
    }
]

Файловая структура нового раздела следующая: (viewComponents/FlashSaleGoodsList/index.jsЭто соответствует импортированному файлу пакета компонентов конфигурации панели инструментов выше)

import propsSchema from './schema.json';
import uiSchema from './uiSchema.js';
import errorSchema from './errorSchema.js';

// 这里可以异步导入
const View = () => import('./View.vue');

const NAME = propsSchema.id;
const componentViewName = `${NAME}View`;

export default {
    propsSchema, // （必须） JSON Schema 定义数据结构和生成表单 vue-json-schema-form 参数    
    componentViewName,  // （可选） 组件名 不配置可以自动生成
    View, // 视图View组件
    uiSchema, // uiSchema 辅助增强表单样式 不必须 vue-json-schema-form 参数
    errorSchema, // 辅助增强表单校验错误提示 不必须 vue-json-schema-form 参数
    // customRule, // 自定义的校验规则 vue-json-schema-form 参数 （需要更多的vue-json-schema-form 参数参数可自己添加）
};

Модуль экспорта объясняется следующим образом:

  • propsSchema:requiredКонфигурация схемы JSON, используемая для создания формы, должна содержать уникальныйidАтрибуты;
  • View:requiredКомпонент просмотра панели нужно импортировать асинхронно () => import('./xxx.vue');
  • componentViewName:可选Имя компонента VIEW сектора не настроено на создание уникального идентификатора, который обычно не требуется;
  • uiSchema:可选Используется для улучшения стиля сгенерированной формы, его также можно настроить непосредственно вpropsSchemaсередина;
  • errorSchema:可选Информация о запросе подтверждения, используемая для улучшения формы, также может быть настроена непосредственно вpropsSchemaсередина;
  • customRule:可选Используется для настройки данных формы проверки, ее также можно настроить непосредственно вpropsSchemaсередина;

если вам нужно большеvue-json-schema-formпараметры могут быть напрямуюpackages/demo/src/vue-editor/views/editor/Editor.vueоказыватьVueElementFormКомпоненты можно добавлять.

  • Новые разделы см./packages/demo/src/vue-editor/views/editor/viewComponentsСуществующие разделы
  • Панель инструментов и данные по умолчанию настраиваются в/packages/demo/src/vue-editor/views/editor/configвнутри папки

Вся реализация относительно проста. Если вам интересно, вы можете потратить два часа на просмотр исходного кода. Добро пожаловать, чтобы обсудить и задать вопросы.

Категории