在vue里用js实现点击全屏功能

1. sreenfull插件
2. js

<template>
    <div>
        <button @click="screen">全屏</button>
    </div>
</template>
export default {
     
    data () {
     
        return {
     
            fullscreen: false
        };
    },
    methods: {
     
        // alert(4);
        screen () {
     
            let element = document.documentElement;
            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;
        }
    },
    mounted () {
     

    }
};
</script>
<style lang="less" scoped>

</style>