一、安装
npm i -S screenfull
二、使用
<template>
<div>
<svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
</div>
</template>
<script>
// 引入screenfull
import screenfull from 'screenfull'
export default {
name: 'Screenfull',
data() {
return {
// 默认不全屏
isFullscreen: false
}
},
mounted() {
this.init()
},
beforeDestroy() {
this.destroy()
},
methods: {
click() {
// 使用screenfull.enabled方法判断是否支持screenfull
// 若不允许进入全屏,发出不允许提示
if (!screenfull.isEnabled) {
this.$message({
message: '该浏览器不支持全屏',
type: 'warning'
})
return false
}
// 调用 screenfull.toggle() 切换全屏与非全屏
screenfull.toggle()
},
change() {
this.isFullscreen = screenfull.isFullscreen
},
// 注册事件
init() {
if (screenfull.enabled) {
screenfull.on('change', this.change)
}
},
// 移除注册的事件
destroy() {
if (screenfull.enabled) {
screenfull.off('change', this.change)
}
}
}
}
</script>
<style scoped>
.screenfull-svg {
display: inline-block;
cursor: pointer;
fill: #5a5e66;;
width: 20px;
height: 20px;
vertical-align: 10px;
}
</style>
三、API
request(ele) 全屏
exit() 退出全屏
toggle() 切换全屏
on(event, function) : event为 ‘change’ | ‘error’ 注册事件
off(event, function) : 移除前面已经注册的事件
element: 返回一个全屏的dom节点,如果没有就为 null
isFullscreen : 是否是全屏状态
isEnabled : 判断是否支持全屏