VUE中网页点击按钮，切换全屏及退出全屏

这是做好的成品效果，样式可根据需求自行修改

话不多说直接上代码

<template><div class="full"><a-button type="primary" @click="screen">点击显示全屏</a-button></div>
</template><script>
export default {name: 'index',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) {// IE11element.msRequestFullscreen();}}this.fullscreen = !this.fullscreen;}}
}
</script><style>.full{position: absolute;width: 130px;height: 50px;line-height: 50px;right: 100px;background: rgba(21, 108, 207, 0.8);border-radius: 30px;text-align: center;}
</style>

VUE中网页点击按钮，切换全屏及退出全屏相关推荐

Vue 中实现点击按钮
在 Vue 中实现点击按钮复制功能: 因为之前做过一个项目,有网关标识和场景标识,都是32个长度的随机字符串,后期需要用到这两个标识,以前用户可以手动复制过去用,但是随着数据的增多,这两个标识可能太 ...
vue h5网页点击按钮 -- 跳到微信小程序 wx-open-launch-weapp；onMenuShareAppMessage 分享图片不显示，且方法已废弃
h5网页点击按钮,唤醒微信小程序是否可以做? 可以!!,就是有点限制. 通过wx-open-launch-weapp就可以实现,但是限制微信服务号才可以使用.也就是说必须是微信环境下. 文章最下边, ...
JavaScript网页中点击按钮切换显示的内容
前言: 我是实习两个月的前端开发实习生, 最近在制作公司的官方网站过程中遇到了一个网页前端开发中比较普遍的需求: 点击不同的按钮页面上的内容随之更换, 并且按钮的背景颜色也要呈现为被选中的样式. 以 ...
点击按钮追加html代码,vue中如何点击按钮动态添加多个div，并给这些div附加上双击事件或者鼠标右击事件...
可以试试另一种方法,隐式创建Vue实例,比较适合封装成函数进行调用要挂载在到#app1的根实例: new Vue({ el: '#app1', template: ` 创建一个div `, meth ...
vue两个按钮切换_在vue中实现多个按钮样式的点击切换？
1.在vue中实现多个按钮样式的点击切换?有多个按钮,点击其中一个出现下划线,而另一个回到原始状态. 点击其中一个两个同时出现下划线样式: 再次点击两个都还原成最初的样式,即有下划线: 如何实现只有被 ...
原生js实现点击按钮切换全屏！
使用fullScreen API实现全屏 <head><meta charset="UTF-8"><meta name="viewport& ...
vue点击按钮切换显示不同内容_邂逅Vue
01 什么是Vue.js Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架. 看到这里,你就会问了,什么是渐进式? 渐进式就是你可以将Vue作为一个项目中的部分组件改 ...
vue中点击按钮切换图片
vue中点击按钮切换图片直接附上代码,亲测有效  <template><div><div class="">< ...
js实现点击按钮切换图片功能_☆*往事随風*☆的博客
文章目录前言一.DOM是什么? 二.对象的HTML DOM 树三.图片切换练习 1.要求 2.实现思路 3.示例代码 1.html示例代码如下: 2.css示例代码如下: 2.js示例代码如下: ...

VUE中网页点击按钮，切换全屏及退出全屏

VUE中网页点击按钮，切换全屏及退出全屏相关推荐

最新文章

热门文章