vue---网页全屏

最新推荐文章于 2023-12-20 10:00:00 发布

Humor_L

最新推荐文章于 2023-12-20 10:00:00 发布

阅读量342

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Humor_L/article/details/128609099

版权

使用screenfull插件

安装：npm install --save screenfull

导入：import screenfull from "screenfull"

首页：一定要有一个ref绑定，这里用ref=‘shcontainer’ 绑定

<template>
  <div id="zonghebox" ref='shcontainer'>
    //这里写页面代码
  </div>
</template>

这儿是点击按钮以及方法

<el-button @click='getFullCreeen' circle>
    <i class='el-icon-rank' style='color: #ffffff'></i>
</el-button>

data中 定义：
fullscreen: true,
num1: 0,
num2: 0,

//监听
watch: {
    fullscreen () {
      this.num1++
      this.num2++
    }
  },

//方法
getFullCreeen(){
      let me = this;
      if (!screenfull.enabled) {
        me.$message('您的浏览器不能全屏')
        return false
      }
      me.fullscreen = screenfull.isFullscreen//布尔值——当前页面是否全屏
      screenfull.toggle(me.$refs.shcontainer)//指定元素全屏
 },