Есть строка, содержащая html-разметку. Из неё я делаю массив jsDom
с объектами древовидной структуры. Выглядит это примерно так:
const jsDom = [
{
tagName: 'div',
classes: ['content__par-item'],
content: 'Hello, <pre> world </pre> !',
childNodes: [
{
tagName: '',
classes: [],
childNodes: [],
content: 'Hello, ',
},
{
tagName: 'pre',
classes: [],
content: ' world ',
childNodes: [{
tagName: '',
content: ' world ',
childNodes: [],
classes: [],
}],
},
{
tagName: '',
classes: [],
childNodes: [],
content: ' !',
},
]
},
{},
{},
]
А собирается при помощи computed свойства и метода:
//computed
jsDom() {
const dom = JSDOM.fragment(`${this.flattenContent.reduce((acc, item) => `${acc}<div class="content__par-item">${item.raw}</div>`, '')}`);
const { childNodes } = dom;
let res = [];
for (let i = 0; i < childNodes.length; i++) {
res = [...res, {
tagName: childNodes[i].tagName || 'span',
classes: [...childNodes[i].classList] || [],
id: i === 0 ? this.currentSectionData.id : i,
isHeader: i === 0,
content: childNodes[i].innerHTML,
childNodes: this.childNodesToArr(childNodes[i]),
}];
}
return res;
},
//methods
childNodesToArr(node) {
let res = [];
if (node.childNodes) {
res = [...node.childNodes].map((item) => ({
tagName: item.tagName || '',
classes: item.classList ? [...item.classList] : [],
content: item.data || item.innerHTML,
childNodes: this.childNodesToArr(item) || [],
}));
}
return res;
},
Задача состоит в том, чтобы вместо некоторых тегов (в частности - pre) вставлять компонент, принимающий содержимое этого тега. Самым простым способом мне показалось выбрать все pre регуляркой, разрезать строку шаблона на части, а после этого собрать всё уже в цикле v-for
в template
, вставив в нужные места компоненты, но таким образом любой тег, содержащий pre
, автоматически закрывался, что ломало всю разметку. Я начал думать в сторону render функций, но тут немного запутался. Я создал компонент DynamicComponent
, который в шаблоне родителя вставляется вот так:
<div
v-for="(par, i) in jsDom"
:id="par.isHeader ? sectionId : `id${par.id}`"
:key="i"
class="content__paragraph-text"
@mouseleave="onMouseLeave()"
@mouseenter="onMouseEnter(par)"
>
<DynamicComp :node="par" />
<Btn
v-if="hoveredEl === par.id && !par.isHeader"
:glyph="getBtnGlyph(par)"
class="btn-icon"
@click="toggleBookmark(par)"
/>
</div>
или так
<DynamicComp :nodes="jsDom" />
Тут-то я и запутался - первый вариант для каждого узла по отдельности, второй - для массива. Но поскольку я не могу нормально написать рекурсивную рендер функцию, дальше ничего не получается.
Код компонента DynamicComponent
:
export default Vue.component('DynamicComp', {
name: 'DynamicComp',
components: {
CopyCode,
},
props: {
nodes: {
type: Array,
required: true,
},
},
methods: {
renderChildren(nodes, h) {
console.log(nodes);
return nodes.map((item) => {
if (Array.isArray(item)) {
if (item.childNodes && item.childNodes.length) {
if (item.tagName !== 'PRE') {
return [item.tagName, { class: item.classes.join(' ') }, h(this.renderChildren(item.childNodes))];
}
return ['copy-code', { props: { raw: item.childNodes[0] } }, []];
}
return [item.tagName, 'fff', item.childNodes];
}
});
},
},
render(h) {
const self = this;
return h.apply(self, this.renderChildren(this.nodes, h));
},
});
Был бы очень признателен за помощь с рендер-функцией, ибо сам я уже сильно застрял.
<pre>
или всё же пройтись по массиву (который может иметь несколько подмассивов) и получитьcontent
у всех массивов, гдеtagname
==pre
?innerHTML
элементов в массив, и не отрендерить его через методmount
компонента + его директивуv-html
с внутренним биндом на пропс (или используя слот)? Суть проблемы желательно выделить из общей задачи, в идеале - создав ее минимальный воспроизводимый пример.pre
и заменить их на свой компонент (не DynamicComp, а CopyCode, его я в пример не включил, так как его код не играет роли в сути вопроса). Ну и чтобы вся структура отрендерилась в DOM :)<component is="component-name">
. Вis
можно передать имя компонента или тега из переменной. Так можно собирать любую структуру из массива динамически без рендер-функций используя template