vue全屏

首先下载插件 npm install screenfull

<div @click="screenFull">
    <span v-if="isFull">退出全屏</span>
    vue2代码
    <i v-else class="el-icon-full-screen"></i>
    vue3代码
    <el-icon v-else><FullScreen /></el-icon>
</div>

<script>
import screenfull from "screenfull";
export default {
    data() {
        return {
            isFull: false, // 是否全屏
        };
    },
    methods: {
        // 监听变化
        change() {
            this.isFull = screenfull.isFullscreen;
        },
        // 切换事件
        screenFull() {
            screenfull.toggle();
        },
        KeyDown(e) {
            if (e.keyCode === 122) {
                //禁用f11
                e.returnValue = false;
                //触发全屏的按钮
                screenFull();
            }
        },
    },
    mounted() {
        screenfull.on("change", this.change);
        window.addEventListener("keydown", this.KeyDown, true);
    },
    //vue3中 onUnmounted
    beforeDistroy() {
        screenfull.off("change", this.change);
    },