Предисловие: Это конец следующего эпизода В прошлый раз я поделился тем, как построить большой экран визуальных данных от 0 до 1, и представил предварительное исследование размещения данных, разработку области управления, разработку модуля холста, и так далее. Нажмите на меня для ссылки на предыдущую статью 👉Разработать большой экран визуальных данных от 0 до 1 (включено)Следующая часть в основном посвящена модулю управления, модулю управления данными и модулю управления уровнями.
1. Область управления контролем
Область конфигурации элемента управления разделена на два модуля.Модуль конфигурации свойств элемента управления используется для управления свойствами элементов управления на холсте, включая основные свойства, такие как высота, ширина, размер, размер шрифта, тип шрифта и т. д. Как и другие элементы управления. , текст имеет выравнивание, изображение имеет модуль загрузки изображения, режим заполнения, часы имеют выбор формата времени и т. д., за которым следует модуль управления данными, который в основном используется для настройки данных элементов управления, таких как диаграммы, обычно поддерживает статические данные json, импорт данных таблицы csv, динамическую настройку интерфейса API и т. д.
1.1 Модуль настройки свойств управления
Основываясь на том, что внутренний исходный код не является открытым исходным кодом, мы анализируем его через кейсы с открытым исходным кодом.👇 На следующем рисунке показано решение генератора форм с открытым исходным кодом.генератор форм 🔗, область с красной рамкой — это, по сути, область конфигурации, но конфигурация атрибута формы
То же самое относится и к модулю настройки свойств элемента управления экрана больших данных, который, по сути, является визуальной модификацией свойств компонента. Он предназначен для отображения конфигурации json и реализации пользовательских настроек формы. Мы знаем, что каждый элемент управления имеет свою собственную конфигурацию по умолчанию, а затем внесите пользовательские изменения.
Далее мы расскажем, как создать модуль конфигурации свойств управления, проанализировав этот проект с открытым исходным кодом.
На приведенном выше рисунке показана конфигурация атрибута типа кнопки в конфигурации атрибута Различные модули конфигурации отображаются через различие атрибута типа. Для получения дополнительных сведений о настройке атрибутов нажмите 👉ссылка 🔗
👨🎓: Ах Ле: Как связаны элементы управления в области конфигурации свойства, области холста и области слоя?
В основном он включает следующие аспекты:
1.2.1 Связь между областью слоя и областью холста, управляемая областью управления
При перетаскивании элемента управления из области управления на холст путем копирования конфигурации элемента управления по умолчанию, как мы упоминали в предыдущем разделе, библиотека перетаскивания использует
vuedraggable, из которых одинcloneapi, при перетаскивании элемента управления мы можем копировать свойства области управления (свойства по умолчанию).Что касается привязки области холста, области конфигурации и области слоя, мы в основном следим за областью управления.vuedraggableизonEndСобытия можно связать с другими модулями, например с созданием нового слоя, общий процесс выглядит следующим образом👇
1.2.2 Связь между областью слоя и областью конфигурации атрибута, управляемая областью холста
Щелкните один из элементов управления на холсте, область правой панели отображается как модуль конфигурации свойств элемента управления с помощью вышеупомянутого
activeDateЧтобы пройти, в отличие от этого конструктора форм с открытым исходным кодом, я также упомянул в последнем эпизоде, что перетаскивание холста используетvue-draggable-resizable, исходя из необходимости поддерживать размер свободного перетаскивания, отслеживая егоactivatedсобытие, чтобы зафиксировать событие выбранного элемента управления на холсте, чтобы изменить область конфигурации свойства
Когда изменяется область конфигурации свойства, изменяется вид элемента управления на холсте или область холста изменяется вручную, а изменение области конфигурации свойства синхронизируется.По существу, область холста и область конфигурации свойства являются двумя: поток данных.Независимо от того, какие данные области изменены, они будут синхронизированы с другой областью
👨🎓: Ах Ле: Вы используете активированный реквизит в качестве реквизита, чтобы обеспечить поток данных между областью холста и областью управления.Я помню, что реквизит течет в одном направлении, и если активированный реквизит изменяется в области управления подкомпонентом, Vue будет контролировать браузер в браузере Тайчжун выдал предупреждение?
Ответ: Да, как указано на официальном сайте Vue: prop создает одностороннюю привязку по нисходящему каналу между родительским и дочерним компонентами: обновление родительского компонента будет передаваться дочернему компоненту, но не наоборот. Это предотвращает случайные изменения родительского состояния из дочерних компонентов, которые могут сделать поток данных вашего приложения непонятным.
Однако, когда значение, переданное родительским компонентом, является массивом или объектом, дочерний компонент может не только изменить его напрямую, но и не сообщит об ошибке.Изменение самого объекта или массива в дочернем компоненте повлияет на состояние родительский компонент.
Причина в том, что то, что родительский компонент передает дочернему компоненту, на самом деле просто адрес ссылки.Когда дочерний компонент изменяет объект, он действительно изменяет значение, сохраненное в пространстве кучи, и, конечно, значение в родительском компоненте также будет изменить, но адрес ссылки не был изменен
1.2 Модуль конфигурации источника данных
Обычно наше управление данными используется для настройки данных элементов управления, таких как диаграммы, обычно поддерживает статические данные json, импорт данных таблицы csv, динамическую настройку интерфейса API, а для некоторых общих модулей, текста, изображений и т. д. вкладка не отображается . Ссылка на вид выглядит следующим образом 👇. Сосредоточьтесь на источниках данных API
1.2.1 Об источнике данных API
После поддержки различных источников данных путем определения метода запроса, доступа к API, заголовка запроса и т. д. привяжите источник данных в области конфигурации свойств элемента управления.
dataSourceUrl, а затем сделать запрос в процессе привязки, синхронизироваться с панелью результатов ответа данных и, наконец, отобразить изменения в представлении элемента управления в области холста.
👨🎓: Одноклассник А Ле: Так вы, данные все еще статичны, и окончательный экран данных также является отображением статических данных?
A: Мы привязываем dataSourceUrl источника данных и конфигурацию интервала обучения вращения к свойствам управления, а затем отправляем запрос при переходе пользователя из режима редактирования в режим полноэкранного предварительного просмотра.Общий принцип следующий 👇
🤔Думаю: Как оптимизировать, если запросов много?
2. Модуль управления слоями
Выше мы упоминали, что слой связан областью управления, но по существу он больше всего влияет на область холста, например, копирование слоя, удаление слоя и т. д., а также обновление вида области холста. области слоя. Покажите немного 👇
👨🎓: Ах Ле: Как слои влияют на порядок наложения областей холста?
Ответ: Слой также поддерживает перетаскивание и перемещение вверх и вниз по сути, что также основано наvuedraggable, но разница в том, что при перетаскивании верхнего и нижнего уровней это повлияет наz-indexИзменение, то есть установка порядка наложения элементов (настроить порядок наложения элементов управления в канве) реализовано следующим образом👇
👨🎓: Ах Ле: Как панель управления, которая появляется при щелчке правой кнопкой мыши по слою?
Ответ: Вы можете отслеживать vue@contextmenu.preventСобытие — это новая функция h5, но совместимость относительно плохая.
🌲Предыдущие статьи Соуса:
- Построение интерфейсной системы знаний Шуцзяна (часть 1)
- Построение внешней системы знаний Шуцзяна (ниже)
- Расскажите об инструментах ежедневной совместной работы для фронтенд-разработки
- Конфигурацию Babel тупо не могу понять
- Как лучше управлять интерфейсом API
- Что интервьюер спросил вас об узле
- передовой инжиниринг
- Вы изучили BFF и Serverless?
- Развертывание интерфейсной эксплуатации и обслуживания
Пожалуйста, выпейте 🍵 Не забудьте подключиться три раза~
1. После прочтения не забудьте поставить лайк 🌲 соусу, там есть 👍 и мотивация
2. Обратите внимание на интересные вещи в интерфейсе официального аккаунта и пообщайтесь с вами об интересных вещах в интерфейсе.
3. Статья попала в Github frontendThings благодаря Star✨