up

src/components/Screenfull/index.vue

@@ -0,0 +1,38 @@
+<template>
+    <div @click="max">
+        <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="toggle" />
+    </div>
+</template>
+
+<script setup>
+import { useFullscreen } from '@vueuse/core';
+import { onMounted } from 'vue';
+
+const { isFullscreen, enter, exit, toggle } = useFullscreen();
+let navbar = null;
+let container = null;
+let hasLogo = null;
+onMounted(() => {
+    navbar = document.querySelector('.navbar');
+    container = document.querySelector('#tags-view-container');
+    hasLogo = document.querySelector('.has-logo');
+});
+
+const max = () => {
+    console.log(hasLogo.style);
+    navbar.style.display = 'none';
+    container.style.display = 'none';
+    hasLogo.style.left = '-100px';
+};
+</script>
+
+<style lang="scss" scoped>
+.screenfull-svg {
+    display: inline-block;
+    cursor: pointer;
+    fill: #5a5e66;
+    width: 20px;
+    height: 20px;
+    vertical-align: 10px;
+}
+</style>