1

如何将相对简单的标签转换为 Javascript 或渲染更复杂的 html？这是我尝试完成的示例：

在这个 Vue.js SPA 中，有一个富文本编辑器（我正在尝试使用 Tiptap），使用户能够编写小块富文本。编辑器有一个额外的按钮，可以标记一段文本并对其应用标签以将其标记为国家（类似于标记粗体，只是将其标记为国家）。像这样的东西：

Lorem ipsum at <span data-country-id="42">Denmark</span>.

我可以完全控制该标签的外观，但我希望它保持简短且与前端无关（所以那里没有 javascript）。

必需是允许此跨度 onclick/onmouseover 到 av-overlay或 a v-tooltip。因此，通过激活它，会弹出一个覆盖/工具提示，其中包含有关丹麦的更多信息。我也可以想象我会将它路由到丹麦的页面。所有这些都取决于内容的显示位置，因此您会看到它必须是不可知的。

如果我能够调用 javascript 函数，我将能够打开 av-overlay或调用this.$router.push. 我认为这也可能通过激活器允许 v-tooltips。

我已经想到了这些方法，但我可能离这里很远。

  • 能够以某种方式调用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：将点击事件绑定到动态插入的内容

4

0 回答 0