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>