欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue element-ui導航實現(xiàn)全屏/取消全屏功能

 更新時間：2024年08月28日 08:44:43   作者：IT博客技術分享  
這篇文章主要介紹了vue element-ui導航實現(xiàn)全屏/取消全屏功能,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

element-ui導航實現(xiàn)全屏/取消全屏功能

先上效果圖

html部分代碼：

      <!-- 全屏 -->
      <span class="user" @click="toggleFullScreen">
        <el-tooltip class="item" effect="dark" :content="isFullScreen ? '退出全屏':'全屏'" placement="bottom">
          <i :class="isFullScreen ? 'el-icon-aim':'el-icon-full-screen'" 
          style="width: 1.6rem;height: 1.6rem;vertical-align:middle;margin-right: .6rem;margin-bottom: .5rem;font-size:2rem"></i>
        </el-tooltip>
      </span>

data()定義部分：

  return{
      isFullScreen: false, //全屏開關
  }

js方法：

//全屏設置
      toggleFullScreen () {
        if (this.canFullScreen) {
          if (this.isFullScreen) {
            // 關閉全屏
            this.exitFullScreen()
            this.isFullScreen = false
          } else {
            // 打開全屏
            this.requestFullScreen(document.body)
            this.isFullScreen = true
          }
        } else {
          this.$message.warning({
            content: '當前瀏覽器暫不支持全屏模式，請切換瀏覽器后重新嘗試！',
            duration: 3
          })
        }
      },
      requestFullScreen (element) {
        // 判斷各種瀏覽器，找到正確的方法
        const requestMethod = element.requestFullScreen || // W3C
          element.webkitRequestFullScreen || // Chrome, safari
          element.mozRequestFullScreen || // FireFox
          element.msRequestFullscreen // IE11
        if (requestMethod) {
          requestMethod.call(element)
        }
      },
      exitFullScreen () {
        var exitMethod = document.exitFullscreen || // W3C
          document.mozCancelFullScreen || // FireFox
          document.webkitExitFullscreen || // Chrome等
          document.msExitFullscreen // IE11
        if (exitMethod) {
          exitMethod.call(document)
        }
      },
      addFullScreenListener () {
        const self = this
        document.onkeydown = function (e) {
          if (e && e.keyCode === 122) { // 捕捉F11鍵盤動作
            e.preventDefault() // 阻止F11默認動作
            self.toggleFullScreen()
          }
        }
        // 監(jiān)聽不同瀏覽器的全屏事件，并件執(zhí)行相應的代碼
        switch (self.browserKernel) {
          case 'webkit':
            document.onwebkitfullscreenchange = function () {
              if (document.webkitIsFullScreen) {
                self.isFullScreen = true
              } else {
                self.isFullScreen = false
              }
            }
            break
          case 'gecko':
            document.onmozfullscreenchange = function () {
              if (document.mozFullScreen) {
                self.isFullScreen = true
              } else {
                self.isFullScreen = false
              }
            }
            break
          case 'trident':
            document.onmsfullscreenchange = function () {
              if (document.msFullscreenElement) {
                self.isFullScreen = true
              } else {
                self.isFullScreen = false
              }
            }
            break
          case 'others':
            document.onfullscreenchange = function () {
              if (document.fullscreen) {
                self.isFullScreen = true
              } else {
                self.isFullScreen = false
              }
            }
            break
          default:
            break
        }
      },

優(yōu)化方案

在頁面初始化時判斷瀏覽器是否支持全屏操作

// 檢查瀏覽器是否支持全屏
      this.canFullScreen = document.fullscreenEnabled ||
        document.webkitFullscreenEnabled ||
        document.mozFullScreenEnabled ||
        document.msFullscreenEnabled
      if (document.webkitFullscreenEnabled) {
        this.browserKernel = 'webkit'
      } else if (document.mozFullScreenEnabled) {
        this.browserKernel = 'gecko'
      } else if (document.msFullscreenEnabled) {
        this.browserKernel = 'trident'
      } else if (document.fullscreenEnabled) {
        this.browserKernel = 'others'
      }
      if (this.canFullScreen) {
        this.addFullScreenListener()
      }

最后在銷毀頁面時移除監(jiān)聽：

destroyed(){
      document.onkeydown = null
      switch (this.browserKernel) {
        case 'webkit':
          document.onwebkitfullscreenchange = null
          break
        case 'gecko':
          document.onmozfullscreenchange = null
          break
        case 'trident':
          document.onmsfullscreenchange = null
          break
        case 'others':
          document.onfullscreenchange = null
          break
        default:
          break
      }
    }

如果想換圖標可以自動定義 ：

也可以用svg 圖標引進來：

<i :class="isFullScreen ? 'el-icon-aim':'el-icon-full-screen'" ><i/>

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論