视频组件依赖监听函数更新

@@ -17,6 +17,8 @@ import { onMounted } from 'vue';
 import banner from './banner';
 import banner from './banner';
 import videoBar from './videoBar';
 import videoBar from './videoBar';
 import status from './status';
 import status from './status';
+import { useEventListener } from '@/composables';
+
 // 视频基础属性
 // 视频基础属性
 const props = defineProps({
 const props = defineProps({
   item: Object,
   item: Object,
@@ -41,13 +43,12 @@ onMounted(() => {
   });
   });
   const video = mp.video();
   const video = mp.video();
   // 监听原生video事件
   // 监听原生video事件
-  video &&
-    video.addEventListener('play', function (event) {
-      emit('on-play', {
-        event,
-        props: props.item,
-      });
+  useEventListener(video, 'play', (event) => {
+    emit('on-play', {
+      event,
+      props: props.item,
     });
     });
+  });
 });
 });
 </script>
 </script>
 
 

+import { onMounted, onUnmounted } from 'vue'
+
 import { useVideoList } from '@/composables/useVideoList.js'
 import { useVideoList } from '@/composables/useVideoList.js'
 import { useDefaultPerf } from '@/composables/useDefaultPerf.js'
 import { useDefaultPerf } from '@/composables/useDefaultPerf.js'
 import { useBookList } from '@/composables/useBookList.js'
 import { useBookList } from '@/composables/useBookList.js'
@@ -7,3 +9,14 @@ export {
   useDefaultPerf,
   useDefaultPerf,
   useBookList
   useBookList
 }
 }
+
+/**
+ * 添加和清除 DOM 事件监听器
+ * @param {*} target 
+ * @param {*} event 
+ * @param {*} callback 
+ */
+export function useEventListener(target, event, callback) {
+  onMounted(() => target && target.addEventListener(event, callback))
+  onUnmounted(() => target && target.removeEventListener(event, callback))
+}