如何检查用户是否在 vue 组件内处于全屏模式？

Question

我有一个 vue 组件，我想跟踪用户何时将浏览器更改为全屏或退出全屏。我尝试在安装组件时添加事件侦听器，但是当我尝试进入全屏或 return 进入窗口模式时，这些事件永远不会被调用。控制台中未显示任何错误。组件本身不是全屏的。我有一个 laravel blade 页面运行并且此代码位于其中显示的 vue 组件之一内。

这是 Vue 组件中的代码：

<script>
    export default {
        mounted() {
            document.addEventListener('fullscreenchange',this.logFullScreen);
            console.log("Mounted");
        },
        methods: {
            currentDatetime: function () {
                var today = new Date();
                var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
                var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
                return date+' '+time;
            },
            logFullScreen: function () {
                if(document.fullscreenElement)
                {
                    console.log("Changed to fullscreen at "+this.currentDatetime);
                }
                else
                {
                    console.log("Exited fullscreen at "+this.currentDatetime);
                }
            }
        },
        destroyed() {
            document.removeEventListener('fullscreenchange',this.logFullScreen);
        }
    }
</script>

Answer 1

当您通过单击 F11 进入全屏时。事件'fullscreenchange'不会被触发。

调用全屏请求时会触发 fullscreenchange 事件。

你可以试试这个：

$(document).on('keydown', function(event) {
    if (event.which == 122) {
        // check if fullscreen or not ...
    }
});

抱歉我的英语不好

如何检查用户是否在 vue 组件内处于全屏模式？

How to check if user is in fullscreen mode inside a vue component?

event-handling

vue.js

fullscreenchange

vue-component

vuejs2