Vue使用screenfull实现全屏效果_screenfull - CSDN文库

41 浏览量更新于2023-03-03 评论收藏 22KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Vue使用使用screenfull实现全屏效果实现全屏效果

本文实例为大家分享了Vue使用screenfull实现全屏的具体代码，供大家参考，具体内容如下

安装

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>

原生实现方法

// 全屏事件兼容

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;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38731385

粉丝: 2
资源: 871

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈