点击

src/views/courseware-play/component/audio-item/index.tsx

@@ -36,7 +36,7 @@ export default defineComponent({
       default: false
     }
   },
-  emits: ['loadedmetadata', 'togglePlay', 'ended', 'reset'],
+  emits: ['loadedmetadata', 'togglePlay', 'ended', 'reset', 'close'],
   setup(props, { emit }) {
     const { item, isEmtry } = toRefs(props);
     const data = reactive({
@@ -149,7 +149,14 @@ export default defineComponent({
           </div>
         </div>
 
-        <div class={[styles.controls, props.showModel ? '' : styles.hide]}>
+        <div
+          class={[styles.controls, props.showModel ? '' : styles.hide]}
+          onClick={(e: Event) => {
+            e.stopPropagation();
+          }}
+          onTouchmove={(e: TouchEvent) => {
+            emit('close');
+          }}>
           <div class={styles.time}>
             <div>{getSecondRPM(data.currentTime)}</div>
             <div>{getSecondRPM(data.duration)}</div>
@@ -164,7 +171,7 @@ export default defineComponent({
               onUpdate:value={val => handleChangeTime(val)}
             />
           </div>
-          <div class={styles.actions}>
+          <div class={styles.actions} onClick={() => emit('close')}>
             <div class={styles.actionBtn} onClick={() => onToggleAudio()}>
               <img src={data.playState === 'pause' ? iconplay : iconpause} />
             </div>

src/views/courseware-play/component/video-item/index.tsx

@@ -35,7 +35,7 @@ export default defineComponent({
       default: false
     }
   },
-  emits: ['loadedmetadata', 'togglePlay', 'ended', 'reset'],
+  emits: ['loadedmetadata', 'togglePlay', 'ended', 'reset', 'close'],
   setup(props, { emit }) {
     const { item, isEmtry } = toRefs(props);
     const data = reactive({
@@ -127,7 +127,14 @@ export default defineComponent({
           </div>
         </div>
 
-        <div class={[styles.controls, props.showModel ? '' : styles.hide]}>
+        <div
+          class={[styles.controls, props.showModel ? '' : styles.hide]}
+          onClick={(e: Event) => {
+            e.stopPropagation();
+          }}
+          onTouchmove={(e: TouchEvent) => {
+            emit('close');
+          }}>
           <div class={styles.time}>
             <div>{getSecondRPM(data.currentTime)}</div>
             <div>{getSecondRPM(data.duration)}</div>
@@ -142,7 +149,7 @@ export default defineComponent({
               onUpdate:value={val => handleChangeTime(val)}
             />
           </div>
-          <div class={styles.actions}>
+          <div class={styles.actions} onClick={() => emit('close')}>
             <div
               class={styles.actionBtn}
               onClick={() =>

src/views/courseware-play/index.tsx

@@ -194,7 +194,7 @@ export default defineComponent({
     const setModelOpen = () => {
       clearTimeout(activeData.timer);
       closeToast();
-      activeData.model = true;
+      activeData.model = !activeData.model;
       activeData.timer = setTimeout(() => {
         activeData.model = false;
       }, 4000);
@@ -297,7 +297,7 @@ export default defineComponent({
     };
     return () => (
       <div id="playContent" class={styles.playContent}>
-        <div onClick={() => setModelOpen()} onTouchmove={() => setModelOpen()}>
+        <div onClick={() => setModelOpen()}>
           <div
             class={styles.coursewarePlay}
             style={{ width: parentContainer.width }}>
@@ -366,6 +366,12 @@ export default defineComponent({
                             handleSwipeChange(_index);
                           }
                         }}
+                        onClose={() => {
+                          clearTimeout(activeData.timer);
+                          activeData.timer = setTimeout(() => {
+                            activeData.model = false;
+                          }, 4000);
+                        }}
                       />
                     )}
                     {m.type === 'MUSIC' && (