<template>
<!-- 放置一个图标 -->
<div class="screenWrapper">
<!--
'exit-fullscreen' 'fullscreen'
-->
<!--
问题:点击浏览器的叉号 或者esc 此时视图显示是退出了 但是图标并没有发生变化
原因:控制icon显示的数据状态isFullScreen 并不会随着esc或者叉号的点击发生变化
解决:根据esc或者叉号的点击 把这个状态同步到isFullScreen
关键:如何得知esc或者叉号被点击了???
-->
<!-- 全屏图标 -->
<svg-icon :icon-class="isFullScreen ? 'exit-fullscreen': 'fullscreen'" class="fullscreen" @click="toggleScreen" />
</div>
</template>
<script>
export default {
name: 'ScreenFull',
data() {
return {
isFullScreen: false
}
},
mounted() {
document.addEventListener('fullscreenchange', (e) => {
const isFull = document.fullscreenElement
if (isFull == null) {
this.isFullScreen = false
}
})
},
methods: {
toggleScreen() {
if (this.isFullScreen) {
document.exitFullscreen()
} else {
document.documentElement.requestFullscreen()
}
this.isFullScreen = !this.isFullScreen
}
}
}
</script>
<style lang="scss" scoped>
.screenWrapper{
display: flex;
align-items: center;
margin-right: 20px;
}
.fullscreen {
width: 20px;
height: 20px;
color: #fff;
cursor: pointer;
}
</style>