优化视频全屏时的弹幕输入框显示隐藏

src/components/VideoBox.vue

@@ -2,6 +2,7 @@
 import {reactive, ref} from 'vue'
 import {apiVideoDanmuSend} from '@/api/video'
 import moment from 'moment'
+import {debounce} from 'lodash'
 
 const props=defineProps({
     videoInfo:null,
@@ -21,6 +22,7 @@ let danmuState=reactive({
     temList:props.videoInfo.bullet_chat_list||[],
     list:[],
     content:'',//弹幕内容
+    inputFocus:false,
 })
 
 // 添加弹幕到页面
@@ -104,10 +106,15 @@ const handleVideoSpeedChange=(item)=>{
 // 鼠标进入视频区域
 const handleMouseMoveInVideo=()=>{
     videoState.isHover=true
+    hideVideoControlBox()
 }
 const handleMouseOutVideo=()=>{
     videoState.isHover=false
 }
+//隐藏控制器
+const hideVideoControlBox=debounce(()=>{
+    videoState.isHover=false
+},2500)
 
 // 新建一条弹幕
 const handleSendDanmu=async ()=>{
@@ -137,8 +144,8 @@ const handleClickOutSideDanmuStatusChange=()=>{
             :class="[
                 'video-content-box',
                 videoState.isPageFullScreen?'page-full-screen':''
-            ]" 
-            @mouseover="handleMouseMoveInVideo" 
+            ]"
+            @mousemove="handleMouseMoveInVideo"
             @mouseout="handleMouseOutVideo"
         >
             <video 
@@ -177,10 +184,10 @@ const handleClickOutSideDanmuStatusChange=()=>{
             </div>
             
             <!-- 全屏时发送弹幕模块 -->
-            <div class="flex inside-danmu-input-box" v-if="videoState.isPageFullScreen">
+            <div class="flex inside-danmu-input-box" v-show="videoState.isPageFullScreen&&(videoState.isHover||!videoState.play||danmuState.inputFocus)">
                 <div :class="danmuState.show?'show-icon':'close-icon'" @click.stop="danmuState.show=!danmuState.show"></div>
                 <div class="flex input-box">
-                    <input v-model="danmuState.content" type="text" maxlength="50" placeholder="发个友善的弹幕见证当下~" @keyup.enter="handleSendDanmu">
+                    <input @focus="danmuState.inputFocus=true" @blur="danmuState.inputFocus=false" v-model="danmuState.content" type="text" maxlength="50" placeholder="发个友善的弹幕见证当下~" @keyup.enter="handleSendDanmu">
                     <span class="btn" @click.stop="handleSendDanmu">发送</span>
                 </div>
                 <div style="position:relative" v-if="!$store.state.isMac">