vue点击按钮让页面的某一个元素全屏展示

一羊迁徙

于 2020-07-08 17:23:50 发布

阅读量1.4k

点赞数

分类专栏： vue 文章标签： vue javascript js

本文链接：https://blog.youkuaiyun.com/weixin_43242112/article/details/107210708

版权

vue 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用Vue和screenfull插件实现地图div的全屏功能。通过在页面加载时添加监听，当点击全屏图标时，可以使得包含地图的div元素进入全屏模式，适用于需要展示大尺寸地图的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、先上效果图

项目情况：vue+screenfull插件
其实文档上写的很清楚：screenfull文档
点击页面的全屏图标，使包裹地图的div实现全屏。
在这里插入图片描述

二、页面结构

在这里插入图片描述

三、在页面加载时添加监听

 mounted () {
        const element = document.getElementById('map_container');
        document.getElementById('full_screen').addEventListener('click', () => {
            if (screenfull.isEnabled) {
                screenfull.request(element);
            }
        });
    },