Javascript Vue范围：如何延迟处理@mouseover

因此，我只想在用户将鼠标放在div上至少1秒的情况下进行操作。内部模板：

<div @mouseover="trigger"></div>

---

我的问题是我不了解Vue的范围。因为this.hovered在另一个函数中，所以它找不到实际的hovered数据变量。解决这个问题的方法是什么？

您是否尝试过在

设置超时中使用箭头功能？它将维护此

data() {
    return {
        hovered: false
    }
}

methods: {
    trigger() {
        setTimeout(() => { this.hovered = true }, 1000)
    }
}

---

我一直在解决这个问题，仅当用户停留一段时间时才选择列表中的项目（以防止菜单闪烁）

模板（pug）：

数据：

hovered: false
selectedId: ""

以及方法

select(identifier) {
    this.selectedId = identifier
    setTimeout(() => {
        if(this.selectedId === identifier )
            this.hovered = true
        },
        1000
    )
},
clear() {
    this.selectedId = ''
}

方法是检查用户在上面悬停的内容是否与前一秒悬停的内容相同

eventos
<div @mouseover="activarOver" @mouseleave="resetOver "> eventos </div>



data: () => {
    return {
      countMouseOver: 0
    }
  },
methods: {
    activarOver () {
      this.countMouseOver++
      if (this.countMouseOver < 2) {
        this.setMostrarPopup()
      }
      console.log(this.countMouseOver)
    },
    resetOver () {
      this.countMouseOver = 0
      console.log('reset')
    },
}

数据：（）=>{
返回{
countMouseOver:0
}
},
方法：{
activarOver（）{
这是我的鼠标++
if（this.countMouseOver<2）{
this.setMostrarPopup（）
}
console.log（this.countMouseOver）
},
重置（）{
this.countMouseOver=0
console.log（'reset'）
},
}

如果要使用旧语法，请将“this”绑定到setTimeout函数

data() {
    return {
        hovered: false
    }
}

methods: {
    trigger() {
        setTimeout(function(){ this.hovered = true }.bind(this), 1000)
    }
}

---

实现在悬停1秒时显示，然后在不再悬停时消失

<span @mouseover="hover" @mouseleave="unhover">Hover over me!</span>
<div v-if="show">...</div>

data() {
   return {
      show: false;
      hovering: false,
   };
},
methods: {
    hover() {
       this.hovering = true;
       setTimeout(() => this.show = this.hovering, 1000);
    },
    unhover() {
       this.hovering = false;
       this.show = false;
    },
}

悬停在我身上！
...
数据（）{
返回{
显示：假；
悬停：错，
};
},
方法：{
悬停（）{
this.hovering=true；
setTimeout（（）=>this.show=this.hovering，1000）；
},
unhover（）{
this.hovering=false；
this.show=false；
},
}

此

指的是设置超时功能<代码>var self=此before setTimeout将通过

self

变量访问嵌套函数中的vue。请注意，这不会解决您的总体问题。当用户将鼠标悬停在div上时，setTimout将始终执行。您需要测量在按钮上花费的时间，并在onmouseout事件发生时取消。可能重复“是”，谢谢@Bert！非常感谢，成功了！多亏了伯特，我学会了如何使用它。这并不能验证元素在1秒结束时是否仍处于悬停状态。

data() {
    return {
        hovered: false
    }
}

methods: {
    trigger() {
        setTimeout(function(){ this.hovered = true }.bind(this), 1000)
    }
}

<span @mouseover="hover" @mouseleave="unhover">Hover over me!</span>
<div v-if="show">...</div>

data() {
   return {
      show: false;
      hovering: false,
   };
},
methods: {
    hover() {
       this.hovering = true;
       setTimeout(() => this.show = this.hovering, 1000);
    },
    unhover() {
       this.hovering = false;
       this.show = false;
    },
}