vue-fullscreen
一个用于将任意页面元素进行全屏切换的vue组件，基于 screenfull.js
有任何问题请到github项目页提交issue，博客的留言我可能无法及时看到，谢谢各位支持👍。
vue-fullscreen for vue3
在线演示
使用示例
支持
注意: 在IE浏览器下使用需要先实现Promise的polyfill.
注意: Safari浏览器在桌面和iPad下支持，但iPhone不支持.
注意: 当处在全屏模式中，浏览其他页面，切换标签页，或者切换到其他应用（例如使用 Alt-Tab）也会导致退出全屏模式。
从<=2.3.5版本迁移
组件
一般情况下你可以直接使用双向绑定来修改组件全屏状态了，无需直接调用组件的内部方法。
background属性已移除，你可以直接在组件上设置样式。
Api
wrapper和background等与它相关的配置项已移除，它们使用场景有限，可定制性不强，而且你可以自己简单地实现它。
方法名更改如下:
| 旧 | 新 |
|---|---|
| enter | request |
| support | isEnabled |
| getState() | isFullscreen |
安装
使用npm命令安装
bash
npm install vue-fullscreennpm install vue-fullscreen使用
引入vue-fullscreen，并使用Vue.use()注册插件，之后即可使用。
组件、指令和api会被一起安装到app全局。
html
<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><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>注意: 由于浏览器的安全限制，全屏切换必须由一个用户操作事件发起，比如click或keypress。
以api形式使用
在Vue组件实例中，可以直接调用this.$fullscreen来获取全屏api。
javascript
this.$fullscreen.toggle()this.$fullscreen.toggle()或者你可以单独引入api然后执行它。
html
<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><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([target, options, force])
切换全屏模式。
- target:
- 类型:
Element - 默认值:
document.body - 全屏操作的目标元素。
- 类型:
- options (可选):
- 类型:
Object - 配置项，详见下文。
- 类型:
- force (可选):
- 类型:
Boolean - 默认值:
undefined - 传入
true可以指定进入全屏模式，效果与request方法相同，false反之。
- 类型:
request([target, options])
进入全屏模式。
- target:
- 类型:
Element - 默认值:
document.body - 全屏操作的目标元素。
- 类型:
- options (optional):
- 默认值:
Object - 配置项，详见下文。
- 默认值:
exit()
退出全屏模式。
注意: 这些方法都会返回一个Promise对象，你可以在Promise执行完成后获取状态，或者在options中传入一个回调函数来获取。
javascript
async toggle () {
await this.$fullscreen.toggle()
this.fullscreen = this.$fullscreen.isFullscreen
}async toggle () {
await this.$fullscreen.toggle()
this.fullscreen = this.$fullscreen.isFullscreen
}isFullscreen
判断是否处于全屏状态。
- 类型:
Boolean
注意: 唤起全屏的动作是异步的,在调用方法后你无法立即获取预期的结果。
isEnabled
判断环境是否支持全屏API。
- 类型:
Boolean
element
获取当前全屏的元素
- 类型:
Element | null
配置项
callback
- 类型:
Function - 默认值:
null
当全屏状态变更时执行。
fullscreenClass
- 类型:
String - 默认值:
fullscreen
这个样式会在进入全屏状态时被添加到目标元素上。
pageOnly
- 类型:
Boolean - 默认值:
false
如果为true，不调用全屏API，而是将当前元素撑满网页。
注意: 如果浏览器不支持全屏API，这个选项默认值为true.
teleport
- 类型:
Boolean - 默认值:
true
如果为true， 进入全屏时目标元素会被移动到document.body下。
这可以避免一些弹窗在全屏模式下看不到的问题。
以指令形式使用
你可以使用v-fullscreen使任意元素拥有点击切换全屏的效果
html
<button v-fullscreen>FullScreen</button><button v-fullscreen>FullScreen</button>或者你可以单独引入指令并安装它。
html
<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><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>修饰符
pageOnly
不调用全屏API，而是将当前元素撑满网页。
teleport
进入全屏时目标元素会被移动到document.body下。
这可以避免一些弹窗在全屏模式下看不到的问题。
配置项
target
- 类型:
String | Element - 默认值:
document.body
全屏操作的目标元素。可以使用样式选择器字符串来指定元素，相当于document.querySelector(target)。注意直接传递元素对象时，需要确保该元素已存在。指令被初始化时，当前组件的内部元素可能尚未初始化。
callback
- 类型:
Function - 默认值:
null
当全屏状态变更时执行。
fullscreenClass
- 类型:
String - 默认值:
fullscreen
这个样式会在进入全屏状态时被添加到目标元素上。
以组件形式使用
你可以单独引入全屏组件并局部注册它。
html
<template>
<div>
<fullscreen :fullscreen.sync="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><template>
<div>
<fullscreen :fullscreen.sync="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>Props属性
fullscreen-class
- 类型:
String - 默认值:
fullscreen
全屏组件的样式类，只有全屏时才生效。
exit-on-click-wrapper
- 类型:
Boolean - 默认值:
true
如果为true， 点击全屏组件的空白部分会退出全屏。
page-only
- 类型:
Boolean - 默认值:
false
如果为true，不调用全屏API，而是将当前组件撑满网页。
注意: 如果浏览器不支持全屏API，这个选项默认值为true.
teleport
- 类型:
Boolean - 默认值:
true
如果为true, 进入全屏时当前组件会被移动到document.body下。
这可以避免一些弹窗在全屏模式下看不到的问题。
事件
change
- isFullscreen: 当前的全屏状态。
在全屏状态改变时触发。
插件配置项
name
- 类型:
String - 默认值:
fullscreen
如果你需要避免重名冲突，可以像这样引入:
html
<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><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>