Добавление функциональности (javascript?) К простому тегу html в Vue и / или Tiptap?
Как преобразовать относительно простой тег для работы с Javascript или рендеринга более сложного HTML? Вот пример того, чего я пытаюсь достичь:
В этом Vue.js SPA есть редактор форматированного текста (я экспериментирую с Tiptap), позволяющий пользователям писать небольшие фрагменты форматированного текста. В редакторе есть дополнительная кнопка, с помощью которой можно пометить фрагмент текста и применить к нему тег, чтобы отметить его как страну (аналогично выделению чего-то полужирного, только это отмечает его как страну). Что-то вроде этого:
Lorem ipsum at <span data-country-id="42">Denmark</span>.
У меня есть полный контроль над тем, как этот тег будет выглядеть, но я хочу, чтобы он был коротким и независимым от внешнего интерфейса (поэтому, скорее, там нет javascript).
Требуется разрешить этому диапазону onclick / onmouseover либо v-overlay или v-tooltip. Таким образом, при его активации появляется всплывающая подсказка / всплывающая подсказка с дополнительной информацией о Дании. Я также мог представить, что направлю его на страницу о Дании. Все это зависит от того, где отображается контент, поэтому вы понимаете, что он должен быть независимым.
Если бы я мог вызвать функцию javascript, я бы смог открытьv-overlay или позвоните this.$router.push. Я думаю, что это также может позволить использовать v-tooltip через активатор.
Я уже приходил в голову с этими подходами, но, возможно, я здесь далеко.
- Возможность каким-то образом вызывать javascript.
- Данные будут отображаться на экране с помощью редактора Tiptap. Может, там есть возможности?
- ...?
Обновить; Думаю, я нашел решение. Насколько это хорошо / плохо?:
"Форматированный текст" отображается при нажатии на строку в таблице. Выбранная строка сохраняется вselected. Вот где мы его визуализируем:
<div ref="mycontent" v-html="selected.description_html" @click="handleClick"></div>
В description_htmlсодержит диапазон, упомянутый в вопросе. Функция handleClick проверяет, был ли нажат элемент с data-country-id, и если да, то устанавливает глобальную переменную и открывает оверлей.
handleClick(e) {
if (e.target.matches('[data-country-id]')) {
this.country_id = e.srcElement.attributes.getNamedItem("data-country-id").value
console.log(this.country_id)
this.olyCountry = true
}
},
Аналогичный метод может работать и при наведении курсора мыши. - Мне действительно интересно, нужно ли мне в какой-то момент удалить eventListener? На основе вдохновения: Vue: привязать событие клика к динамически вставляемому контенту.