feat：add useFullScreen

Author: qingyao.chen

demo/componentList.ts

@@ -9,4 +9,5 @@ export default [
   'useScroll',
   'useInViewport',
   'useDraggable',
+  'useFullScreen',
 ];

src/index.ts

@@ -8,3 +8,4 @@ export { default as useReactiveRef } from './useReactiveRef';
 export { default as useScroll } from './useScroll';
 export { default as useInViewport } from './useInViewport';
 export { default as useDraggable } from './useDraggable';
+export { default as useFullScreen } from './useFullScreen';

src/useFullScreen/__demo__/index.tsx

@@ -0,0 +1,49 @@
+import { Component, ref } from 'vue';
+import useFullScreen from '../index';
+
+export default {
+  setup() {
+    const divRef = ref(null);
+    const [isDivFullScreen, itoggleDivFullScreen] = useFullScreen(divRef);
+
+    const imgRef = ref(null);
+    const [, toggleImgFullScreen] = useFullScreen(imgRef);
+
+    const videoRef = ref(null);
+    const [, toggleVideoFullScreen] = useFullScreen(videoRef);
+
+    return {
+      isDivFullScreen,
+      itoggleDivFullScreen,
+      divRef,
+      toggleImgFullScreen,
+      imgRef,
+      toggleVideoFullScreen,
+      videoRef
+    };
+  },
+
+  render(_ctx) {
+    return (
+      <>
+        <p>div</p>
+        <div ref="divRef" style={{ color: '#613400', background: '#fff1b8' }}>
+          <p>{_ctx.isDivFullScreen ? '全屏' : '非全屏'}</p>
+          <button onClick={_ctx.itoggleDivFullScreen}>切换</button>
+        </div>
+
+        <p>img</p>
+        <div>
+          <img ref="imgRef" style={{ width: 200 }} src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606454660661&di=de25e03df6c307d3fe7769ca99463ba3&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F30%2F29%2F01300000201438121627296084016.jpg" />
+          <button onClick={_ctx.toggleImgFullScreen}>切换</button>
+        </div>
+
+        <p>video</p>
+        <div>
+          <video ref="videoRef" src="blob:https://baike.baidu.com/6a259dd0-aa95-42a2-b547-eecac222fcc1" />
+          <button onClick={_ctx.toggleVideoFullScreen}>切换</button>
+        </div>
+      </>
+    );
+  },
+} as Component;

src/useFullScreen/__test__/index.spec.tsx

@@ -0,0 +1,3 @@
+// import { mount } from '@vue/test-utils';
+// import { ref } from 'vue';
+// import useFullScreen from '../index';

src/useFullScreen/index.ts

@@ -0,0 +1,70 @@
+import { Ref, ref } from 'vue';
+
+export default function useFullScreen(
+  target: Ref<HTMLElement | Document | Window>
+) {
+  const isFullScreen = ref(false) as Ref;
+
+  /**
+   * document.fullscreenEnabled        Standard
+   * document.webkitfullscreenEnabled  Chrome、Safari、Opera
+   * document.mozfullscreenEnabled     Firefox
+   * document.msfullscreenEnabled      IE、Edge
+   */
+  const fullscreenEnabled = (document as any).fullscreenEnabled ||
+    (document as any).webkitfullscreenEnabled ||
+    (document as any).mozfullscreenEnabled ||
+    (document as any).msfullscreenEnabled;
+
+  function toggleFullScreen() {
+    if (!fullscreenEnabled) {
+      alert('浏览器当前不能全屏');
+      return
+    }
+
+    /**
+     * document.exitFullscreen          Standard
+     * document.webkitCancelFullScreen  Chrome、Safari、Opera
+     * document.mozCancelFullScreen     Firefox
+     * document.msExitFullscreen        IE、Edge
+     */
+
+    // close the full screen
+    if (isFullScreen.value) {
+      if ((document as any).exitFullscreen) {
+        (document as any).exitFullscreen();
+      } else if ((document as any).webkitCancelFullScreen) {
+        (document as any).webkitCancelFullScreen();
+      } else if ((document as any).mozCancelFullScreen) {
+        (document as any).mozCancelFullScreen();
+      } else if ((document as any).msExitFullscreen) {
+        (document as any).msExitFullscreen();
+      }
+
+      isFullScreen.value = !isFullScreen.value
+      return
+    }
+
+    /**
+     * document.requestFullscreen        Standard
+     * document.webkitRequestFullScreen  Chrome、Safari、Opera
+     * document.mozRequestFullScreen     Firefox
+     * document.msRequestFullscreen      IE、Edge
+     */
+
+    // open the full screen
+    const doc = target.value;
+    if ((doc as any).requestFullscreen) {
+      (doc as any).requestFullscreen();
+    } else if ((doc as any).webkitRequestFullScreen) {
+      (doc as any).webkitRequestFullScreen();
+    } else if ((doc as any).mozRequestFullScreen) {
+      (doc as any).mozRequestFullScreen();
+    } else if ((doc as any).msRequestFullscreen) {
+      (doc as any).msRequestFullscreen();
+    }
+    isFullScreen.value = !isFullScreen.value
+  }
+
+  return [isFullScreen, toggleFullScreen]
+}