<template>
|
<div class="fullscreen">
|
<i :class="['iconfont', isFullscreen ? 'icon-suoxiao' : 'icon-fangda']" class="toolBar-icon" @click="handleFullScreen"></i>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, ref } from "vue";
|
import { ElMessage } from "element-plus";
|
import screenfull from "screenfull";
|
|
const isFullscreen = ref(screenfull.isFullscreen);
|
|
onMounted(() => {
|
screenfull.on("change", () => {
|
if (screenfull.isFullscreen) isFullscreen.value = true;
|
else isFullscreen.value = false;
|
});
|
});
|
|
const handleFullScreen = () => {
|
if (!screenfull.isEnabled) ElMessage.warning("当前您的浏览器不支持全屏 ❌");
|
screenfull.toggle();
|
};
|
</script>
|
