帮我用vue 和openLayers 写一段自定义全屏控件 的代码

好的，我可以回答这个问题。以下是使用 Vue 和 OpenLayers 编写自定义全屏控件的代码示例：

<template>
<div class="fullscreen-control ol-unselectable ol-control">
<button @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏'">
<i :class="isFullscreen ? 'fa fa-compress' : 'fa fa-expand'"></i>
</button>
</div>
</template>

<script>
export default {
name: 'FullscreenControl',
data() {
return {
isFullscreen: false
}
},
mounted() {
document.addEventListener('fullscreenchange', this.handleFullscreenChange)
document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange)
document.addEventListener('mozfullscreenchange', this.handleFullscreenChange)
document.addEventListener('MSFullscreenChange', this.handleFullscreenChange)
},
beforeDestroy() {
document.removeEventListener('fullscreenchange', this.handleFullscreenChange)
document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange)
document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange)
document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange)
},
methods: {
toggleFullscreen() {
const elem = document.documentElement
if (!this.isFullscreen) {
if (elem.requestFullscreen) {
elem.requestFullscreen()
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen()
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen()
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen()
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
}
},
handleFullscreenChange() {
this.isFullscreen = !this.isFullscreen
}
}
}
</script>

<style scoped>
.fullscreen-control {
position: absolute;
top: 10px;
right: 10px;
z-index: 100;
}
.fullscreen-control button {
background-color: #fff;
border: none;
border-radius: 3px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
cursor: pointer;
font-size: 16px;
height: 30px;
padding: 0 10px;
transition: background-color 0.2s ease-in-out;
}
.fullscreen-control button:hover {
background-color: #f5f5f5;
}
.fullscreen-control button i {
font-size: 20px;
}
</style>