vue在pc端一行代码实现 全屏功能

1.项目中使用的是sreenfull插件，执行命令安装

第一步：安装：

在命令行中执行：（注：因为这是生产依赖，所以执行--save）

npm install screenfull  --save

 

第二步：直接上代码：

<template>
    <el-button type="primary" class="button" @click="buttoncli">摁我全屏</el-button>
</template>

 

<script>
    import screenfull from 'screenfull'
//    全屏功能使用:1.安装,npm install --save screenfull
//             2.引入
//             3.点击时判断浏览器是否可全屏,不可全屏给提示,可全屏执行screenfull.toggle()
    export default{
        data(){
            return{
                isFullscreen: false
            }
        },
        methods:{
            buttoncli(){
                // 需要注意的是 如果判断!screenfull.enabled 显示的是不支持全屏的话 是因为谷歌的版本问题  判断改为 !screenfull.isEnabled  就可以了
               
                if (!screenfull.enabled) { // 如果不允许进入全屏，发出不允许提示
                this.$message({
                  message: '不支持全屏',
                  type: 'warning'
                })
                return false
             }
              screenfull.toggle()
              this.$message({
                  message: '全屏啦',
                  type: 'success'
                })
            }
        }
    }
</script>

这样就大功告成了！
--------------------- 
原文：https://blog.csdn.net/qq_39009348/article/details/81144121