Vue使用screenfull實現(xiàn)全屏效果
更新時間:2020年09月17日 16:57:14 作者:LSG199800
這篇文章主要為大家詳細介紹了Vue使用screenfull實現(xiàn)全屏,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了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)文章
vue項目打包發(fā)布到Nginx后無法訪問后端接口的解決辦法
這篇文章主要給大家介紹了關(guān)于vue項目打包發(fā)布到Nginx后無法訪問后端接口的解決辦法,記錄一下項目需要注意的地方,方便以后快速使用,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
詳解vue-router 2.0 常用基礎(chǔ)知識點之導(dǎo)航鉤子
本篇文章主要介紹了vue-router 2.0 常用基礎(chǔ)知識點之導(dǎo)航鉤子,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05
vue 框架下自定義滾動條(easyscroll)實現(xiàn)方法
這篇文章主要介紹了vue 框架下自定義滾動條(easyscroll)實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題
這篇文章主要介紹了Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07

