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

vue中實(shí)現(xiàn)點(diǎn)擊變成全屏及縮放功能

 更新時(shí)間：2024年08月28日 08:54:13   作者：江一銘  
這篇文章主要介紹了vue中實(shí)現(xiàn)點(diǎn)擊變成全屏及縮放功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

項(xiàng)目中有點(diǎn)擊按鈕實(shí)現(xiàn)全屏功能

方式一：js實(shí)現(xiàn)全屏

<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插件，執(zhí)行命令安裝

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() {
      // 如果不允許進(jìn)入全屏，發(fā)出不允許提示
      if (!screenfull.enabled) {
        this.$message("您的瀏覽器不能全屏");
        return false;
      }
      screenfull.toggle();
      this.$message.success("全屏啦");
    },

效果圖：

實(shí)用?。。?/p>

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論