大屏幕-全屏、退出全屏

<Button type="primary" @click="screenfullToggle">
	{{isFullScreen ? "退出全屏" : "全屏展示"}}
</Button>
import { mapState } from "vuex";
import { screenFullMixins } from "./extend/mixins/screenFull";
methods: {
  mixins: [screenFullMixins],
  computed: {
    ...mapState("main", ["isFullScreen"]),
  },
}

screenFull.js

/**
 * 监听全屏状态统一mixins
 */
import screenfull from "screenfull";
import { mapMutations } from "vuex";
export const screenFullMixins = {
    data() {
        return {
        };
    },
    mounted() {
        screenfull.on("change", this.__toggleFullScreen);
        document.addEventListener("keydown", this.__overWriteEvent);
    },
    beforeDestroy() {
        screenfull.off("change", this.__toggleFullScreen);
        document.removeEventListener("keydown", this.__overWriteEvent);
    },
    methods: {
        ...mapMutations("main", ["setFullScreen"]),

        /**
         * 全屏切换事件监听
         */
        __toggleFullScreen() {
            this.setFullScreen(screenfull.isFullscreen);
        },

        /**
         * F11事件重写监听
         */
        __overWriteEvent(e) {
            if (e.keyCode == 122 && screenfull.enabled) {
                e.preventDefault();
                screenfull.toggle();
            }
        },

        /**
        * 全屏事件
         */
        screenfullToggle() {
            if (!screenfull.enabled) {
                this.$Message.warning("当前浏览器不支持按键全屏！请按F11");
                return false;
            }
            screenfull.toggle();
        },
    }
};