Question

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

现在我的想法是-在@mouseover事件上，我将把悬停的元素作为参数传递给函数，该函数将获取图像标签的尺寸，创建一个元素并将其放置在图像元素下方使用位置：绝对；

问题是，我不确定我是否真的可以使用@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文档：

有时我们还需要内联访问原始DOM事件语句处理程序。您可以使用特殊方法将其传递给方法 $ event变量

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

希望有帮助

在Vue.js中使用@ mouseover =''时，是否可以将要悬停的元素作为函数的参数传递？

1 个答案: