在 mouseleave 上打开 Vuetify v-dialog答案

【问题标题】：Open Vuetify v-dialog on mouseleave在 mouseleave 上打开 Vuetify v-dialog
【发布时间】：2020-12-11 14:53:30
【问题描述】：

我想在用户离开窗口时打开一个 v-dialog。

我已经实现了：

<v-dialog v-model="showPopinAlert">
<v-card>alert</v-card>
</v-dialog>

在脚本中，我在 mount() 中有事件：

data () {
    return {
      showPopinAlert : false
    }
  },
mounted () {
    document.body.addEventListener('mouseleave', function (event) {
      if (event.clientY <= 0 || event.clientX <= 0 || (event.clientX >= window.innerWidth || event.clientY >= window.innerHeight)) {
        this.showPopinAlert = true
        console.log('leaving')       
      }
    })
  },

当光标离开正文时，我在控制台中有跟踪，但没有显示 v-dialog。我尝试使用 :key 或 v-if 强制刷新，但它不会改变任何内容

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

您需要使用arrow function 来保留this 上下文：

document.body.addEventListener('mouseleave', (event) => {
  if (event.clientY <= 0 || event.clientX <= 0 || (event.clientX >= window.innerWidth || event.clientY >= window.innerHeight)) {
    this.showPopinAlert = true
    console.log('leaving')       
  }
})

否则回调函数会注入自己的this

【讨论】：