1

Есть строка, содержащая 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));
  },
});

Был бы очень признателен за помощь с рендер-функцией, ибо сам я уже сильно застрял.

9
  • До середины, мне казалось, что я понимаю о чём идёт речь, во второй половине только запутался ))) Что в итоге надо сделать? Удалить <pre> или всё же пройтись по массиву (который может иметь несколько подмассивов) и получить content у всех массивов, где tagname == pre?
    – Denis640Kb
    Commented 19 янв. 2020 в 22:08
  • 1
    Реализация какая-то замороченная. Почему просто не взять innerHTML элементов в массив, и не отрендерить его через метод mount компонента + его директиву v-html с внутренним биндом на пропс (или используя слот)? Суть проблемы желательно выделить из общей задачи, в идеале - создав ее минимальный воспроизводимый пример.
    – yar85
    Commented 19 янв. 2020 в 22:19
  • @Denis640Kb Блин, извиняюсь за неясную формулировку. Да, нужно именно удалить pre и заменить их на свой компонент (не DynamicComp, а CopyCode, его я в пример не включил, так как его код не играет роли в сути вопроса). Ну и чтобы вся структура отрендерилась в DOM :) Commented 19 янв. 2020 в 22:20
  • Не уверен что правильно понял в чем суть вопроса, но возможно тебе стоит посмотреть на <component is="component-name">. В is можно передать имя компонента или тега из переменной. Так можно собирать любую структуру из массива динамически без рендер-функций используя template Commented 19 янв. 2020 в 22:26
  • @Nikita Umnov да, действительно. Большое спасибо, я думаю, что в шаблоне мне это сделать будет действительно гораздо проще. А почему jsDom не нужен будет? Commented 19 янв. 2020 в 22:35

2 ответа 2

0

Максимально простое решение, имхо (без монтирования "вручную" и полного парсинга разметки) - через правку элемента монтирования корневого экземпляра:

const preCmpnt = Vue.component('custom-pre', {
  data: () => ({
    count: 0, 
  }), 
  template: `
    <pre style="outline: 1px dashed red;" @click="$emit('foo', ++count)">
      <slot></slot>
    </pre>
  `, 
}); 

const wrapperMixin = wrapperMixinFactory({
  pre: { component: preCmpnt, attributes: '@foo="onFooEvent"' }, 
}); 
const vm = new Vue({
  el: '#app', 
  mixins: [wrapperMixin], 
  methods: {
    onFooEvent(data) {
      console.log('Event fired! Payload: ' + data); 
    }
  }, 
}); 

function wrapperMixinFactory(wrappersData) {
  const mixin = {
    data: {
      wrappers: new Map(), 
    }, 
    created() {
      const el = document.querySelector(this.$options.el); 
      let html = el.innerHTML; 
      this.wrappers.forEach((wrapper, tag) => {
        const re = new RegExp(`(</?)(${tag}[^>]*)>`, 'gi'); 
        html = html.replace(re, (m, g1, g2) => {
          let result = `${g1}custom-${g2}`; 
          if (g1.charAt(1) !== '/') 
            result += ' ' + wrapper.attributes; 
          return result + '>'; 
        }); 
      }); 
      el.innerHTML = html; 
    },
  }; 
  Object.keys(wrappersData).forEach(tag => {
    mixin.data.wrappers.set(tag, wrappersData[tag]); 
  }); 
  return mixin; 
}
pre { display: inline-block; }
<div id="app" class="content__par-item">
  Hello, <pre>   world      </pre> !
  <hr>
  <p>Lorem <pre>ipsum
  </pre> dolor sit amet</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

Функция wrapperMixinFactory принимает аргументом объект конфигурации, где ключ - тег заменяемых в разметке элементов, а значение - объект со свойствами component и attributes (их назначение очевидно по коду).
Возвращает примесь, которая автоматически правит разметку перед монтированием, и содержит данные конфига в свойстве wrappers.

Недостатки:
• не умеет работать с template вместо el (хотя, это поправимо, если шаблон доступен через $options)
• префикс тега компонента приходится хардкодить (можно обойти это ограничение регистрируя компоненты в фабрике)
• не предусмотрена возможность исключения (заменяются все элементы с указанными тегами)
• единые атрибуты и vue-директивы для всех компонентов одного тега

0

У меня получилось вот так

const Test = Vue.component("test", {
  template: `<div class="pre">
      <slot></slot>
  </div>`,
});

new Vue({
  el: "#app",
  data() {
    return {
      content: "Hello, <pre>world </pre> !",
    };
  },
  mounted () {
    const {content} = this;
    const str = content.replace(/pre/g, 'Test');
    const result = `<div>${str}</div>`;
    const item = Vue.component('item', {
      components: {Test},
      template: result,
    });
    const comp = new item();
    const element = comp.$mount().$el;
    this.$el.appendChild(element);
  }
});
.pre{
color: red
}
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <div id="app"></div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.