Vue使用screenfull實(shí)現(xiàn)全屏效果
更新時(shí)間：2020年09月17日 16:57:14 作者：LSG199800
這篇文章主要為大家詳細(xì)介紹了Vue使用screenfull實(shí)現(xiàn)全屏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue使用screenfull實(shí)現(xiàn)全屏的具體代碼，供大家參考，具體內(nèi)容如下
安裝
npm install --save screenfull
在需要的頁(yè)面引用
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>
原生實(shí)現(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;
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇vue生成文件本地打開(kāi)查看效果的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue項(xiàng)目打包發(fā)布到Nginx后無(wú)法訪(fǎng)問(wèn)后端接口的解決辦法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包發(fā)布到Nginx后無(wú)法訪(fǎng)問(wèn)后端接口的解決辦法,記錄一下項(xiàng)目需要注意的地方,方便以后快速使用,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
詳解vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之導(dǎo)航鉤子
本篇文章主要介紹了vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之導(dǎo)航鉤子，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了在項(xiàng)目vue中使用echarts的操作步驟，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
這篇文章主要介紹了Vue表單輸入綁定的示例代碼，本文使用v-model指令在表單input創(chuàng)建雙向數(shù)據(jù)綁定，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-11-11
今天小編就為大家分享一篇vue 中滾動(dòng)條始終定位在底部的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue 框架下自定義滾動(dòng)條(easyscroll)實(shí)現(xiàn)方法
這篇文章主要介紹了vue 框架下自定義滾動(dòng)條(easyscroll)實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問(wèn)題
這篇文章主要介紹了Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue實(shí)現(xiàn)PopupWindow組件詳解
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)PopupWindow組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04
vue-cli3配置多項(xiàng)目并按項(xiàng)目分別實(shí)現(xiàn)打包
這篇文章主要介紹了vue-cli3配置多項(xiàng)目并按項(xiàng)目分別實(shí)現(xiàn)打包方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01