Bootstrap

全屏 插件 screenfull

https://sindresorhus.com/screenfull.js/

第一步:安装:

在命令行中执行:npm install --save 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(){
                if (!screenfull.enabled) { // 如果不允许进入全屏,发出不允许提示
                this.$message({
                  message: '不支持全屏',
                  type: 'warning'
                })
                return false
             }
              screenfull.toggle()
              this.$message({
                  message: '全屏啦',
                  type: 'success'
                })
            }
        }
    }
</script>
 

;