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

vue中實(shí)現(xiàn)點(diǎn)擊變成全屏的多種方法

 更新時(shí)間：2020年09月27日 11:05:17   作者：谷歌研發(fā)技術(shù)團(tuán)隊(duì)  
這篇文章主要介紹了vue中實(shí)現(xiàn)點(diǎn)擊變成全屏的多種方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

項(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í)用

到此這篇關(guān)于vue中實(shí)現(xiàn)點(diǎn)擊變成全屏的多種方法的文章就介紹到這了,更多相關(guān)vue點(diǎn)擊全屏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論