vue中全屏screenfull.js的使用

龚运乾
2023-12-01

vue中全屏screenfull.js的使用

安装screenfull

1.使用npm安装 screenfull
npm install screenfull --save

使用方式

  1. 在使用的页面正确引入
    import screenfull from ‘screenfull’

  2.   data(){
         return {
     		 //默认不全屏
             isFullscreen: false
         } 
      },
    
  3. 增加点击全屏的方法, 这里使用 elementui下的msg进行提示

     click(){
         // 如果不允许进入全屏,发出不允许提示 浏览器不能全屏
         if(!screenfull.enabled){
             this.$message({
                 message:'浏览器不能全屏',
                 type:'warning'
             })
             return false
         }
       	screenfull.toggle()
        this.$message({
             message: '全屏啦',
             type: 'success'
         })
     }
    
 类似资料: