分享界面

src/directives/v-click-outside.js

@@ -0,0 +1,28 @@
+export default {
+  install(Vue) {
+    Vue.directive('click-outside', {
+      bind(el, binding) {
+        function documentHandler(e) {
+          if (el.contains(e.target)) {
+            return false
+          }
+          if (binding.expression) {
+            binding.value(e)
+          }
+        }
+        el.__vueClickOutside__ = documentHandler
+        if (binding.modifiers.click) {
+          document.addEventListener('click', documentHandler)
+        }
+        if (binding.modifiers.mousedown) {
+          document.addEventListener('mousedown', documentHandler)
+        }
+      },
+      unbind(el) {
+        document.removeEventListener('click', el.__vueClickOutside__)
+        document.removeEventListener('mousedown', el.__vueClickOutside__)
+        delete el.__vueClickOutside__
+      }
+    })
+  }
+}

src/main.js

@@ -6,8 +6,8 @@ import router from './router'
 import axios from 'axios'
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
-// 图片懒加载
 import VueLazyLoad from 'vue-lazyload'
+import clickOutside from "@/directives/v-click-outside.js"
 
 // 禁用上下文菜单
 document.oncontextmenu = function(e) {
@@ -18,11 +18,12 @@ Vue.use(VueLazyLoad, {
   error: require('@/assets/images/IMGerror.png'),
   loading: require('@/assets/images/loading.gif')
 })
+Vue.use(Viewer)
+Vue.use(clickOutside)
 
 Vue.config.productionTip = false
 Vue.prototype.$http = axios
 
-Vue.use(Viewer)
 
 import './assets/base.css'
 new Vue({

src/views/HomeWeb.vue

@@ -56,7 +56,7 @@
             </div>
           </transition>
         </button> -->
-        <button>
+        <button @click="onClickShare">
           <img
             class="share"
             src="@/assets/images/share.png"
@@ -68,6 +68,7 @@
 
       <div
         v-if="isShowVideos"
+        v-show="!isShowShare"
         class="swiper-wrapper-mine video-wrap"
       >
         <div
@@ -99,7 +100,8 @@
       </div>
 
       <div
-        v-show="isShowImages"
+        v-if="isShowImages"
+        v-show="!isShowShare"
         class="swiper-wrapper-mine image-wrap"
       >
         <div
@@ -147,6 +149,25 @@
           <div class="swiper-button-next" />
         </div>
       </div>
+
+      <div
+        v-if="isShowShare"
+        v-click-outside.click="closeCode2d"
+        class="share-wrap"
+      >
+        <img
+          src="@/assets/images/code2d.png"
+          alt=""
+          class="code"
+          draggable="false"
+        >
+        <img
+          src="@/assets/images/share-tip.png"
+          alt=""
+          class="tip"
+          draggable="false"
+        >
+      </div>
     </div>
   </div>
 </template>
@@ -169,6 +190,7 @@ export default {
       bgImg,
       titleBottomLine,
       isShowPlusOne: false,
+      isShowShare: false,
     }
   },
   computed: {
@@ -268,6 +290,16 @@ export default {
     //   })
     //   }
     // },
+    onClickShare() {
+      setTimeout(() => {
+        this.isShowShare = true
+      }, 200)
+    },
+    closeCode2d() {
+      if (this.isShowShare) {
+        this.isShowShare = false
+      }
+    }
   }
 }
 </script>
@@ -458,6 +490,24 @@ export default {
         }
       }
     }
+
+    .share-wrap {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 244px;
+      > img.code {
+        width: 300px;
+        height: 300px;
+      }
+      > img.tip {
+        position: absolute;
+        left: 50%;
+        top: calc(100% + 10px);
+        transform: translateX(-50%);
+        width: 150px;
+      }
+    }
   }
 }