vue网页点关闭的时候弹个窗
时间: 2023-10-29 07:02:53 浏览: 204
可以使用Vue的生命周期钩子函数来实现网页点关闭时弹出窗口的功能。
首先,在Vue组件中声明一个data属性来控制窗口是否显示,例如:
```
data() {
return {
showAlert: false
}
}
```
然后,可以在Vue的`beforeUnload`事件中监听页面即将关闭的事件,并将`showAlert`属性设置为true,弹出窗口:
```
mounted() {
window.addEventListener('beforeunload', this.handleBeforeUnload)
},
beforeDestroy() {
window.removeEventListener('beforeunload', this.handleBeforeUnload)
},
methods: {
handleBeforeUnload() {
this.showAlert = true
}
}
```
最后,在模板中使用`v-if`指令来根据`showAlert`属性的值来判断是否显示弹出窗口:
```
<div v-if="showAlert" class="alert">
确定关闭页面吗?
</div>
```
以上就是使用Vue实现网页点关闭时弹出窗口的简单示例。当用户尝试关闭页面时,会触发`beforeUnload`事件,从而弹出窗口询问用户是否确定关闭页面。
阅读全文