vue中實(shí)現(xiàn)點(diǎn)擊變成全屏及縮放功能
更新時(shí)間：2024年08月28日 08:54:13 作者：江一銘
這篇文章主要介紹了vue中實(shí)現(xiàn)點(diǎn)擊變成全屏及縮放功能,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(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í)用?。?！
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解本地Vue項(xiàng)目請求本地Node.js服務(wù)器的配置方法
本文只針對自己需要本地模擬接口于是搭建一個(gè)本地node服務(wù)器供自己測試使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
這篇文章主要介紹了vue中eslintrc.js配置最詳細(xì)介紹，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
vue2自定義組件通過rollup配置發(fā)布到npm的詳細(xì)步驟
這篇文章主要介紹了vue2自定義組件通過rollup配置發(fā)布到npm,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
vue使用 vxe-table實(shí)現(xiàn)跨表拖拽多表聯(lián)動互相拖拽數(shù)據(jù)功能
使用vxe-table實(shí)現(xiàn)跨表拖拽需啟用row-drag-config.isCrossTableDrag,并通過row-config.keyField指定唯一主鍵字段,確保多表格間數(shù)據(jù)聯(lián)動時(shí)主鍵不重復(fù),實(shí)現(xiàn)行級數(shù)據(jù)在不同表格間的拖拽交互,感興趣的朋友跟隨小編一起看看吧2025-08-08
這篇文章主要介紹了vue 父組件中調(diào)用子組件函數(shù)的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06
Vue3+Element?Plus的項(xiàng)目搭建過程詳解
這篇文章主要為大家介紹了Vue3+Element?Plus的項(xiàng)目搭建過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue3+vueuse實(shí)現(xiàn)放大鏡示例詳解
這篇文章主要為大家介紹了Vue3+vueuse實(shí)現(xiàn)放大鏡示例過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue3封裝AES(CryptoJS)前端加密解密通信代碼實(shí)現(xiàn)
防止數(shù)據(jù)被爬取,前后端傳參接收參數(shù)需要加密處理,使用AES加密,這篇文章主要給大家介紹了關(guān)于vue3封裝AES(CryptoJS)前端加密解密通信代碼實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2023-12-12
使用vue-router設(shè)置每個(gè)頁面的title方法
下面小編就為大家分享一篇使用vue-router設(shè)置每個(gè)頁面的title方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本文探討了Vue項(xiàng)目中缺少明顯入口文件的原因,并提供了解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11