vant预览图片换为组件方式使用

src/views/hzyb/activity/reportDetail.vue

@@ -85,6 +85,11 @@ const getWeek=(dateString)=>{//获取周几
 	return "周" + "日一二三四五六".charAt(date.getDay());
 }
 
+let showPreViewImg=ref(false)
+let preViewImgs=ref([])
+let preViewImgIndex=ref(0)
+const VanImagePreview = ImagePreview.Component
+
 onMounted(()=>{
     $(document).on('click', '.content-wrap img',function(event) {
 	    let imgArray = [];
@@ -95,15 +100,18 @@ onMounted(()=>{
                 let itemSrc = $(this).attr('src');
                 imgArray.push(itemSrc);
             });
+            preViewImgs.value=imgArray
+            preViewImgIndex.value=imgArray.indexOf(curImageSrc)||0
+            showPreViewImg.value=true
             // wx.previewImage({current:curImageSrc,urls:imgArray});
-            ImagePreview({
-                images: imgArray,
-                startPosition: imgArray.indexOf(curImageSrc)||0,
-                overlayStyle:{
-                    background: 'rgba(0, 0, 0, 0.9)'
-                },
-                teleport:'.report-detail'
-            });
+            // ImagePreview({
+            //     images: imgArray,
+            //     startPosition: imgArray.indexOf(curImageSrc)||0,
+            //     overlayStyle:{
+            //         background: 'rgba(0, 0, 0, 0.9)'
+            //     },
+            //     teleport:'.report-detail'
+            // });
 	    }
     })
 })
@@ -162,13 +170,15 @@ const goDetail=(e)=>{
                 <p>4、在任何情况下，本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任，客户/接受人/接受机构需自行承担全部风险。</p>
             </div>
         </div>
+        <van-image-preview v-model:show="showPreViewImg" :start-position="preViewImgIndex" :images="preViewImgs">
+        </van-image-preview>
     </div>
 </template>
 
 <style lang="scss">
 .report-detail{
     .van-popup{
-        background: rgba(0, 0, 0, 0.9) !important;
+        background: rgba(0, 0, 0, 0.3) !important;
     }
 }
 </style>

src/views/hzyb/activity/reportWeekDetail.vue

@@ -46,6 +46,11 @@ const getList = async (id) => {
 }
 getDetail();
 
+
+let showPreViewImg=ref(false)
+let preViewImgs=ref([])
+let preViewImgIndex=ref(0)
+const VanImagePreview = ImagePreview.Component
 onMounted(() => {
     $(document).on('click', '.content-wrap img', function (event) {
         let imgArray = [];
@@ -56,15 +61,18 @@ onMounted(() => {
                 let itemSrc = $(this).attr('src');
                 imgArray.push(itemSrc);
             });
+            preViewImgs.value=imgArray
+            preViewImgIndex.value=imgArray.indexOf(curImageSrc)||0
+            showPreViewImg.value=true
             // wx.previewImage({ current: curImageSrc, urls: imgArray });
-            ImagePreview({
-                images: imgArray,
-                startPosition: imgArray.indexOf(curImageSrc)||0,
-                overlayStyle:{
-                    background: 'rgba(0, 0, 0, 0.9)'
-                },
-                teleport:'.report-detail'
-            });
+            // ImagePreview({
+            //     images: imgArray,
+            //     startPosition: imgArray.indexOf(curImageSrc)||0,
+            //     overlayStyle:{
+            //         background: 'rgba(0, 0, 0, 0.9)'
+            //     },
+            //     teleport:'.report-detail'
+            // });
         }
     })
 })
@@ -134,6 +142,8 @@ onBeforeRouteUpdate(to => {
                 </div>
             </div>
         </div>
+        <van-image-preview v-model:show="showPreViewImg" :start-position="preViewImgIndex" :images="preViewImgs">
+        </van-image-preview>
     </div>
     <!-- 弹窗 -->
     <div class="tipsAlert" id="tipsAlert">
@@ -164,7 +174,7 @@ onBeforeRouteUpdate(to => {
 <style lang="scss">
 .report-detail{
     .van-popup{
-        background: rgba(0, 0, 0, 0.9) !important;
+        background: rgba(0, 0, 0, 0.3) !important;
     }
 }
 </style>