refactor: Screenfull Component

src/components/Screenfull/index.vue

@@ -1,8 +1,13 @@
 <script lang="ts" setup>
+import { ref, onUnmounted } from "vue"
 import { ElMessage } from "element-plus"
-import { FullScreen } from "@element-plus/icons-vue"
 import screenfull from "screenfull"
 
+type contentType = "全屏" | "退出全屏"
+
+const content = ref<contentType>("全屏")
+const isFullscreen = ref(false)
+
 const click = () => {
   if (!screenfull.isEnabled) {
     ElMessage.warning("您的浏览器无法工作")
@@ -10,14 +15,34 @@ const click = () => {
   }
   screenfull.toggle()
 }
+
+const change = () => {
+  isFullscreen.value = screenfull.isFullscreen
+  content.value = screenfull.isFullscreen ? "退出全屏" : "全屏"
+}
+
+screenfull.on("change", change)
+
+onUnmounted(() => {
+  if (screenfull.isEnabled) {
+    screenfull.off("change", change)
+  }
+})
 </script>
 
 <template>
   <div @click="click">
-    <el-tooltip effect="dark" content="全屏" placement="bottom">
-      <el-icon :size="20">
-        <FullScreen />
-      </el-icon>
+    <el-tooltip effect="dark" :content="content" placement="bottom">
+      <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
     </el-tooltip>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.svg-icon {
+  font-size: 20px;
+  &:focus {
+    outline: none;
+  }
+}
+</style>

src/icons/svg/fullscreen-exit.svg

@@ -0,0 +1 @@
+<svg t="1661153147729" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3352" width="200" height="200"><path d="M704 864v-96c0-54.4 41.6-96 96-96h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-89.6 0-160 70.4-160 160v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64-704v96c0 89.6 70.4 160 160 160h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-54.4 0-96-41.6-96-96v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z m-256 704v-96c0-89.6-70.4-160-160-160h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c54.4 0 96 41.6 96 96v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64-704v96c0 54.4-41.6 96-96 96h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c89.6 0 160-70.4 160-160v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z" p-id="3353"></path></svg>

src/icons/svg/fullscreen.svg

@@ -0,0 +1 @@
+<svg t="1661151768669" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3212" width="200" height="200"><path d="M192 384v-96c0-54.4 41.6-96 96-96h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-89.6 0-160 70.4-160 160v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64 256v96c0 89.6 70.4 160 160 160h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-54.4 0-96-41.6-96-96v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z m768-256v-96c0-89.6-70.4-160-160-160h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c54.4 0 96 41.6 96 96v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64 256v96c0 54.4-41.6 96-96 96h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c89.6 0 160-70.4 160-160v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z" p-id="3213"></path></svg>

src/styles/theme/theme.scss

@@ -30,15 +30,9 @@
     .navbar {
       background-color: $theme-bg-color;
       .right-menu {
-        .el-icon {
+        .svg-icon {
           color: $font-color;
         }
-        .el-avatar {
-          background: lighten($theme-bg-color, 20%);
-          .el-icon {
-            color: #fff;
-          }
-        }
       }
     }