记一次vue-fullscreen的使用

官方中文文档

安装

使用npm命令安装

npm install vue-fullscreen

使用

引入vue-fullscreen，并使用Vue.use()注册插件，之后即可使用。

个人代码

<template>
    <div style="height: 100%;">
        <fullscreen ref="fullscreen" class="fullscreenClass" :wrap="true" @change="fullscreenChange">
            <i id="toggleBtn" :class="!fullscreen?'icon-quanping':'icon-suoxiaotuichuquanpingshouhui'" @click="toggle"/>
            <div class="fullscreenContenT">
                <header v-if="$slots.statistics">
                    <slot name="statistics"/>
                </header>
                <main>
                    <slot name="content"/>
                </main>
                <footer v-if="$slots.btnList">
                    <slot name="btnList"/>
                </footer>
            </div>
        </fullscreen>
    </div>
</template>

<script>
    export default {
        name: "fullscreen-container",
        data() {
            return {
                fullscreen: false
            }
        },
        methods: {
            toggle() {
                this.$refs['fullscreen'].toggle()
            },
            fullscreenChange(fullscreen) {
                this.fullscreen = fullscreen
            }
        }
    }
</script>