Добрый день. Подскажите, можно как-то сделать пререндер узла (Vnode). Делаю

Question

Добрый день. Подскажите, можно как-то сделать пререндер узла (Vnode). Делаю

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

#frontend #javascript #programming #russian #vue.js

0

21.11.2023

12 ответов

36 просмотров

Alexey Erisov Автор вопроса

Grigorii K. Shartsev
Проще срендерить как есть, посмотреть размер, и за...

Ну второй экземпляр прям слишком. А перендер, как реализовать? В render сперва как есть детей вывожу, но поставив hidden свойство. А потом в mount как именно заменить отрендеренных детей на обернутых детей?

0

21.11.2023

Grigorii K. Shartsev

Alexey Erisov
Ну второй экземпляр прям слишком. А перендер, как ...

в mount - никак, просто в шаблоне рендерить как обычно по условию

0

21.11.2023

Роман Бандурин

когда у меня была такая задача, решалась через https://vueuse.org/core/useMediaQuery/ но там media-query было достаточн

0

21.11.2023

Alexey Erisov Автор вопроса

Роман Бандурин
когда у меня была такая задача, решалась через htt...

Тут размеры не экрана. А элементов. Мне нужно произвольную вёрстку разбить на страницы А4. Но пользователь должен видеть уже конечную постраничную вёрстку

0

21.11.2023

Роман Бандурин

Alexey Erisov
Тут размеры не экрана. А элементов. Мне нужно прои...

может вот это поможет: https://vueuse.org/core/useElementSize/ https://vueuse.org/core/useElementBounding/

0

21.11.2023

Alexey Erisov Автор вопроса

Роман Бандурин
может вот это поможет: https://vueuse.org/core/use...

Да это я видел. Это просто сахар. Получить размеры из рефа то я могу) Тут больше архитектурный вопрос, как правильно сделать. Выше подсказали, что лучше и правда первым рендером выводить скрытых детей, а потом их мутировать. Теперь пытаюсь понять, как мне отрендеренного ребёнка заменить на новый vnode.

0

21.11.2023

Grigorii K. Shartsev

Alexey Erisov
Да это я видел. Это просто сахар. Получить размеры...

При каждом рендере vnode-ы уже новые

0

21.11.2023

Роман Бандурин

через эти vueUse тоже можно сначала вывести потомков, получить их размеры, от них сделать computed, Вычислить новый макет и сделать размеры элементов согласно новому макету. Т е как если бы это было в несколько этапов

0

21.11.2023

Alexey Erisov Автор вопроса

Роман Бандурин
через эти vueUse тоже можно сначала вывести потомк...

Да, к такому примерно и пришёл пока. В render(), проверяю, если размеры детей посчитаны и записаны в состояние, то рендерятся модифицированные дети, а если значения не посчитаны, то выводятся просто чистые дети. А в mounted() считываю размеры детей и записываю в состояние компонента. Получается то что нужно вроде, первый рендер просто выводит чистых детей и считает их размер, а при ререндере уже произойдёт модификация детей. Ещё не допилил реализацию, но вроде должно все нормально быть с перфомансом

0

21.11.2023

Ruslan

Alexey Erisov
Да, к такому примерно и пришёл пока. В render(), п...

Можно без рендер функций Сперва отрисовываешь скрыто или за пределами экрана элементы (будущих "детей") Считаешь размеры, определяешь нужный layout и вставляешь его через <component is>, например, (или выбор через v-if-ы) уже с детьми. Разрешаешь отрисовку (перед этим всем страница была скрыта через v-if). Никаких детей никуда двигать не надо.

0

21.11.2023

Alexey Erisov Автор вопроса

Ruslan
Можно без рендер функций Сперва отрисовываешь скры...

В шаблоне это многословно будет, поэтому рендер функцию использую. Там не просто каждого ребёнка обернуть или нет, там нужно прочесть массив, посчитать общую высоту, потом разбить на страницы и страницы вывести. Можно и в шаблоне сделать, но будет менее читаемо. Все же рендер функции ближе к обычному js и его проще читать/следить за исполнением

0

21.11.2023

Grigorii K. Shartsev · Accepted Answer

Grigorii K. Shartsev

Проще срендерить как есть, посмотреть размер, и затем перерендерить в зависимости от размера. "пре рендер" можно сделать, но грязненько. Можно сделать экземпляр нового Vue приложения и в нём рендерить

0

21.11.2023

169 похожих чатов

Добрый день. Подскажите, можно как-то сделать пререндер узла (Vnode). Делаю

12 ответов

Похожие вопросы