全国服务热线:4008-888-888

技术知识

农业微信小程序商城_Vue使用screenfull完成全屏效果

Vue使用screenfull实现全屏效果       这篇文章主要为大家详细介绍了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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服