当前位置: 首页 > 工具软件 > Visibility.js > 使用案例 >

vue中使用vue-visibility-change监听浏览器页面之间的切换

拓拔富
2023-12-01

需求:

A、B两个页面,从A页面切换到B页面,在B页面做完操作再切换回A页面,A页面需要执行相关的操作

A ---> B(一些操作) ---> A(执行某些操作)

解决方案:

使用vue-visibility-change

下载:

$ npm i vue-visibility-change -S

导入:

main.js:

import visibility from 'vue-visibility-change';
Vue.use(visibility);

使用:

全局使用:

main.js

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('回到当前页了!')
        }
    },
}

 

 

 

 

 

 类似资料: