предисловие

Позвольте мне рассказать вам, почему я это делаю. Самая большая причина в том, что я слишком ленив, а во-вторых, я управляю этой вещью в фоновом режиме.Есть всего несколько вещей, которые приходят и уходят, такие как запросы, формы форм, формы таблиц, всплывающие окна и т. д. ., плюс какие-то добавления, удаления, правки Логика, так или иначе, я остался в двух компаниях для бэк-менеджмента, я думаю, что бэк-менеджмент у всех не отделен от него. После долгой работы над такого рода вещами я чувствую, что писать код бессмысленно, копировать и вставлять, копировать и вставлять, я сначала был слишком счастлив, я начал путаться, я просто подумал, я вышел на интервью позже, интервьюер спросил меня: «Что такого сложного в этом проекте?» В это время я думал об управлении фоном tmd, которое представляет собой сложность добавления, удаления, изменения и проверки. Лично я давно копирую и вставляю, поэтому начал исследовать, есть ли способ уйти от рутинной операции копирования и вставки, а потом начал инкапсулировать некоторые общие глобальные компоненты на основе фирменного UI фреймворка и бизнес компании, и мне нужно только передать JSON для рендеринга. Мне не нужно копировать и вставлять нужный стиль и компоненты пользовательского интерфейса. Если стиль изменится, мне нужно изменить только один компонент, чтобы он вступил в силу. Это приятно. Однако люди любят новое и ненавидят старое, и им становится скучно, когда они используют его слишком много.Я начал думать, можно ли помочь мне добиться такого кода, который приходит и уходит с помощью визуального перетаскивания? Я только недавно узнал о многих платформах с открытым исходным кодом и, наконец, я хочу это сделать.Благодаря этому методу я могу решить некоторые из своих скучных фоновых задач по управлению в сочетании с бизнесом компании. Наконец добрался до этого проекта.

Опыт результатов

Сначала взгляните на рендеры:

Слева находится область материала, которую можно перетащить в среднюю область просмотра, а слева находится область настраиваемых атрибутов.

Так что это тот эффект, который я изначально хотел, а как насчет функции? Предварительный просмотр, просмотр JSON сгенерированного представления, создание файла vue и экспорт.

Кратко опишите эти функции.

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

View JSON: то есть JSON представления, которое мы сгенерировали путем перетаскивания.

Генерировать экспорт файла vue: Это нужно для того, чтобы уведомить JSON о создании страницы компонента, которую мы хотим, и поместить ее в наш фоновый проект управления vue, потому что внутреннее управление не похоже на маркетинговую платформу с низким кодом.Одна страница упакована в один проект и выпущен напрямую. Все, о чем я могу думать, это экспортировать файл .vue и вручную поместить его в проект, в который мы хотим его поместить.

Вот так выглядела моя первая версия.

Нечего сказать, не нужно это испытывать,по ссылке, не надо 99, не надо 9.9, семья угадает сколько, да, бесплатно, вы не ослышались, бесплатно~

Трудности, возникающие в процессе разработки, и пути их решения

Вопрос 1: Как текущий перетаскиваемый компонент может прилипнуть к предыдущему компоненту после перетаскивания?

Эта задача легко решается, если мы получим высоту каждой компоненты.Пусть первый компонент должен быть присоединен к верхнему, тогда его вершина равна 0. Тут спорить не о чем.Позиция есть высота компонента. Если высота первого компонента равна 60, то высота второго компонента равна 60, высота третьего компонента равна сумме высот предыдущих компонентов и так далее.

Вопрос 2: После перетаскивания и отпускания, как узнать, где он находится? Второй или третий или первый?

Эту проблему легко решить, если вы ее понимаете.Получите значение clientY после того, как текущий перетаскиваемый компонент будет удален, используйте это значение для замены предыдущего значения позиции y, а затем выполните сортировку, мы можем узнать его текущую позицию. , окончательный рендеринг просто отличный.

Вопрос 3: Как рендеринг настраиваемых свойств решает проблему уникальности ключей?

Из-за формы Form после инкапсуляции мне приходится передавать такой кусок JSON для рендеринга представления. пример:[{ "type":"input", "label": "名字", "prop": "name", "span": 12 }, { "label": "年龄", "prop": "age", "span": 12, "type":"select", "options":[{"label":"test","value":"1"}] }], Поскольку область свойств изначально является формой формы, если она отображается таким образом, будет несколько ключевых значений, таких как несколько типов, несколько меток и т. д. Эти же ключи, если мы используем ключ для сращивания реквизита Конечно, значение ключа может решить уникальность. Например, name_type, name_lable, age_type, age_label и т. д.

Вопрос 4: При перетаскивании компонента в область просмотра, как рассчитать его положение?

Например, текущая позиция компонента — это позиция y=60. Я собираюсь перетащить его в исходное положение, и мы хотим узнать его измененное положение. Измененная позиция = текущая позиция + (позиция перетаскивания - текущая позиция).

Вопрос 5: Как генерировать вопросы .vue?

Это будет использовать операции чтения и записи узла Dafa.Сначала напишите шаблон vue, затем замените его комментариями, которые занимают место, а затем экспортируйте его.

Чего ждать от второго издания

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

позже

Экспортированный файл vue можно напрямую использовать в вашем собственном проекте vue, потому что я упаковал и загрузил эти компоненты на сервер, а удаленные компоненты загружены, но я не записал конфигурацию компонентов, мне это интересно Да или заинтересованы в загрузке удаленных компонентов или заинтересованы в низкоуровневом коде, вы можете оставить сообщение или добавить меня в чат со мной в частном порядке, давайте обсудим и научимся вместе.

Я пришел сюда, я все это видел здесь, почему бы вам не поставить лайк и уйти ❤️.