vue全屏方法

最新推荐文章于 2024-08-18 23:55:13 发布

Wether or not

最新推荐文章于 2024-08-18 23:55:13 发布

阅读量1.7k

点赞数

分类专栏： vue JavaScript 文章标签： css vue.js html

本文链接：https://blog.csdn.net/wehter/article/details/120653768

版权

vue 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用JavaScript实现页面的全屏与退出全屏功能。通过点击带有地图工具栏图标的元素，切换全屏状态。`launchFullScreen()`方法根据当前`fullscreen`变量的值来调用相应的全屏或退出全屏API。

摘要由CSDN通过智能技术生成

// css
<li :class="['map-toolbar-item',!fullscreen?'':'active']" @click="launchFullScreen()">
      <i :class="['map-toolbar-icon', 'iconfont', 'iconfangda']"></i>

      <span class="map-toolbar-label">{{ !fullscreen?'全屏':'退出全屏' }}</span>
</li>

// script
data(){
	return{
		fullscreen: false,
	}
}
methods: {
    //开启全屏
    launchFullScreen() {
      this.fullscreen = !this.fullscreen;
      let element = document.documentElement;
      if (this.fullscreen) {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozExitFullScreen) {
          document.mozExitFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
    },