A simple Vue.js component for fullscreen, based on screenfull.js
- Component
- Api
- Directive
- Compatible handling in iPhone & Popups in fullscreen
- Navigate to a new page without exiting fullscreen
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@legacyTo 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.
- target:
- Type:
Element - Default:
document.body - The element target for fullscreen.
- Type:
- options (optional):
- Type:
Object - The fullscreen options.
- Type:
- force (optional):
- Type:
Boolean - Default:
undefined - pass
trueto force enter ,falseto exit fullscreen mode.
- Type:
enter the fullscreen mode.
- target:
- Type:
Element - Default:
document.body - The element target for fullscreen.
- Type:
- options (optional):
- Type:
Object - The fullscreen options.
- Type:
exit 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.
- Type:
Boolean
Caution: The action is asynchronous, you can not get the expected state immediately following the calling method.
check browser support for the fullscreen API.
- Type:
Boolean
get the fullscreen element.
- Type:
Element | null
- Type:
Function - Default:
null
It will be called when the fullscreen mode changed.
- Type:
String - Default:
fullscreen
The class will be added to target element when fullscreen mode is on.
- Type:
Boolean - Default:
false
If true, only fill the page with current element.
Note: If the browser does not support full-screen Api, this option will be automatically enabled.
- Type:
Boolean - Default:
true
If 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.
- Type:
String | Element - Default:
document.body
The 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.
- Type:
Function - Default:
null
It will be called when the fullscreen mode changed.
- Type:
String - Default:
fullscreen
The 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>- Type:
String - Default:
fullscreen
The class will be added to the component when fullscreen mode is on.
- Type:
Boolean - Default:
true
If true, clicking wrapper will exit fullscreen.
- Type:
Boolean - Default:
false
If true, only fill the page with current element.
Note: If the browser does not support full-screen Api, this option will be automatically enabled.
- Type:
Boolean - Default:
true
If true, the component will be appended to document.body when it is fullscreen.
This can avoid some pop-ups not being displayed.
- isFullscreen: The current fullscreen state.
This event fires when the fullscreen mode changed.
- Type:
String - Default:
fullscreen
If 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>
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent