компонент, который принимает любые элементы, и в зависимости от их размеров, оборачивает в другой компонент. В render получил дочерние узлы, но т.к. они ещё не отрендерены не могу получить их размер. Получается, нужно сперва их отрендерить как есть, а потом уже менять в mount? Или можно как-то сделать пре render?
Проще срендерить как есть, посмотреть размер, и затем перерендерить в зависимости от размера. "пре рендер" можно сделать, но грязненько. Можно сделать экземпляр нового Vue приложения и в нём рендерить
Ну второй экземпляр прям слишком. А перендер, как реализовать? В render сперва как есть детей вывожу, но поставив hidden свойство. А потом в mount как именно заменить отрендеренных детей на обернутых детей?
в mount - никак, просто в шаблоне рендерить как обычно по условию
когда у меня была такая задача, решалась через https://vueuse.org/core/useMediaQuery/ но там media-query было достаточн
Тут размеры не экрана. А элементов. Мне нужно произвольную вёрстку разбить на страницы А4. Но пользователь должен видеть уже конечную постраничную вёрстку
может вот это поможет: https://vueuse.org/core/useElementSize/ https://vueuse.org/core/useElementBounding/
Да это я видел. Это просто сахар. Получить размеры из рефа то я могу) Тут больше архитектурный вопрос, как правильно сделать. Выше подсказали, что лучше и правда первым рендером выводить скрытых детей, а потом их мутировать. Теперь пытаюсь понять, как мне отрендеренного ребёнка заменить на новый vnode.
При каждом рендере vnode-ы уже новые
через эти vueUse тоже можно сначала вывести потомков, получить их размеры, от них сделать computed, Вычислить новый макет и сделать размеры элементов согласно новому макету. Т е как если бы это было в несколько этапов
Да, к такому примерно и пришёл пока. В render(), проверяю, если размеры детей посчитаны и записаны в состояние, то рендерятся модифицированные дети, а если значения не посчитаны, то выводятся просто чистые дети. А в mounted() считываю размеры детей и записываю в состояние компонента. Получается то что нужно вроде, первый рендер просто выводит чистых детей и считает их размер, а при ререндере уже произойдёт модификация детей. Ещё не допилил реализацию, но вроде должно все нормально быть с перфомансом
Можно без рендер функций Сперва отрисовываешь скрыто или за пределами экрана элементы (будущих "детей") Считаешь размеры, определяешь нужный layout и вставляешь его через <component is>, например, (или выбор через v-if-ы) уже с детьми. Разрешаешь отрисовку (перед этим всем страница была скрыта через v-if). Никаких детей никуда двигать не надо.
В шаблоне это многословно будет, поэтому рендер функцию использую. Там не просто каждого ребёнка обернуть или нет, там нужно прочесть массив, посчитать общую высоту, потом разбить на страницы и страницы вывести. Можно и в шаблоне сделать, но будет менее читаемо. Все же рендер функции ближе к обычному js и его проще читать/следить за исполнением
Обсуждают сегодня