From 832e4250e6c825778ed5185bc82832de5d2d1a19 Mon Sep 17 00:00:00 2001
From: chenjiajian <770230504@qq.com>
Date: Mon, 3 Apr 2023 17:32:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=9B=BE=E7=89=87=E3=80=81?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E9=A2=84=E8=A7=88=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/image/index.js   | 12 ++++++++++--
 src/image/preview.js | 15 ++++++++++-----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/image/index.js b/src/image/index.js
index 090812c..9e51555 100644
--- a/src/image/index.js
+++ b/src/image/index.js
@@ -6,6 +6,7 @@
 
 import { css, html, Component, styleMap } from '@bd/core'
 import '../icon/index.js'
+import './preview.js'
 class Image extends Component {
   static props = {
     src: '',
@@ -55,6 +56,11 @@ class Image extends Component {
     this.status = 'loaded'
     this.$requestUpdate()
   }
+  onClick() {
+    if (this.previewSrcList.length) {
+      window.imagePreview(this.previewSrcList)
+    }
+  }
   render() {
     let {
       lazy,
@@ -62,10 +68,12 @@ class Image extends Component {
       status,
       fit,
       alt,
+      previewSrcList,
       'referrer-policy': referrerPolicy
     } = this
     let styles = styleMap({
-      'object-fit': fit
+      'object-fit': fit,
+      cursor: previewSrcList.length ? 'pointer' : 'default'
     })
     let $slot = ''
     if (status === 'loading') {
@@ -76,7 +84,7 @@ class Image extends Component {
       </slot>`
     }
     return html`
-      <div class="wc-image" ref="wrapper">
+      <div class="wc-image" ref="wrapper" @click=${this.onClick}>
         <img
           style=${styles}
           src=${src}
diff --git a/src/image/preview.js b/src/image/preview.js
index 9489c06..eed818a 100644
--- a/src/image/preview.js
+++ b/src/image/preview.js
@@ -14,8 +14,8 @@ class ImagePreview extends Component {
       attribute: false
     },
     visible: false,
-    maxZoom: 3,
-    minZoom: 1 / 3
+    'max-zoom': 3,
+    'min-zoom': 1 / 3
   }
   active = 0
   static styles = css`
@@ -129,7 +129,8 @@ class ImagePreview extends Component {
     this.setZoom(this.#state.scale / 1.2)
   }
   setZoom(val) {
-    const { maxZoom, minZoom } = this
+    const maxZoom = this['max-zoom']
+    const minZoom = this['min-zoom']
     val = Math.max(val, minZoom)
     val = Math.min(val, maxZoom)
     val = val.toFixed(2)
@@ -259,8 +260,12 @@ ImagePreview.reg('image-preview')
 const instance = new ImagePreview()
 document.body.appendChild(instance)
 
-window.imagePreview = function (list) {
-  instance.list = list
+window.imagePreview = function (options) {
+  if (Array.isArray(options)) {
+    instance.list = options
+  } else {
+    Object.assign(instance, options)
+  }
   instance.visible = true
   return instance
 }