From d66528f40a93448790252cb1d85000682cd33880 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Mon, 22 May 2023 13:35:04 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96=20?=
 =?UTF-8?q?components/Screenfull?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Screenfull/index.vue | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index 4463f92..c936bc7 100644
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, onUnmounted } from "vue"
+import { ref, watchEffect } from "vue"
 import { ElMessage } from "element-plus"
 import screenfull from "screenfull"
 
@@ -24,31 +24,34 @@ const props = defineProps({
 const tips = ref<string>(props.openTips)
 const isFullscreen = ref<boolean>(false)
 
-const click = () => {
-  const dom = document.querySelector(props.element) || undefined
+const handleClick = () => {
   if (!screenfull.isEnabled) {
     ElMessage.warning("您的浏览器无法工作")
     return
   }
+  const dom = document.querySelector(props.element) || undefined
   screenfull.toggle(dom)
 }
 
-const change = () => {
+const handleChange = () => {
   isFullscreen.value = screenfull.isFullscreen
   tips.value = screenfull.isFullscreen ? props.exitTips : props.openTips
 }
 
-screenfull.on("change", change)
-
-onUnmounted(() => {
-  if (screenfull.isEnabled) {
-    screenfull.off("change", change)
-  }
+watchEffect((onCleanup) => {
+  // 挂载组件时自动执行
+  screenfull.on("change", handleChange)
+  // 卸载组件时自动执行
+  onCleanup(() => {
+    if (screenfull.isEnabled) {
+      screenfull.off("change", handleChange)
+    }
+  })
 })
 </script>
 
 <template>
-  <div @click="click">
+  <div @click="handleClick">
     <el-tooltip effect="dark" :content="tips" placement="bottom">
       <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
     </el-tooltip>