vue-fullscreen
Advanced tools
A simple Vue.js component for fullscreen, based on screenfull.js
Note: In order to use this package in Internet Explorer, you need a Promise polyfill.
Note: Safari is supported on desktop and iPad, but not on iPhone.
Note: Navigating to another page, changing tabs, or switching to another application using any application switcher (or Alt-Tab) will likewise exit full-screen mode.
In general, you can simply switch the fullscreen state using two-way binding, so you don't have to call the component methods directly.
The background prop are removed, you can set it directly on the component
The wrapper and options such as background associated with it are removed, which has limited use cases, is not very customizable, and you can simply implement it yourself.
The method names are changed as follows:
| old | new |
|---|---|
| enter | request |
| support | isEnabled |
| getState() | isFullscreen |
Install from NPM
npm install vue-fullscreen
To use vue-fullscreen, simply import it, and call Vue.use() to install.
The component, directive and api will be installed together in the global.
<template>
<div>
<!-- Component -->
<fullscreen v-model="fullscreen">
content
</fullscreen>
<button type="button" @click="toggle" >Fullscreen</button>
<!-- Api -->
<button type="button" @click="toggleApi" >FullscreenApi</button>
<!-- Directive -->
<button type="button" v-fullscreen >FullscreenDirective</button>
</div>
</template>
<script>
import VueFullscreen from 'vue-fullscreen'
import Vue from 'vue'
Vue.use(VueFullscreen)
export default {
methods: {
toggle () {
this.fullscreen = !this.fullscreen
},
toggleApi () {
this.$fullscreen.toggle()
},
},
data() {
return {
fullscreen: false,
}
}
}
</script>
Caution: Because of the browser security function, you can only call these methods by a user gesture(click or keypress).
In your vue component, You can use this.$fullscreen to get the instance.
this.$fullscreen.toggle()
Or you can just import the api method and call it.
<template>
<div>
<div class="fullscreen-wrapper">
Content
</div>
<button type="button" @click="toggle" >Fullscreen</button>
</div>
</template>
<script>
import { api as fullscreen } from 'vue-fullscreen'
export default {
methods: {
async toggle () {
await fullscreen.toggle(this.$el.querySelector('.fullscreen-wrapper'), {
teleport: this.teleport,
callback: (isFullscreen) => {
//this.fullscreen = isFullscreen
},
})
this.fullscreen = fullscreen.isFullscreen
},
},
data() {
return {
fullscreen: false,
teleport: true,
}
}
}
</script>
Toggle the fullscreen mode.
Elementdocument.bodyObjectBooleanundefinedtrue to force enter , false to exit fullscreen mode.enter the fullscreen mode.
Elementdocument.bodyObjectexit the fullscreen mode.
Note: Each of these methods returns a promise object, and you can get the state after the promise has been resolved, or you can pass a callback function in options to get.
async toggle () {
await this.$fullscreen.toggle()
this.fullscreen = this.$fullscreen.isFullscreen
}
get the fullscreen state.
BooleanCaution: The action is asynchronous, you can not get the expected state immediately following the calling method.
check browser support for the fullscreen API.
Booleanget the fullscreen element.
Element | nullFunctionnullIt will be called when the fullscreen mode changed.
StringfullscreenThe class will be added to target element when fullscreen mode is on.
BooleanfalseIf true, only fill the page with current element.
Note: If the browser does not support full-screen Api, this option will be automatically enabled.
BooleantrueIf true, the target element will be appended to document.body when it is fullscreen.
This can avoid some pop-ups not being displayed.
You can use v-fullscreen to make any element have the effect of switching to full screen with a click.
<button v-fullscreen>FullScreen</button>
Or you can just import the directive and install it.
<template>
<div>
<div class="fullscreen-wrapper">
Content
</div>
<button type="button" v-fullscreen.teleport="options" >Fullscreen</button>
</div>
</template>
<script>
import { directive as fullscreen } from 'vue-fullscreen'
export default {
directives: {
fullscreen
},
data() {
return {
options: {
target: ".fullscreen-wrapper",
callback (isFullscreen) {
console.log(isFullscreen)
},
},
}
}
}
</script>
only fill the page with current element.
the component will be appended to document.body when it is fullscreen.
This can avoid some pop-ups not being displayed.
String | Elementdocument.bodyThe element can be specified using a style selector string, equivalent to document.querySelector(target). Note that when passing an element object directly, you need to make sure that the element already exists. The internal elements of the current component may not be initialized when the directive is initialized.
FunctionnullIt will be called when the fullscreen mode changed.
StringfullscreenThe class will be added to target element when fullscreen mode is on.
You can simply import the component and register it locally.
<template>
<div>
<fullscreen v-model="fullscreen" :teleport="teleport" :page-only="pageOnly" >
Content
</fullscreen>
<button type="button" @click="toggle" >Fullscreen</button>
</div>
</template>
<script>
import { component } from 'vue-fullscreen'
export default {
components: {
fullscreen: component,
},
methods: {
toggle () {
this.fullscreen = !this.fullscreen
},
},
data() {
return {
fullscreen: false,
teleport: true,
pageOnly: false,
}
}
}
</script>
StringfullscreenThe class will be added to the component when fullscreen mode is on.
BooleantrueIf true, clicking wrapper will exit fullscreen.
BooleanfalseIf true, only fill the page with current element.
Note: If the browser does not support full-screen Api, this option will be automatically enabled.
BooleantrueIf true, the component will be appended to document.body when it is fullscreen.
This can avoid some pop-ups not being displayed.
This event fires when the fullscreen mode changed.
StringfullscreenIf you need to avoid name conflict, you can import it like this:
<template>
<div>
<!-- Component -->
<fs v-model="fullscreen" :teleport="teleport" :page-only="pageOnly" @change="fullscreenChange" >
content
</fs>
<button type="button" @click="toggle" >Fullscreen</button>
<!-- Api -->
<button type="button" @click="toggleApi" >FullscreenApi</button>
<!-- Directive -->
<button type="button" v-fs.teleport >FullscreenDirective</button>
</div>
</template>
<script>
import VueFullscreen from 'vue-fullscreen'
import Vue from 'vue'
Vue.use(VueFullscreen, {name: 'fs'})
export default {
methods: {
toggle () {
this.fullscreen = !this.fullscreen
},
toggleApi() {
this.$fs.toggle()
},
},
data() {
return {
fullscreen: false,
}
}
}
</script>
FAQs
A simple Vue.js component for fullscreen
The npm package vue-fullscreen receives a total of 6,869 weekly downloads. As such, vue-fullscreen popularity was classified as popular.
We found that vue-fullscreen demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.