javascript - 在 Vue.js 中使用 @mouseover ='' 时，我可以将悬停在其上的元素作为参数传递给我的函数吗？

Question

我正在尝试完成以下任务 - 我有一个带有 alt 标签的图像元素，其中包含字符串 TEST。我试图做到这一点，以便当用户将鼠标悬停在该图像上时，他会在图像下方获得一个绝对定位的框，其中包含图像 alt 标签内的内容。虽然我不完全确定如何做到这一点，但我已经开始尝试一些可能有效或无效的方法。

现在我的想法是这样的 - 在 @mouseover 事件中，我将把悬停的元素作为参数传递给函数，该函数将获取图像标签的尺寸，创建一个元素并定位它在图像元素下方使用position:absolute;

问题是我不确定是否真的可以使用 @mouseover 作为函数的参数传递我悬停的特定元素。

我也很好奇这是否是完成我想做的事情的好方法，或者是否有更好的方法。我愿意接受建议。感谢您的阅读。

模板

<img @mouseover='displayAlt(element)' src="#" alt="TEST">

脚本

methods: {
    displayAlt(element){
        let alt = element.alt
        // Rest of the stuff will go here
    }
}

Answer 1

尝试以下操作将事件对象隐式传递给方法。 alt 可以在事件对象的 target 属性上找到:

<img @mouseover='displayAlt' src="#" alt="TEST" />

methods: {
    displayAlt(e){
        let alt = e.target.alt
        // Rest of the stuff will go here
    }
}

这是一个example行动中。

否则，您可以使用特殊变量$event显式传递事件对象。来自 Vue.js - Event Handling文档:

Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special $event variable

<img @mouseover='displayAlt($event)' src="#" alt="TEST" />