fix(components): [image-viewer] fix some bugs and improve style (#5673)

* fix: fix ElImageViewer

* fix: update

* perf: perf zoomRate

docs/examples/image/image-preview.vue

@@ -4,7 +4,8 @@
       style="width: 100px; height: 100px"
       :src="url"
       :preview-src-list="srcList"
-      :initial-index="1"
+      :initial-index="4"
+      fit="cover"
     >
     </el-image>
   </div>
@@ -12,9 +13,14 @@
 
 <script lang="ts" setup>
 const url =
-  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
 const srcList = [
-  'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
-  'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
+  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
 ]
 </script>

packages/components/image-viewer/src/image-viewer.vue

@@ -63,7 +63,7 @@
         <img
           v-for="(url, i) in urlList"
           v-show="i === index"
-          ref="img"
+          :ref="(el) => (imgRefs[i] = el)"
           :key="url"
           :src="url"
           :style="imgStyle"
@@ -146,7 +146,7 @@ export default defineComponent({
     const { t } = useLocale()
     const ns = useNamespace('image-viewer')
     const wrapper = ref<HTMLDivElement>()
-    const img = ref<HTMLImageElement>()
+    const imgRefs = ref<any[]>([])
 
     const scopeEventListener = effectScope()
 
@@ -180,11 +180,27 @@ export default defineComponent({
 
     const imgStyle = computed(() => {
       const { scale, deg, offsetX, offsetY, enableTransition } = transform.value
+      let translateX = offsetX / scale
+      let translateY = offsetY / scale
+
+      switch (deg % 360) {
+        case 90:
+        case -270:
+          ;[translateX, translateY] = [translateY, -translateX]
+          break
+        case 180:
+        case -180:
+          ;[translateX, translateY] = [-translateX, -translateY]
+          break
+        case 270:
+        case -90:
+          ;[translateX, translateY] = [-translateY, translateX]
+          break
+      }
+
       const style: CSSProperties = {
-        transform: `scale(${scale}) rotate(${deg}deg)`,
+        transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,
         transition: enableTransition ? 'transform .3s' : '',
-        marginLeft: `${offsetX}px`,
-        marginTop: `${offsetY}px`,
       }
       if (mode.value.name === Mode.CONTAIN.name) {
         style.maxWidth = style.maxHeight = '100%'
@@ -231,12 +247,12 @@ export default defineComponent({
           const delta = e.wheelDelta ? e.wheelDelta : -e.detail
           if (delta > 0) {
             handleActions('zoomIn', {
-              zoomRate: 0.015,
+              zoomRate: 1.2,
               enableTransition: false,
             })
           } else {
             handleActions('zoomOut', {
-              zoomRate: 0.015,
+              zoomRate: 1.2,
               enableTransition: false,
             })
           }
@@ -264,16 +280,12 @@ export default defineComponent({
 
     function handleMouseDown(e: MouseEvent) {
       if (loading.value || e.button !== 0 || !wrapper.value) return
+      transform.value.enableTransition = false
 
       const { offsetX, offsetY } = transform.value
       const startX = e.pageX
       const startY = e.pageY
 
-      const divLeft = wrapper.value.clientLeft
-      const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth
-      const divTop = wrapper.value.clientTop
-      const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight
-
       const dragHandler = rafThrottle((ev: MouseEvent) => {
         transform.value = {
           ...transform.value,
@@ -286,17 +298,7 @@ export default defineComponent({
         'mousemove',
         dragHandler
       )
-      useEventListener(document, 'mouseup', (evt) => {
-        const mouseX = evt.pageX
-        const mouseY = evt.pageY
-        if (
-          mouseX < divLeft ||
-          mouseX > divRight ||
-          mouseY < divTop ||
-          mouseY > divBottom
-        ) {
-          reset()
-        }
+      useEventListener(document, 'mouseup', () => {
         removeMousemove()
       })
 
@@ -340,7 +342,7 @@ export default defineComponent({
     function handleActions(action: ImageViewerAction, options = {}) {
       if (loading.value) return
       const { zoomRate, rotateDeg, enableTransition } = {
-        zoomRate: 0.2,
+        zoomRate: 1.4,
         rotateDeg: 90,
         enableTransition: true,
         ...options,
@@ -349,14 +351,16 @@ export default defineComponent({
         case 'zoomOut':
           if (transform.value.scale > 0.2) {
             transform.value.scale = parseFloat(
-              (transform.value.scale - zoomRate).toFixed(3)
+              (transform.value.scale / zoomRate).toFixed(3)
             )
           }
           break
         case 'zoomIn':
-          transform.value.scale = parseFloat(
-            (transform.value.scale + zoomRate).toFixed(3)
-          )
+          if (transform.value.scale < 7) {
+            transform.value.scale = parseFloat(
+              (transform.value.scale * zoomRate).toFixed(3)
+            )
+          }
           break
         case 'clockwise':
           transform.value.deg += rotateDeg
@@ -370,7 +374,7 @@ export default defineComponent({
 
     watch(currentImg, () => {
       nextTick(() => {
-        const $img = img.value
+        const $img = imgRefs.value[0]
         if (!$img?.complete) {
           loading.value = true
         }
@@ -392,7 +396,7 @@ export default defineComponent({
     return {
       index,
       wrapper,
-      img,
+      imgRefs,
       isSingle,
       isFirst,
       isLast,
@@ -407,7 +411,6 @@ export default defineComponent({
       handleImgLoad,
       handleImgError,
       handleMouseDown,
-
       ns,
     }
   },

packages/components/image/src/image.vue

@@ -92,11 +92,10 @@ export default defineComponent({
     })
 
     const imageIndex = computed(() => {
-      const { src, previewSrcList, initialIndex } = props
+      const { previewSrcList, initialIndex } = props
       let previewIndex = initialIndex
-      const srcIndex = previewSrcList.indexOf(src)
-      if (srcIndex >= 0) {
-        previewIndex = srcIndex
+      if (initialIndex > previewSrcList.length - 1) {
+        previewIndex = 0
       }
       return previewIndex
     })
@@ -154,6 +153,7 @@ export default defineComponent({
         removeLazyLoadListener()
       }
     }
+
     const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200)
 
     async function addLazyLoadListener() {

packages/theme-chalk/src/image-viewer.scss

@@ -51,6 +51,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    user-select: none;
   }
 
   @include e(actions) {