modal 区域

src/components/SubNavigation.vue

@@ -4,9 +4,9 @@
     <p class="title">{{ title }}</p>
     <img class="menu" :src="Menu" v-if="!drawer" @click="openDrawer" />
     <div class="menu" v-else></div>
-    <div class="modal_drawer" v-if="drawer">
+    <div class="modal_drawer" v-if="drawer" @click="hidePanel">
       <img :src="Close" class="close" alt="" @click="drawer = false" />
-      <div class="content">
+      <div class="content" id="sub_navi_tab">
         <div class="icon_wrap">
           <p class="icon"></p>
         </div>
@@ -38,6 +38,17 @@ const openDrawer = () => {
 const toPage = path => {
   router.push(path)
 }
+
+const hidePanel = event => {
+  let dom = document.getElementById('sub_navi_tab')
+  if (dom) {
+    if (!dom.contains(event.target)) {
+      //这句是说如果我们点击到了id为child以外的区域
+      drawer.value = false
+    }
+  }
+}
+
 const props = defineProps({
   title: {
     type: String,

src/components/Top.vue

@@ -8,9 +8,9 @@
       v-if="!drawer"
       @click="openDrawer"
     />
-    <div class="modal_drawer" v-if="drawer">
+    <div class="modal_drawer" v-if="drawer" @click="hidePanel">
       <img :src="Close" class="close" alt="" @click="drawer = false" />
-      <div class="content">
+      <div class="content" id="content_tab">
         <div class="icon_wrap">
           <p class="icon"></p>
         </div>
@@ -47,6 +47,16 @@ const toPage = path => {
   router.push(path)
 }
 
+const hidePanel = event => {
+  let dom = document.getElementById('content_tab')
+  if (dom) {
+    if (!dom.contains(event.target)) {
+      //这句是说如果我们点击到了id为child以外的区域
+      drawer.value = false
+    }
+  }
+}
+
 onMounted(() => {
   window.addEventListener('scroll', scrollToTop)
 })
@@ -136,6 +146,7 @@ const scrollToTop = () => {
           font-family: Alibaba PuHuiTi;
           font-weight: 400;
           color: #000000;
+          width: 100%;
           flex: 1;
           display: flex;
           align-items: center;