//vuejs中使用vue-visibility-change全局(局部)监听浏览器页面之间的切换
1、下载vue-visibility-change
npm i vue-visibility-change -S
2、在main.js导入:
import visibility from 'vue-visibility-change';
Vue.use(visibility);
//全局使用
visibility.change((evt, hidden) => {
console.log('global callback: ' + hidden);
});
//如果是局部直接写道页面里(index.vue)
<template>
<div v-visibility-change="change">
...
</div>
</template>
methods:{
change(evt, hidden) {
//hidden为false的时候,表示从别的页面切换回当前页面
//hidden为true的时候,表示从当前页面切换到别的页面
if(hidden === false){
console.log('回到当前页了!')
}
},
}
以上是编程学习网小编为您介绍的“vuejs中使用vue-visibility-change全局(局部)监听浏览器”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:vuejs中使用vue-visibility-change全局(局部)监听浏览器
猜你喜欢
- uniapp组件之tab选项卡滑动切换功能实现 2024-02-22
- layui数据表格使用(一:基础篇,数据展示、分页组件、表格内嵌表单和图片) 2022-12-13
- 浅谈Emergence.js 检测元素可见性的 js 插件 2024-02-24
- CSS清除浮动方法汇总 2022-11-13
- vue常用组件之confirm用法及说明 2024-03-09
- 详解CSS样式中的!important、*、_符号 2022-11-13
- input file上传文件样式支持html5的浏览器解决方案 2024-01-03
- Uncaught SyntaxError: Unexpected identifier错误排查办法 2023-07-09
- 纯javascript前端实现base64图片下载(兼容IE10+) 2024-01-17
- 【vue】三种获取input值的写法 2023-10-08