ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-07-30 14:58:06  阅读:267  来源: 互联网

标签:vue visibility 切换 hidden change 页面


需求:

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

标签:vue,visibility,切换,hidden,change,页面
来源: https://blog.csdn.net/ManArs/article/details/119247480

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有