记一次vue-fullscreen的使用

最新推荐文章于 2025-09-27 21:51:02 发布

原创最新推荐文章于 2025-09-27 21:51:02 发布 · 8.4k 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用npm安装Vue-fullscreen插件，并通过示例代码展示如何在Vue项目中注册和使用该插件实现页面全屏功能。

官方中文文档

安装

使用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>