修复页面跳转时，弹窗没有关闭且不可关闭的问题

src/components/AddVideoPlay.vue

@@ -7,7 +7,7 @@
     <div v-show="!showFirstVideo">
     <div v-show="!showFirstVideo">
       <video ref="videoSecond" class="video-default2" :src="video2" @ended="onVideoEnded" @canplay="canplay2"></video>
       <video ref="videoSecond" class="video-default2" :src="video2" @ended="onVideoEnded" @canplay="canplay2"></video>
     </div>
     </div>
-    <ConfirmDialog v-model="confirmVisible" :footer="footerStatus" @confirm="confirm">
+    <ConfirmDialog v-model="confirmVisible" :closeOnOverlayClick="false" :footer="footerStatus" @confirm="confirm">
       <template #body>
       <template #body>
         <template v-if="loading">
         <template v-if="loading">
           <Loading></Loading>
           <Loading></Loading>
@@ -26,6 +26,7 @@ import ConfirmDialog from '@/components/ConfirmDialog.vue';
 import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { useStore } from 'vuex';
 import Loading from '@/components/Loading/FirstCircle.vue';
 import Loading from '@/components/Loading/FirstCircle.vue';
+import { onBeforeRouteLeave } from 'vue-router';
 
 
 const props = defineProps<{
 const props = defineProps<{
   video1: string;
   video1: string;
@@ -47,6 +48,7 @@ const showFirstVideo = ref(true);
 const videoSecondPlay = ref(false);
 const videoSecondPlay = ref(false);
 
 
 const confirmVisible = ref(true);
 const confirmVisible = ref(true);
+
 // 第二个视频是否首次播放
 // 第二个视频是否首次播放
 const videoSecondFirstPlay = ref(true);
 const videoSecondFirstPlay = ref(true);
 
 
@@ -57,6 +59,11 @@ let interval = null;
 
 
 const total = ref(0);
 const total = ref(0);
 
 
+// 离开前先关闭弹窗
+onBeforeRouteLeave((to, from, next) => {
+  confirmVisible.value = false;
+  next();
+});
 // 打开计时
 // 打开计时
 const openInterval = () => {
 const openInterval = () => {
   interval = setInterval(() => {
   interval = setInterval(() => {

src/components/ConfirmDialog.vue

@@ -6,6 +6,7 @@
     :destroyOnClose="destroyOnClose"
     :destroyOnClose="destroyOnClose"
     class="c-dialog-confirm-default"
     class="c-dialog-confirm-default"
     :placement="placement"
     :placement="placement"
+    :closeOnOverlayClick="closeOnOverlayClick"
   >
   >
     <template #body>
     <template #body>
       <div class="custom-confirm-dialog-body">
       <div class="custom-confirm-dialog-body">
@@ -38,6 +39,7 @@ const props = withDefaults(
     destroyOnClose?: boolean;
     destroyOnClose?: boolean;
     className?: string;
     className?: string;
     title?: string;
     title?: string;
+    closeOnOverlayClick?: boolean;
   }>(),
   }>(),
   {
   {
     footer: null,
     footer: null,
@@ -45,6 +47,7 @@ const props = withDefaults(
     destroyOnClose: false,
     destroyOnClose: false,
     className: '',
     className: '',
     title: '',
     title: '',
+    closeOnOverlayClick: true,
   },
   },
 );
 );
 const emit = defineEmits(['update:modelValue', 'confirm']);
 const emit = defineEmits(['update:modelValue', 'confirm']);

src/router/index.ts

 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import { getSiteRouter } from '../config/site';
 import { getSiteRouter } from '../config/site';
+import store from '@/store';
 
 
 const routerList = getSiteRouter();
 const routerList = getSiteRouter();