全网最详细的vue2 全屏与退出全屏

发布时间:2023年12月25日

一、文章引导

全网最详细的vue2 全屏与退出全屏
template
script

二、博主简介

🌏博客首页: 水香木鱼
📑文章摘要:vue2 ?全屏与退出全屏
💌春波寄语:故木秀于林,风必摧之;堆出于岸,流必湍之;行高于人,众必非之。


三、文章内容

(1)、script

 data() {
    return {
       isFullscreen: false,//全屏状态
    }
},
methods: {
    /*全屏*/
    toFullOrExit() {
      this.isFullscreen = !this.isFullscreen;
      if (this.isFullscreen) {
        this.requestFullScreen();
      } else {
        this.exitFullscreen();
      }
    },

    requestFullScreen() {
      let de = document.documentElement;
      if (de.requestFullscreen) {
        de.requestFullscreen();
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
      }
    },
    exitFullscreen() {
      let de = document;
      if (de.exitFullscreen) {
        de.exitFullscreen();
      } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
      } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
      }
    },
    /*END*/
}

(2)、template

关于svg如何使用,请参考:全网最详细的vue2引入svg详细步骤

 <el-tooltip
   class="item"
   effect="dark"
   :content="isFullscreen ? '退出全屏' : '全屏'"
   placement="left">
     <a
       href="javascript:void(0)"
       title="全屏"
       class="toolbar_item back2top"
       @click="toFullOrExit">
         <svg-icon icon-class="quxiaoquanping" width="20px" height="20px" class="shapeHand" v-if="isFullscreen"></svg-icon>
         <svg-icon icon-class="quanping" width="20px" height="20px" class="shapeHand" v-else></svg-icon>
     </a>
</el-tooltip>

四、程序语录

程序员爱情观:爱情就像死循环,一旦执行就陷进去了!

本篇博客文章模板唯一版权归属?春波petal

文章来源:https://blog.csdn.net/weixin_48337566/article/details/135204861
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。