Vue2: заменить содержимое слота скомпилированным компонентом на основе регулярных выражений? - PullRequest
0 голосов
/ 17 апреля 2019

У меня есть компонент Tooltip, который добавляет некоторые дополнительные функции.

Я хочу определить компонент-оболочку ApplyTooltips, который имеет значение по умолчанию slot и заменяет все экземпляры [[<any text here>]] на <Tooltip text="<any text here>"/> (например, очень похоже на анализатор Markdown)

Я основываю свой подход на этой скрипке: https://jsfiddle.net/Herteby/pL13vda2/

template

<template>
  <div>
    <div class="tooltip-wrapper">
      <slot>
      </slot>
      <template v-for="node, n in parsed">
       <a v-if="n % 2">{{node}}</a>
       <template v-else>{{node}}</template>
     </template>
    </div>
  </div>
</template>

script

export default {
  name: 'ApplyTooltips',
  data: () => ({
    el: null,
  }),
  computed: {
    text() {
      return this.el ? this.el.innerHTML : ''
      // return this.$slots.default[0].text
    },
    re() {
      return /\[\[(.+?)\]\]/gi // captures [[words]]
    },
    parsed() {
      return this.text.split(this.re) // every other value in this list will be a captured pattern
    }
  },
  mounted() {
    this.el = this.$el
    // console.log(this.$slots.default[0].elm)
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...