Vue.JS

Question

需要从锚标记触发一个方法，该方法将显示（或隐藏）具有动态内容的工具提示。

我需要在正确的方向上推动如何完成这项工作。

我的第一个工具提示使用了一个工具提示触发器，它又触发了实际的工具提示。这非常有效。问题是这需要集成到 CMS 中，用户只能添加锚标记而不是 Vue.js 组件。

我已经设置了获取一些信息的方法，但我似乎无法弄清楚该方法将如何加载锚标记旁边的组件

这是我目前拥有的：

<a  href="#" 
    class="tooltipTriggerMarkup"
    @click="fireTooltip('reference','Hallo dit is een titel','body')">
    Tooltip trigger
</a>

这是我以前拥有的（点击链接）

https://jsfiddle.net/AmmarAon/zwnv1oge/337/

<tooltipTrigger 
    :transition="'bounce'" 
    :reference="'tooltip1'"
    :tooltip-title="'This is the first tooltip!'" 
    :tooltip-body="'Lorem ipsum dolor sit amet, consectetur adipiscing elit'">
    Tooltip trigger
</tooltipTrigger>

所以基本上它需要以相同的方式工作，但使用锚标记而不是组件

我很想知道我是否需要从头开始构建这个想法，或者这段代码是否仍然可以挽救（以及如何挽救）。

Answer 1

我修好了。使用锚标记，我可以调用隐藏和显示组件的方法。该组件基本上是一个位于主组件中的 div 。请在此处查看示例：

方法调用：

<a href="#" 
   class="tooltipTriggerMarkup"
   @click="fireTooltip('t2',
                       'Dit is de 2e tooltip',
                       'body body body')">commodo</a>

方法：

fireTooltip(reference,title,body) {
            this.showToolTip=!this.showToolTip;
            this.tooltipTitle = title;
            this.tooltipBody = body;
            this.reference = reference;
        }

https://jsfiddle.net/AmmarAon/9gLerv0b/173/

由于该方法，工具提示可以加载动态内容。它还将工具提示放在锚标记下方，并检查工具提示是否超出 window.

的范围

Vue.JS - 有没有办法通过方法触发我的工具提示组件

Vue.JS - Is there a way to fire my tooltip component via a method

javascript

tooltip

vue-component