图片预览

package.json

@@ -18,6 +18,7 @@
     "tailwindcss": "^3.0.23",
     "vant": "^2.12.47",
     "vue": "^2.6.11",
+    "vue-photo-preview": "^1.1.3",
     "vue-preview-image-mobile": "^0.1.1",
     "vue-router": "3.5.3",
     "vue-swiper-component": "^2.1.3",

src/components/image.vue

@@ -1,18 +1,20 @@
 <template>
   <div v-if="!options.text" @click="click" class="image mb-6 last:mb-0 mx-auto">
-    <img :style="options.style" :src="options.image" @click="handleClick" />
+    <img v-if="options.preview" :style="options.style" :src="options.image" :large="options.image.split('?')[0]" :preview="1" @click="handleClick"/>
+    <img v-else :style="options.style" :src="options.image"/>
     <div v-if="options.marks" class="mark flex justify-center items-center">
       <span :style="options.marksStyle" v-html="options.marks"></span>
     </div>
   </div>
   <div v-else class="image mb-6 last:mb-0 mx-auto">
-    <img class="mb-1" :style="options.style" :src="options.image" @click="handleClick" />
+    <img  v-if="options.preview" class="mb-1" :style="options.style" :src="options.image" :large="options.image.split('?')[0]"  :preview="1" @click="handleClick"/>
+    <img v-else class="mb-1" :style="options.style" :src="options.image"/>
     <v-text :options="descOptions"></v-text>
   </div>
 </template>
 <script>
 import Base from './base';
-import EventBus from '@/utils/eventBus.js';
+// import EventBus from '@/utils/eventBus.js';
 
 export default {
   name: 'v-image',
@@ -30,11 +32,12 @@ export default {
   },
   methods: {
     handleClick(){
-      const { image, preview } = this.options;
-      console.log('1');
-      this.click();
-      if(!preview) return;
-      EventBus.$emit('preview', image);
+      const { preview } = this.options;
+      console.log("preview", preview);
+      this.click()
+      if(preview==undefined) return;
+      console.log("preview", preview);
+      this.$previewRefresh()
     }
   }
 }

src/main.js

@@ -3,13 +3,24 @@ import Vue from 'vue';
 import router from '@/router/index'
 import store from './store'
 import components from './components';
-import PreviewImage from 'vue-preview-image-mobile';
-import 'vue-preview-image-mobile/packages/preview-image/index.less'
+import PreviewImage from 'vue-photo-preview';
+import 'vue-photo-preview/dist/skin.css'
 import App from './App.vue';
 
 Vue.config.productionTip = false
 Vue.use(components);
-Vue.use(PreviewImage)
+Vue.use(PreviewImage, {
+  fullscreenEl: false,
+  closeEl: false,
+  tapToClose: true, //点击滑动区域应关闭图库
+  shareEl: false, //控制是否显示分享按钮
+  zoomEl: true, //控制是否显示放大缩小按钮
+  counterEl: true, //控制是否显示左上角图片数量按钮
+  arrowEl: true, //控制如图的左右箭头（pc浏览器模拟手机时）
+  tapToToggleControls: true, //点击应切换控件的可见性
+  clickToCloseNonZoomable: true ,//点击图片应关闭图库，仅当图像小于视口的大小时
+})
+
 
 new Vue({
   store,

src/views/page.vue

@@ -24,6 +24,7 @@ export default {
   data(){
     return {
       loading: false,
+      backMain:false,
       page: undefined,
       isMain: false,
       background:"",
@@ -81,12 +82,12 @@ export default {
       title && (document.title = title);
     },
     init(){
-      let {uuid} = this.$route.params;
+      let {uuid, id} = this.$route.params;
       const { data } = this.$store.state.pages;
       if(data) {
         return this.getPageInfo();
       }
-
+      this.backMain = (id != 'main');
       if(this.loading) return;
       this.loading = true;
       fetch("paper.getpaper", {uuid}).then((res) => {
@@ -101,7 +102,18 @@ export default {
       })
     },
     back(){
-      this.$router.back();
+      // 分享二级页面，回到主页
+      if(this.backMain){
+        this.$router.push({
+          name: 'page',
+          params: {
+            id: 'main'
+          }
+        });
+        this.backMain = false;
+      }else{
+        this.$router.back();
+      }
     }
   }
 }
@@ -111,7 +123,7 @@ export default {
   position: fixed;
   right: 1rem;
   top: 1rem;
-  z-index: 100000;
+  z-index: 100;
   border-radius: 1rem;
   padding: 0.5rem 1rem;
   line-height: 1;