Как проверить, находится ли пользователь в полноэкранном режиме внутри компонента vue?

Question

У меня есть компонент vue, и я хотел отслеживать, когда пользователь меняет браузер на полноэкранный или выходит из полноэкранного режима. Я попытался добавить прослушиватели событий, когда компонент смонтирован, но эти события никогда не вызываются, когда я пытаюсь перейти в полноэкранный режим или вернуться в оконный режим. Ошибки в консоли не отображаются. Сам компонент не полноэкранный. У меня запущена блейд-страница laravel, и этот код находится внутри одного из отображаемых там компонентов 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 ...
    }
});

Извините за мой плохой английский