vue页面监听是否置为后台或可见状态

使用场景

1. 微信公众号网页中使用了弹幕，当微信在后台时，停止弹幕程序的执行
2. 页面有定时任务执行时，除了退出页面要停止外，当页面在后台时，也可以清除定时任务，当可见时，再重新启动

推荐插件

vue-visibility-change

使用方式

安装

npm i vue-visibility-change

全局使用

import Vue from 'vue'
import visibility from 'vue-visibility-change'

Vue.use(visibility)

const listenPageVisible = visibility.change((evt, hidden) => {
  console.log('隐藏: ' + hidden)
})

局部使用

<template>
  <div v-visibility-change="listenVisible"></div>
</template>
<script>
export default {
  methods: {
    listenVisible(evt, hidden) {
      console.log('隐藏: ' + hidden)
    }
  }
}
</script>