vue3监听用户息屏、或者切后台运行(离开页面)

266 阅读1分钟
<script setup>
import { ref,onMounted ,watch} from 'vue'
defineProps({
  msg: String
})
var isShowOther=ref(false)
watch(isShowOther,function(newValue,oldValue){
if(oldValue==true&&newValue==false){
  console.log('欢迎回来');
}
})
onMounted(()=>{
  console.log('onMounted');
  document.addEventListener('visibilitychange',function(){
    if(document.visibilityState==='hidden'){
      isShowOther.value=true
      console.log("hidden页面不可见");
      console.log('isShowOther',isShowOther.value);
    }
    if(document.visibilityState==='visible'){
      isShowOther.value=false
      console.log("页面可见");
      console.log('isShowOther',isShowOther.value);
    }
  })
})
</script>