Vue使用screenfull實現(xiàn)全屏效果
更新時間:2020年09月17日 16:57:14 作者:LSG199800
這篇文章主要為大家詳細(xì)介紹了Vue使用screenfull實現(xiàn)全屏,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue使用screenfull實現(xiàn)全屏的具體代碼,供大家參考,具體內(nèi)容如下
安裝
npm install --save screenfull
在需要的頁面引用
import screenfull from 'screenfull'
全屏使用
<template> <span @click='clickFullscreen'>全屏</span> </template> <script> import screenfull from 'screenfull' export default{ name: 'screenfull', data(){ return { isFullscreen: false } }, methods:{ clickFullscreen(){ if (!screenfull.isEnabled) { this.$message({ message: 'you browser can not work', type: 'warning' }) return false } screenfull.toggle() } } } </script>
原生實現(xiàn)方法
// 全屏事件 兼容 clickFullscreen() { let element = document.documentElement; if (this.isFullscreen) { 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.isFullscreen= !this.isFullscreen; }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+TypeScript實現(xiàn)PDF預(yù)覽組件
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3+TypeScript實現(xiàn)PDF預(yù)覽組件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04利用Vue模擬實現(xiàn)element-ui的分頁器效果
這篇文章主要為大家詳細(xì)介紹了如何利用Vue模擬實現(xiàn)element-ui的分頁器效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以動手嘗試一下2022-11-11如何使用el-table實現(xiàn)純前端導(dǎo)出(適用于el-table任意表格)
我們?nèi)粘W鲰椖?特別是后臺管理系統(tǒng),常常需要導(dǎo)出excel文件,這篇文章主要給大家介紹了關(guān)于如何使用el-table實現(xiàn)純前端導(dǎo)出的相關(guān)資料,本文適用于el-table任意表格,需要的朋友可以參考下2024-03-03前端vue按1920*1080設(shè)計圖的頁面適配屏幕縮放并適配4K屏詳解
最近在做一個數(shù)據(jù)可視化的項目,整個項目全是大屏展示,期間也是遇到很多問題,最令人頭疼的就是大屏的適配,下面這篇文章主要給大家介紹了前端vue按1920*1080設(shè)計圖的頁面適配屏幕縮放并適配4K屏的相關(guān)資料,需要的朋友可以參考下2022-11-11