[Feature Request] 是否考虑添加 popup

[alomerry]

您好，请问是否会考虑添加以下类似的功能 🙏🏻

比如某个强调符号或者是超链接点击之后会有一个 popup 提示

[Mister-Hope]

You may implement a component to achieve this.

E.g.: <Popup>

Some text and <Popup>
<template #word>a word</template>
<template #popup>

## Word

Some detail information

</template>
</Popup> in a sentence

Once you finished, we welcome you to post a PR with your component to vuepress-plugin-components

[alomerry]

我尝试过这样做，但是当遇到 li、ul 时经常会提示我 [plugin:vite:vue] Element is missing end tag.，我不得不添加多个空行来拆分 li、ul 或是将整行放入 slot 中，我不知道如何更优雅的解决，不知道您有没有更合适的思路 🙏🏻。

以下是我遇到的问题

原始 markdown

- xxx
  - xxxxx need popup xxxx

自定义的组件

<template>
  <div>
    <div @click="handleToggle">
      <slot>Set your words</slot>
    </div>
    <div>
      <slot name="code">Set your code</slot>
    </div>
  </div>
</template>

失败的尝试（提示我 [plugin:vite:vue] Element is missing end tag.）

- xxx
  - xxxxx <Popup> need popup <template v-slot:popup>

```go
somecode
```

</template></Popup> xxxx

折中的尝试（监听点击事件的 nodeName 为 mark 就展示 slot popup）

- xxx

<Popup>
  
  - xxxxx ==need popup== xxxx
  
<template v-slot:popup>

```go
somecode
```

</template></Popup> 

[Mister-Hope]

The problem is that tags inside another tag is strictly allowed in browser, e.g: you can not nest <a> in <a>, <p> in <p>, and <p> in <a>.

You may need to ensure the final output template has a valid syntax.

[Mister-Hope]

Another approach is mounting the slot content somewhere else using https://vuejs.org/api/built-in-components.html#teleport, and update style to ensure it appears in the correct place.

This could be a better approach than yours.

[alomerry]

最终我还是放弃了尝试。。我发现使用了太多 components 和 slot 后，markdown 的 raw content 会变得很丑陋，难以阅读或继续更新（虽然最后页面看起来会因为 popup 看起来相对简洁）😂

[Mister-Hope]

最终我还是放弃了尝试。。我发现使用了太多 components 和 slot 后，markdown 的 raw content 会变得很丑陋，难以阅读或继续更新（虽然最后页面看起来会因为 popup 看起来相对简洁）😂

其实你可以尝试把脚注的格式改了

[Mister-Hope]

我重新思考了以下你这个问题，footnote真的不能解决么？就你自己写一个setup函数去修改样式吧footnote渲染到你引用的链接附近？

[alomerry]

我试试看 💪

[alomerry]

试了一下，可以解决，我粗糙的试了一下，遇到了一些问题：

• 列表（li）最后一项无法 popup
• 第一次进入页面可能还是会渲染正常的 footnote，需要刷新一次才会变成 popup
• 使用 markdown-enhance 的导入功能（<!-- @include: filename -->）时偶尔底部有空白（感觉是我自己 css 写的有问题）
• 如果在 h 标签上设置 footnote 后，popup 出来的内容字体大小和 h 标签一致了（感觉也是我 css 没写好）
• 自己渲染 footnote 后原生的 footnote 等于就用不了，如果同时有两个的需求就不知道咋办了

just FYI

另感谢大佬指点 ❤️ 我再去改改