vue全屏部分元素

拼搏现实的明天。 2022-04-10 01:51 263阅读 0赞

直接上代码：

export default {
            data() {
                return {
                    fullscreen:false,
                }
            },
    
            methods: {
                // 全屏事件
                handleFullScreen(){
                    let element = document.getElementById("fullscreen");
                    if (this.fullscreen) {
                        if (document.exitFullscreen) {
                            document.exitFullscreen();
                        } else if (document.webkitCancelFullScreen) {
                            document.webkitCancelFullScreen();
                        } else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen();
                        } else if (document.msExitFullscreen) {
                            document.msExitFullscreen();
                        }
                    } else {
                        if (element.requestFullscreen) {
                            element.requestFullscreen();
                        } else if (element.webkitRequestFullScreen) {
                            element.webkitRequestFullScreen();
                        } else if (element.mozRequestFullScreen) {
                            element.mozRequestFullScreen();
                        } else if (element.msRequestFullscreen) {
                            // IE11
                            element.msRequestFullscreen();
                        }
                    }
                    this.fullscreen = !this.fullscreen;
                },
                showTip() {
                    if (this.tip) {
                        this.tip = false;
                        this.$refs.tipBtnGroup.style="position: absolute;right:33px;top:16px;width:10px;z-index: 1";
                        // this.$refs.chevron.icon='chevron-left';
                    } else {
                        this.tip = true;
                        this.$refs.tipBtnGroup.style="position: absolute;right:292px;top:16px;width:10px;z-index: 1";
                        // this.$refs.chevron.icon='chevron-right';
                    }
                }
            },
        }