From 31c5669955856371b05bac4b50557163a396b19a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Sat, 1 Jan 2022 16:06:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(Screenfull):=20=E5=85=A8=E5=B1=8F=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=BC=95=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Screenfull/index.vue | 83 ++++-------------------------
 1 file changed, 9 insertions(+), 74 deletions(-)

diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index 72686b7d..b47e95a5 100644
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -1,88 +1,23 @@
 <template>
-  <div id="screenfull">
-    <div
-        v-if="isFullscreen"
-        @click="click"
-    >
-      <svg
-          class="icon"
-          aria-hidden="true"
-          font-size="40px"
-      >
-        <use xlink:href="#iconshiliangzhinengduixiang1" />
-      </svg>
-    </div>
-    <div
-        @click="click"
-        v-else
-    >
-      <svg
-          class="icon"
-          aria-hidden="true"
-          font-size="40px"
-      >
-        <use xlink:href="#iconshiliangzhinengduixiang1" />
-      </svg>
-    </div>
+  <div>
+    <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="toggle" />
   </div>
 </template>
 
-<script>
-import screenfull from 'screenfull'
-import { ElMessage } from 'element-plus'
-import {defineComponent,onBeforeUnmount,onMounted,reactive,toRefs} from "vue";
-
-
-export default defineComponent({
-
-  setup(){
-    const state =reactive({
-      isFullscreen: false,
-      click:()=>{
-        if (!screenfull.isEnabled) {
-          ElMessage({
-            message: 'you browser can not work',
-            type: 'warning'
-          })
-          return false
-        }
-        screenfull.toggle()
-      }
-    })
-
-    const change=()=>{
-      if(screenfull.isEnabled){
-        this.isFullscreen = screenfull.isFullscreen
-      }
-    }
-
-    onMounted(() => {
-      if (screenfull.isEnabled) {
-        screenfull.on('change', change)
-      }
-    })
-
-    onBeforeUnmount(() => {
-      if (screenfull.isEnabled) {
-        screenfull.off('change', change)
-      }
-    })
-
-    return {
-      ...toRefs(state)
-    }
-  }
-})
+<script setup>
+import { useFullscreen } from '@vueuse/core'
+import SvgIcon from '@/components/SvgIcon/index.vue'
 
+const { isFullscreen, enter, exit, toggle } = useFullscreen();
 </script>
 
-<style scoped>
+<style lang='scss' scoped>
 .screenfull-svg {
   display: inline-block;
   cursor: pointer;
-  fill: #5a5e66;;
+  fill: #5a5e66;
   width: 20px;
   height: 20px;
   vertical-align: 10px;
 }
-</style>
+</style>
\ No newline at end of file