增加关闭按钮

@@ -128,6 +128,25 @@ export default {
   .cube-popup-mask {
     opacity: 1 !important;
   }
+
+  /* 关闭按钮 */
+  .cube-image-preview-header {
+    .image-preview-custom-close {
+      position: absolute;
+      display: block;
+      right: 10px;
+      top: 10px;
+      width: 50px;
+      height: 24px;
+      color: white;
+      font-size: 16px;
+      line-height: 24px;
+      text-align: center;
+      border: 1px solid #fff;
+      border-radius: 10px;
+      z-index: 99;
+    }
+  }
 }
 
 </style>

@@ -53,15 +53,32 @@ export default {
     showAricleImages(e) { // 点击推荐小图展示文章内大图
       this.initialIndex = parseInt(e.currentTarget.dataset.index, 10) || 0;
 
-      this.$createImagePreview({
+      let imagePreview = this.$createImagePreview({
         imgs: this.imgs,
         initialIndex: this.initialIndex,
         loop: false,
         speed: 500,
         onChange: (i) => {
           this.initialIndex = i;
+        },
+        onHide: () => {
+          console.log('hide');
         }
-      }).show();
+      }, (h) => {
+        return h('a', {
+          class: {
+            'image-preview-custom-close': true
+          },
+          slot: 'header',
+          on: {
+            click: (ev) => {
+              imagePreview.hide();
+            }
+          }
+        }, '关 闭',);
+      });
+
+      imagePreview.show();
 
       // yas
       /**

@@ -73,7 +73,7 @@
         </a>
 
         <!-- <img class="ref-img" v-lazy="prdDetailImage"/> -->
-
+        <!--推荐搭配9宫格图片-->
         <GrassArtilces :productId="productId" :listdata="articleData"></GrassArtilces>
 
         <!--尺码图片-->