У меня есть компонент 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)
}
}