settle_down_web/src/components/Screenfull/index.vue

<template>
    <div class="screenBox">
        <!-- <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" /> -->
        <img src="./screen.svg" alt="" @click="click" class="fullscreen" />
    </div>
</template>

<script>
import screenfull from "screenfull";

export default {
    name: "Screenfull",
    data() {
        return {
            isFullscreen: false
        };
    },
    mounted() {
        this.init();
    },
    beforeDestroy() {
        this.destroy();
    },
    methods: {
        click() {
            if (!screenfull.enabled) {
                this.$message({
                    message: "you browser can not work",
                    type: "warning"
                });
                return false;
            }
            screenfull.toggle();
        },
        change() {
            this.isFullscreen = screenfull.isFullscreen;
        },
        init() {
            if (screenfull.enabled) {
                screenfull.on("change", this.change);
            }
        },
        destroy() {
            if (screenfull.enabled) {
                screenfull.off("change", this.change);
            }
        }
    }
};
</script>

<style scoped>
.screenfull-svg {
    display: inline-block;
    cursor: pointer;
    fill: #5a5e66;
    width: 20px;
    height: 20px;
    vertical-align: 10px;
}
.screenBox {
    display: flex;
    align-items: center;
}
</style>