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

@@ -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,8 +43,7 @@ onMounted(() => {
   });
   });
   const video = mp.video();
   const video = mp.video();
   // 监听原生video事件
   // 监听原生video事件
-  video &&
-    video.addEventListener('play', function (event) {
+  useEventListener(video, 'play', (event) => {
     emit('on-play', {
     emit('on-play', {
       event,
       event,
       props: props.item,
       props: props.item,

+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))
+}