123

src/components/imgModal/imgModal.js

@@ -0,0 +1,19 @@
+import { createApp } from 'vue';
+import imgModalPopup from '@/components/imgModal/index.vue'
+
+export default function useImgModalPopup() {
+    function showImgModal(obj) {
+        const instance = createApp(imgModalPopup,{
+            //监听消息关闭事件
+            onClose:()=>{
+                instance.unmount();
+                document.body.removeChild(mountNode);
+            }
+        });
+        const mountNode = document.createElement('div');
+        document.body.appendChild(mountNode);
+        const vm = instance.mount(mountNode);
+        vm.showImgModal(obj)
+    }
+    return { showImgModal };
+}

src/components/imgModal/index.vue

@@ -5,34 +5,31 @@
         <img class="w-525px h-87px" src="@/assets/image/cddfdf.png" alt="">
       </div>
       <div class="bg-[url('@/assets/image/zu3327@2x.png')] w-1173px h-1489px bg-cover mt-90px flex flex-col items-center pt-75px">
-        <img src="@/assets/image/sdfasdfx.png" class="w-1030px h-1210px" alt="">
+        <div class="w-1030px h-1020px flex flex-col items-center">
-        <div class="bg-[url('@/assets/image/z3255@2x.png')] w-600px h-98px bg-cover text-#fff text-40px flex justify-center items-center mt-48px">关闭</div>
+          <img :src="imgUrl" alt="" class="max-w-1030px max-h-1020px">
+        </div>
+        <div class="bg-[url('@/assets/image/z3255@2x.png')] w-600px h-98px bg-cover text-#fff text-40px flex justify-center items-center mt-48px" @click="closeModal">关闭</div>
       </div>
     </div>
   </teleport>
 </template>
 
 <script setup>
-import { ref, defineEmits ,watch} from 'vue';
+import { ref,defineEmits} from 'vue';
-
+const show=ref(false)
-const props = defineProps({
+const imgUrl=ref('')
-  modelValue: {
+const emit = defineEmits(['close']);
-    type: Boolean,
+const closeModal=()=>{
-    default: false
+  show.value=false
-  }
+  emit('close')
-})
+}
-
+const showImgModal=({url})=>{
-const emit = defineEmits(['update:modelValue']);
+  imgUrl.value=url
-
+  show.value=true
-const show = ref(props.modelValue);
+}
-
+defineExpose({
-watch(() => props.modelValue, (newVal) => {
+  showImgModal
-  show.value = newVal;
 });
-
-const handleClose = () => {
-  emit('update:modelValue', false);
-};
 </script>
 
 <style scoped>

src/views/details/size768/index.vue

@@ -4,14 +4,16 @@ import {useAuth} from "@/store/auth/index.js";
 const {detailData} =useAuth()
 import "vant/es/image-preview/style";
 import { showImagePreview } from 'vant';
-import imgModal from '@/components/imgModal/index.vue'
+import useImgModalPopup from "@/components/imgModal/imgModal.js";
+const {showImgModal}= useImgModalPopup()
 const openMask=(src)=>{
-  showImagePreview({
+  showImgModal({url:src})
+/*  showImagePreview({
     images:[src],
     closeable: true,
-  })
+  })*/
 }
-const showModal=ref(true)
+
 </script>
 <template>
   <div class="box-border relative w-[1920px] h-screen bg-no-repeat bg-cover bg-[url('@/assets/image/gdz53@2x.png')] flex items-center flex-col">
@@ -73,7 +75,5 @@ const showModal=ref(true)
     <div>
       <img class="w-1170px h-557px fixed bottom-0 right-0" src="@/assets/image/gdz54@2x.png" alt="">
     </div>
-    <imgModal v-model:modelValue="showModal">
-    </imgModal>
   </div>
 </template>