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) {// IE11element.msRequestFullscreen();}}this.isFullscreen= !this.isFullscreen;}

Vue 使用 screenfull 实现全屏相关推荐

Vue使用successful实现全屏
vue使用successful实现全屏效果 1.安装 npm install --save screenfull 2.在需要使用的页面引入 import screenfull from 'screen ...
vue点击网页全屏_vue中实现点击变成全屏的多种方法
项目中有点击按钮实现全屏功能方式一:js实现全屏全屏 data: data() { return { fullscreen: false }; }, methods: screen() { let ...
vue3使用screenfull实现全屏
理论 npm地址:https://www.npmjs.com/package/screenfull 使用方法安装 npm install screenfull --save 在使用.vue文件中引 ...
vue点击网页全屏_vue-cli点击实现全屏功能(两种方式)
项目中有点击按钮实现全屏功能方式一:js实现全屏代码如下: 全屏 export default { name: "index", data(){ return{ fullscr ...
Vue设置背景图片(全屏背景),实际操作与踩雷.
最近一直困扰我一个背景问题,也是Vue的项目,问题就是在Vue上添加一个好看的背景,每次去网上查的时候,几乎所有插过来的答案都是一样的,我一度怀疑他们理解的背景和我理解的背景是两个东西网上的答案: ...
vue 组件封装 | s-fullpage 全屏滚动（内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧）
目录目标实现原理(要点) 完整代码 s-fullpage 和 s-fullpageItem s-fullpage.vue s-fullpageItem.vue 使用范例范例效果目标实现类似插 ...
vue 屏幕自适应及全屏放大缩小
1. <div id="screen-content" :class="{'fix':!flag}"><div id="main&q ...
vue 点击浏览器全屏取消全屏
<template><div><img @click="fullscreenToggel" v-if="f ...
vue中实现浏览器全屏放大
方法一: (1).先下载 npm i screenfull (2).在需要的页面引入 import screenfull from 'screenfull' (3) 给一个点击事件 @click=&q ...

Vue 使用 screenfull 实现全屏

安装

在需要的页面引用

全屏使用

原生实现方法

Vue 使用 screenfull 实现全屏相关推荐

最新文章

热门文章