vue点击网页全屏_vue中实现点击变成全屏的多种方法

项目中有点击按钮实现全屏功能

方式一：js实现全屏

全屏

data：

data() {

return {

fullscreen: false

};

methods：

screen() {

let element = document.documentElement;

if (this.fullscreen) {

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.fullscreen = !this.fullscreen;

方式二：使用的是sreenfull插件，执行命令安装

npm install --save screenfull

在使用的页面正确引入：

import screenfull from ‘screenfull'

代码如下：

全屏

data:

data() {

return {

fullscreen: false

};

methods：

screen() {

// 如果不允许进入全屏，发出不允许提示

if (!screenfull.enabled) {

this.$message("您的浏览器不能全屏");

return false;

}

screenfull.toggle();

this.$message.success("全屏啦");

效果图：

实用

到此这篇关于vue中实现点击变成全屏的多种方法的文章就介绍到这了,更多相关vue点击全屏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

本文标题: vue中实现点击变成全屏的多种方法

本文地址: http://www.cppcns.com/wangluo/javascript/350063.html

vue点击网页全屏_vue中实现点击变成全屏的多种方法相关推荐

Vue：利用Vue生成的网页，在浏览器中的标签页中的图标与标题怎么修改为自己的？
Vue:利用Vue生成的网页,在浏览器中的标签页中的图标与标题怎么修改为自己的? 在解决这个问题的时候,在网上搜到了许多答案,可以说是众说纷纭,作者结合了多个答案,最后解决了这个问题,下面把用到的资源 ...
php如何模拟网页点击按钮,python模拟点击网页按钮如何实现 python模拟点击网页按钮实现方法...
python模拟点击网页按钮如何实现 python模拟点击网页按钮实现方法本篇文章小编给大家分享一下python模拟点击网页按钮实现方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们 ...
java中如何设置浏览器宽度_[Java教程]关于JS中获取浏览器高度和宽度值的多种方法(多浏览器)_星空网...
关于JS中获取浏览器高度和宽度值的多种方法(多浏览器) 2017-08-07 0 三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 d ...
vue修改meta值_vue中动态设置meta标签和title标签的方法
vue中动态设置meta标签和title标签的方法因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 ...
vue 怎么全局到入常量_Vue 中如何定义全局的变量和常量（转）
17.6k 次阅读 · 读完需要 10 分钟 7 Vue 中如何定义全局的变量和常量我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入. 尝试1: 创建 gl ...
vue 对象判断为空_Vue中可用的判断对象是否为空的方法
vue有两个方法可用 1. JSON.stringify(evtValue)=='{}' 2. Object.keys(xxx).length==0 js判断对象是否为空对象的几种方法 1.将json ...
在苹果手机html变大,苹果手机原来可以这样投屏到电视！一秒变大屏！太好用了！...
有时候在打游戏追剧的时候,总觉得手机屏幕太小了,要是能变大一些就舒服多了!有时看到精彩的瞬间,还想记录下来分享给其他的小伙伴.今天小编就来跟大家分享如何用苹果手机进行投屏和录屏操作,有需要的小伙伴可以 ...
wince投屏苹果手机_wince投屏苹果手机_苹果手机原来可以这样投屏到电视！一秒变大屏！太好用了！......
阅读本文前,请您先点击上面的"蓝色字体",再点击"关注",这样您就可以免费收到最新内容了.每天都有分享,完全是免费订阅,请放心关注.内容来源网络,侵权联系删除. ...
vue点击网页全屏_vue-cli点击实现全屏功能(两种方式)
项目中有点击按钮实现全屏功能方式一:js实现全屏代码如下: 全屏 export default { name: "index", data(){ return{ fullscr ...

vue点击网页全屏_vue中实现点击变成全屏的多种方法

vue点击网页全屏_vue中实现点击变成全屏的多种方法相关推荐

最新文章

热门文章