diff --git a/devui/fullscreen/index.ts b/devui/fullscreen/index.ts
index 1cc6c868a5fbb83c25948d1d46f5491a5ed6babe..6318965ea8bb7fa908c05b79a61c18287c93a854 100644
--- a/devui/fullscreen/index.ts
+++ b/devui/fullscreen/index.ts
@@ -10,7 +10,7 @@ export { Fullscreen }
 export default {
   title: 'Fullscreen 全屏',
   category: '通用',
-  status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  status: '已完成',
   install(app: App): void {
     
     app.use(Fullscreen as any)
diff --git a/devui/fullscreen/src/fullscreen.scss b/devui/fullscreen/src/fullscreen.scss
index c0f01d4ebdad1f5899a3c517419f5cfa368d8ca7..38689d367ee1c53be852d47acee4dbbbfec05bf9 100644
--- a/devui/fullscreen/src/fullscreen.scss
+++ b/devui/fullscreen/src/fullscreen.scss
@@ -14,3 +14,7 @@
 .devui-fullscreen {
   overflow: hidden;
 }
+
+:not(:root):fullscreen::backdrop {
+  background: #ffffff;
+}
diff --git a/devui/fullscreen/src/fullscreen.tsx b/devui/fullscreen/src/fullscreen.tsx
index 6f89226a6eb03c1974d4d0a7a21c8f15c5516ae5..6513679736d2acf4fa44a543a8e88818cd64a4da 100644
--- a/devui/fullscreen/src/fullscreen.tsx
+++ b/devui/fullscreen/src/fullscreen.tsx
@@ -5,7 +5,6 @@ import {
   useSlots,
   renderSlot,
   onMounted,
-  onUnmounted,
   ref
 } from 'vue'
 import { fullscreenProps, FullscreenProps } from './fullscreen-types'
@@ -18,6 +17,7 @@ export default defineComponent({
 
     let currentTarget = ref(null)
     const isFullscreen = ref(false)
+    const slotElement = ref(null)
     const doc = document
     
     const onFullScreenChange = () => {
@@ -44,6 +44,8 @@ export default defineComponent({
         targetElement.setAttribute('style', `z-index: ${props.zIndex}`)
       }
     }
+
+    // 退出正常全屏
     const exitNormalFullscreen = (targetElement: HTMLElement) => {
       targetElement.classList.remove('fullscreen')
       targetElement.style.zIndex = null
@@ -51,7 +53,8 @@ export default defineComponent({
     
     // 事件监听
     const handleFullscreen = async () => {
-      const targetElement = document.querySelector('[fullscreen-target]')
+      // const targetElement = document.querySelector('[fullscreen-target]')
+      const targetElement = slotElement.value.querySelector('[fullscreen-target]')
       let isFull = false
       // 判断模式
       if (props.mode === 'normal') { // 浏览器全屏
@@ -70,16 +73,15 @@ export default defineComponent({
         if (document.fullscreenElement || document.msFullscreenElement || document.webkitFullscreenElement) {
           isFull = await exitImmersiveFullScreen(document)
         } else {
-          isFull = await launchImmersiveFullScreen(document.documentElement)
+          isFull = await launchImmersiveFullScreen(currentTarget)
         }
       }
-
       isFullscreen.value = isFull
       ctx.emit('fullscreenLaunch', isFullscreen.value)
     }
 
     const addFullScreenStyle = (): void => {
-      document.getElementsByTagName('html')[0].classList.add('devui-fullscreen');
+      document.getElementsByTagName('html')[0].classList.add('devui-fullscreen')
     }
 
     const removeFullScreenStyle = (): void => {
@@ -115,47 +117,36 @@ export default defineComponent({
     }
 
     const handleKeyDown = (event) => {
-      if (event.keyCode === 'ESC_KEYCODE') { // 按ESC键退出全屏
+      if (event.keyCode === 27) { // 按ESC键退出全屏
         if (isFullscreen.value) {
-          const targetElement = document.querySelector('[fullscreen-target]')
+          const targetElement = slotElement.value.querySelector('[fullscreen-target]')
           if (props.mode === 'normal') {
             removeFullScreenStyle()
             exitNormalFullscreen(targetElement)
           } else {
             if (doc.fullscreenElement) { exitImmersiveFullScreen(doc) }
           }
-          ctx.emit('fullscreenLaunch', isFullscreen.value)
           isFullscreen.value = false
+          ctx.emit('fullscreenLaunch', isFullscreen.value)
         }
       }
     }
     
     onMounted (() => {
-      const btnLaunch = document.querySelector('[fullscreen-launch]')
+      const btnLaunch = slotElement.value.querySelector('[fullscreen-launch]')
       if (btnLaunch) { btnLaunch.addEventListener('click', handleFullscreen) }
       document.addEventListener('fullscreenchange', onFullScreenChange)
       document.addEventListener('MSFullscreenChange', onFullScreenChange)
       document.addEventListener('webkitfullscreenchange', onFullScreenChange)
       document.addEventListener('keydown', handleKeyDown)
     })
-    onUnmounted (() => {
-      document.removeEventListener('fullscreenchange', onFullScreenChange)
-      document.removeEventListener('MSFullscreenChange', onFullScreenChange)
-      document.removeEventListener('webkitfullscreenchange', onFullScreenChange)
-      document.removeEventListener('keydown', handleKeyDown)
-      const btnLaunch = document.querySelector('[fullscreen-launch]')
-      if (btnLaunch) { btnLaunch.removeEventListener('click', handleFullscreen) }
-    })
     return () => {
       const defaultSlot = renderSlot(useSlots(), 'default')
       // fullscreen-target 全屏元素属性
       // fullscreen-launch 全屏事件属性
       // if (defaultSlot.children.length === 0) throw new Error('未发现全屏元素')
-      // const targetElement = document.querySelector('[fullscreen-target]')
       return (
-        <div class="d-fullscreen">
-          <div>{ defaultSlot }</div>
-        </div>
+        <div ref={slotElement}>{ defaultSlot }</div>
       )
     }
   }
diff --git a/docs/.vitepress/config/sidebar.ts b/docs/.vitepress/config/sidebar.ts
index aca6bee619416b36d9e9e6fda5be2b21341e973a..de3dc7ab0b7acf10c479504947e1b36fe8dde27b 100644
--- a/docs/.vitepress/config/sidebar.ts
+++ b/docs/.vitepress/config/sidebar.ts
@@ -7,7 +7,7 @@ const sidebar = {
         { text: 'Button 按钮', link: '/components/button/', status: '已完成' },
         { text: 'Icon 图标', link: '/components/icon/', status: '已完成' },
         { text: 'DragDrop 拖拽', link: '/components/dragdrop/' },
-        { text: 'Fullscreen 全屏', link: '/components/fullscreen/' },
+        { text: 'Fullscreen 全屏', link: '/components/fullscreen/'  },
         { text: 'Panel 面板', link: '/components/panel/', status: '已完成' },
         { text: 'Search 搜索框', link: '/components/search/', status: '已完成' },
         { text: 'Status 状态', link: '/components/status/', status: '已完成' },
diff --git a/docs/components/fullscreen/index.md b/docs/components/fullscreen/index.md
index 945770e76e932f80577b5098dd8ea993f1796749..bf943b24e8bda83821dd9b709be11a76559a3b77 100644
--- a/docs/components/fullscreen/index.md
+++ b/docs/components/fullscreen/index.md
@@ -8,9 +8,39 @@
 
 ### 沉浸式全屏
 
-充满整个显示器屏幕的沉浸式全屏（待完善）。
+充满整个显示器屏幕的沉浸式全屏。
 
+:::demo
 
+```vue
+<template>
+  <d-fullscreen :zIndex='100' @fullscreenLaunch='fullscreenLaunch'>
+    <div fullscreen-target>
+      <d-button fullscreen-launch>{{btnContent}}</d-button>
+    </div>
+  </d-fullscreen>
+</template>
+<script>
+import { ref } from 'vue'
+export default {
+  setup() {
+    const btnContent = ref('FullScreen')
+    const fullscreenLaunch = (val) => {
+      if (val) {
+        btnContent.value = 'Exit'
+      } else {
+        btnContent.value = 'FullScreen'
+      }
+    }
+    return {
+      btnContent,
+      fullscreenLaunch
+    }
+  }
+}
+</script>
+```
+:::
 
 ### 普通全屏
 
@@ -42,7 +72,7 @@ export default {
       btnContent,
       fullscreenLaunch
     }
-  },
+  }
 }
 </script>
 ```
@@ -54,4 +84,10 @@ export default {
 | :---------: | :------: | :-------: | :----------------------- |
 |    mode     | `immersive` 或 `normal` |    `immersive`    | 可选，设置全屏模式          |
 |    zIndex     | `Number` |  10  | 可选，设置全屏层级           |
-|    fullscreenLaunch    | `EventEmitter<boolean>` |  | 可选，全屏之后的回调           |
\ No newline at end of file
+|    fullscreenLaunch    | `EventEmitter<boolean>` |  | 可选，全屏之后的回调           |
+
+**fullscreen-target** 选择器
+必含指令，内容投影，设置**需要全屏的元素**沉浸式全屏。
+
+**fullscreen-launch** 选择器
+必含指令，内容投影，设置**触发**进入全屏的按钮沉浸式全屏。
\ No newline at end of file