feats

src/components/Image.vue

 
 // 显示详情介绍
 const onShowInfoBtn = () => {
-window.console.log(document,'document')
-  document.body.style.overflow='hidden';
-
   showInfo.value=true
 };
 
 const onCloseInfoBtn = () => {
-  document.body.style.overflow='auto';
   showInfo.value=false
 };
 

src/components/PopUp.vue

 <template>
-  <div v-if="show" class="overlay" @click="onClose">
+  <div
+    v-if="show"
+    class="overlay"
+    @click="onClose"
+  >
     <div class="warp" @click.stop>
       <img :src="info.image" class="image" alt="" />
       <div class="text" @scroll.passive="() => {}">
 </template>
 
 <script setup>
+import { onMounted, ref, watch } from 'vue';
+
 const props = defineProps({
   show: Boolean,
   info: Object,
     default: () => {},
   },
 });
+
+const origin = document.body.style.overflow;
+
+watch(() => props.show, (val) => {
+  if (val) {
+    document.body.style.overflow = 'hidden';
+  } else {
+    document.body.style.overflow = origin;
+  }
+})
+
 </script>
 
 <style lang="less" scoped>