docs: amend demo

Author: NelsonYong

packages/hooks/pnpm-lock.yaml

@@ -1,31 +1,26 @@
-
 <template>
-  <div ref="curRef" style="background:  white">
+  <div ref="curRef">
     <div style="margin: bottom 16px;" :style="isFullscreen ? 'Fullscreen' : 'Not fullscreen'" />
     <div>
-      <button type="button" @click="enterFullscreen">
+      <vhp-button type="button" @click="enterFullscreen">
         enterFullscreen
-      </button>
-      <button type="button" @click="{exitFullscreen}" style="margin:0 8px">
+      </vhp-button>
+      <vhp-button type="button" @click="exitFullscreen" style="margin:0 8px">
         exitFullscreen
-      </button>
-      <button type="button" @click="{toggleFullscreen}">
+      </vhp-button>
+      <vhp-button type="button" @click="toggleFullscreen">
         toggleFullscreen
-      </button>
+      </vhp-button>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { useFullscreen } from 'vue-hooks-plus'
-
-const curRef = ref(null);
-const [isFullscreen, { enterFullscreen, exitFullscreen, toggleFullscreen }] = useFullscreen(curRef);
+  import { ref } from 'vue'
+  import { useFullscreen } from 'vue-hooks-plus'
 
+  const curRef = ref(null)
+  const [isFullscreen, { enterFullscreen, exitFullscreen, toggleFullscreen }] = useFullscreen(
+    curRef,
+  )
 </script>
-
-
-
-
-

packages/hooks/src/useFullscreen/demo/demo.vue

@@ -1,17 +1,18 @@
 <template>
-  <div style="background:white">
+  <div>
     <div style="margin-bottom: 16px ">
-      <button id="fullscreen-img" style="width: 320" alt="" />
+      <img id="fullscreen-img" :src="img" style="width: 320px" alt="">
     </div>
-    <button type="button" @click="enterFullscreen">
+    <vhp-button type="button" @click="enterFullscreen">
       enterFullscreen
-    </button>
+    </vhp-button>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useFullscreen } from 'vue-hooks-plus'
+  import { useFullscreen } from 'vue-hooks-plus'
 
-const [, { enterFullscreen }] = useFullscreen(() => document.getElementById('fullscreen-img'));
+  const img = 'https://v2.cn.vuejs.org/images/logo.svg'
 
+  const [, { enterFullscreen }] = useFullscreen(() => document.getElementById('fullscreen-img'))
 </script>