Получите HTML из компонентов Vuetify, не размещая его в dom

#javascript #html #vue.js #dom #vuetify.js

Вопрос:

Для моего собственного проекта я хотел бы получить HTML код из нескольких Vuetify components . Не как а HTML string , а действительно как а DOM element , которое можно немедленно приложить к телу. Я хочу этого, чтобы я мог использовать эти компоненты в a non Vue environment .

Есть ли какой-нибудь способ, которым я могу это сделать?

Ответ №1:

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

У меня были некоторые аналогичные требования в прошлом, когда мне нужно было получить доступ ко всему содержимому HTML компонентов/подкомпонентов.

Я сделал это, отрисовав компоненты в iframe. Оттуда вы можете получить доступ и изменить смонтированный iframe DOM.

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

Из беглого поиска в Интернете я нашел эту ссылку https://jsfiddle.net/ohznser9/ с помощью скрипки JS, демонстрирующей i-frame компонент, который использует компоненты Vue в качестве слота.

Я бы предположил, что вы могли бы расширить этот компонент, чтобы добавить функциональность для изменения или извлечения элементов из DOM.

Возможно, вы могли бы незаметно загрузить iframe, извлечь из него элементы DOM и делать с ними все, что пожелаете