超简单，一键大屏，待优化方案

最新推荐文章于 2024-09-24 10:50:41 发布

m0_73512680

最新推荐文章于 2024-09-24 10:50:41 发布

阅读量46

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_73512680/article/details/126632253

版权

这篇博客介绍了如何使用`screenfull`库在网页中实现全屏功能。通过`npm install --save screenfull`安装依赖，并在页面中引入。在数据部分声明全屏状态变量，然后在方法中调用`screenfull.toggle()`实现全屏切换，并提供了浏览器不支持全屏时的提示优化。成功全屏后，会显示成功的提示消息。

摘要由CSDN通过智能技术生成

下载插件

npm install --save screenfull

引入依赖

import screenfull from 'screenfull'

页面中声明变量


data(){
    return{
        fullscreen:false
    }
}

页面中调用方法


screen(){
    //如果不允许进入全屏，发送不允许提示(为了优化)
    //if(!screenfull.enabled){
    //proxy.$message('你的浏览器不能全屏')
    //return false;
    //}
    screenfull.toggle();
    proxy.$message.success("全屏啦");
}