全屏切换组件vue-fullscreen

vue-fullscreen

一个用于将任意页面元素进行全屏切换的vue组件

npm version

在线演示

使用示例

浏览器支持

Full Screen API

安装

使用npm命令安装

1
npm install vue-fullscreen

使用

引入vue-fullscreen,并使用Vue.use()注册插件,之后即可使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<template>
<div id="app">
<fullscreen ref="fullscreen" @change="fullscreenChange">
Content
</fullscreen>
<!-- deprecated
<fullscreen :fullscreen.sync="fullscreen">
Content
</fullscreen>
-->
<button type="button" @click="toggle" >Fullscreen</button>
</div>
</template>
<script>
import fullscreen from 'vue-fullscreen'
import Vue from 'vue'
Vue.use(fullscreen)
export default {
methods: {
toggle () {
this.$refs['fullscreen'].toggle() // recommended
// this.fullscreen = !this.fullscreen // deprecated
},
fullscreenChange (fullscreen) {
this.fullscreen = fullscreen
}
},
data() {
return {
fullscreen: false
}
}
}
</script>

注意: 由于浏览器的安全限制,全屏切换必须由一个用户操作事件发起,比如clickkeypress

注意: 因为watch回调现在只能异步执行,浏览器会拦截后续动作。我建议通过refs获取组件后直接调用其方法,而不要像旧版本那样修改传递给它的属性。

以插件形式使用

在Vue组件实例中,可以直接调用this.$fullscreen来获取全屏组件实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
<div id="app">
<div class="example">
Content
</div>
<button type="button" @click="toggle" >Fullscreen</button>
</div>
</template>
<script>
import fullscreen from 'vue-fullscreen'
import Vue from 'vue'
Vue.use(fullscreen)
export default {
methods: {
toggle () {
this.$fullscreen.toggle(this.$el.querySelector('.example'), {
wrap: false,
callback: this.fullscreenChange
})
},
fullscreenChange (fullscreen) {
this.fullscreen = fullscreen
}
},
data() {
return {
fullscreen: false
}
}
}
</script>

方法

toggle([target, options, force])

切换全屏模式。

  • target:
    • 类型: Element
    • 默认值: document.body
    • 全屏操作的目标元素。
  • options (可选):
    • 类型: Object
    • 配置项,详见下文。
  • force (可选):
    • 类型: Boolean
    • 默认值: undefined
    • 传入true可以指定进入全屏模式,效果与enter方法相同,false反之。

enter([target, options])

进入全屏模式。

  • target:
    • 类型: Element
    • 默认值: document.body
    • 全屏操作的目标元素。
  • options (可选):
    • 类型: Object
    • 配置项,详见下文。

exit()

退出全屏模式。

Options

callback

  • 类型: Function
  • 默认值: null

当全屏状态变更时执行。

fullscreenClass

  • 类型: String
  • 默认值: fullscreen

这个样式会在进入全屏状态时被添加到目标元素上。

wrap

  • 类型: Boolean
  • 默认值: true

如果设置为true,在进入全屏状态时目标元素会被一个div包裹, 你可以指定它的背景样式。

background

  • 类型: String
  • 默认值: #333

包裹元素的背景样式,只有在wrap为true且进入全屏时有效。

以组件形式使用

你可以单独引入全屏组件并局部注册它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
<div id="app">
<fullscreen ref="fullscreen" @change="fullscreenChange">
Content
</fullscreen>
<button type="button" @click="toggle" >Fullscreen</button>
</div>
</template>
<script>
import Fullscreen from "vue-fullscreen/src/component.vue"
export default {
components: {Fullscreen},
methods: {
toggle () {
this.$refs['fullscreen'].toggle()
},
fullscreenChange (fullscreen) {
this.fullscreen = fullscreen
}
},
data() {
return {
fullscreen: false
}
}
}
</script>

方法

toggle([force])

切换全屏模式。

  • force (可选):
    • 类型: Boolean
    • 默认值: undefined
    • 传入true可以指定进入全屏模式,效果与enter方法相同,false反之。

enter()

进入全屏模式。

exit

退出全屏模式。

Props属性

fullscreenClass

  • 类型: String
  • 默认值: fullscreen

全屏组件的样式类,只有全屏时才生效。

background

  • 类型: String
  • 默认值: #333

全屏组件的背景样式,只有全屏时才生效。

事件

change

  • isFullscreen: 当前的全屏状态。

在全屏状态改变时触发

避免重名冲突

如果你需要避免重名冲突,可以像这样引入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<template>
<div id="app">
<fs ref="fullscreen">
Content
</fs>
<div class="example">
Content
</div>
<button type="button" @click="toggle" >Fullscreen</button>
</div>
</template>
<script>
import Fullscreen from 'vue-fullscreen'
import Vue from 'vue'
Vue.use(Fullscreen, {name: 'fs'})
export default {
methods: {
toggle () {
this.$refs['fullscreen'].toggle()
this.$fs.toggle(this.$el.querySelector('.example'), {
wrap: false,
callback: this.fullscreenChange
})
},
fullscreenChange (fullscreen) {
this.fullscreen = fullscreen
}
},
data() {
return {
fullscreen: false
}
}
}
</script>