在vue中如何实现点击变成全屏及缩放-阿里云开发者社区

在vue中如何实现点击变成全屏及缩放

2021-12-31 318

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在vue中如何实现点击变成全屏及缩放

项目中有点击按钮实现全屏功能

方式一：js实现全屏

<template>
  <div>
      <a-button type="primary" @click="screen">全屏</a-button>
  </div>
</template>

data：

 data() {
    return {
      fullscreen: false
    };
  },

methods：

 screen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },

方式二：使用的是sreenfull插件，执行命令安装

npm install --save screenfull

在使用的页面正确引入：

import screenfull from ‘screenfull’

代码如下：

<template>
     <div>
         <a-button type="primary" @click="screen">全屏</a-button>
     <div>
</template>

data:

 data() {
    return {
      fullscreen: false
    };
  },

methods：

screen() {
      // 如果不允许进入全屏，发出不允许提示
      if (!screenfull.enabled) {
        this.$message("您的浏览器不能全屏");
        return false;
      }
      screenfull.toggle();
      this.$message.success("全屏啦");
    },