Vue组件设计-全屏显示

越陌度阡

发布于 2023-05-03 09:31:07

9470

发布于 2023-05-03 09:31:07

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

在后台管理系统中基本都会有全屏显示功能，常见于右上角的用户信息旁边，方便在小屏下使用系统。

1. 安装依赖

npm install --save screenfull@4.2.0

建议安装5以下的版本，全屏插件的版本过高可能会导致无法正常全屏。

2. 封装组件

<template>
    <div>
        <svg-icon
            @click="click"
            style="font-size: 14px"
            :icon-class="isFullscreen ? 'exit-fullscreen' : '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: "你的浏览器无法正常工作",
                    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;
}
</style>

3. 使用组件

<template>
    <div>
        <Screenfull></Screenfull>
    </div>
</template>

<script>

import Screenfull from "@/components/Screenfull";

export default {
    components:{
        Screenfull:Screenfull,
    }
};
</script>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-04-28，如有侵权请联系 cloudcommunity@tencent.com 删除

工作