点击按钮预览图片，可以预览多组图片（vue+element）

2022-08-30 15:59 755阅读 0赞

elementUI 提供的 Image 组件直接可以点击图片查看图片预览，我的需求也是查看预览图片，但是有很多小的区别！

> 1、点击按钮预览图片；  
> 2、可以预览多个图片；  
> 3、预览的图片上显示当前图片的相关信息；  
> 4、展示图片当前页码信息；

**效果图如下：**  
![在这里插入图片描述][49df6ae090944d6e35ce8467ec7c1c8c.png_pic_left]  
**实现：**

由于需要图片上展示当前图片的一些相关信息以及页码，所以使用插件是没法满足需求了。我拿了 elementUI 里面的 image-viewer 源码，直接在这个基础上进行修改，封装一个组件，问题就解决了。

**代码：**

<template>
      <transition name="viewer-fade">
        <div tabindex="-1" ref="el-image-viewer__wrapper" class="el-image-viewer__wrapper" :style="{ 'z-index': zIndex }">
          
          <div class="el-image-viewer__mask"></div>
          
          <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
            <i class="el-icon-circle-close"></i>
          </span>
          
          <template v-if="!isSingle">
            <span
              class="el-image-viewer__btn el-image-viewer__prev"
              :class="{ 'is-disabled': !infinite && isFirst }"
              @click="prev">
              <i class="el-icon-arrow-left"/>
            </span>
            <span
              class="el-image-viewer__btn el-image-viewer__next"
              :class="{ 'is-disabled': !infinite && isLast }"
              @click="next">
              <i class="el-icon-arrow-right"/>
            </span>
          </template>
          
          <div v-if="showTool" class="el-image-viewer__btn el-image-viewer__actions">
            <div class="el-image-viewer__actions__inner">
              <i class="el-icon-zoom-out" @click="handleActions('zoomOut')"></i>
              <i class="el-icon-zoom-in" @click="handleActions('zoomIn')"></i>
              <i class="el-image-viewer__actions__divider"></i>
              <i :class="mode.icon" @click="toggleMode"></i>
              <i class="el-image-viewer__actions__divider"></i>
              <i class="el-icon-refresh-left" @click="handleActions('anticlocelise')"></i>
              <i class="el-icon-refresh-right" @click="handleActions('clocelise')"></i>
            </div>
          </div>
          
          <div v-if="i === index" v-for="(url, i) in urlList" class="el-image-viewer__canvas">
            
            <img
              ref="img"
              class="el-image-viewer__img"
              :key="url.img"
              :src="currentImg"
              :style="imgStyle"
              @load="handleImgLoad"
              @error="handleImgError"
              @mousedown="handleMouseDown">
              
              <div class="info">
              	<p v-for="(item,index) in url.info">
              		<span>{ { item.label}}</span>:<span>{ { item.value}}</span>
              	</p>
              </div>
              
              <div v-if="showpage" class="page">
              	{ { i+1}}/{ { urlList.length}}
              </div>
          </div>
        </div>
      </transition>
    </template>
    <script>
    import {  on, off } from 'element-ui/src/utils/dom';
    import {  rafThrottle, isFirefox } from 'element-ui/src/utils/util';
    
    const Mode = { 
      CONTAIN: { 
        name: 'contain',
        icon: 'el-icon-full-screen'
      },
      ORIGINAL: { 
        name: 'original',
        icon: 'el-icon-c-scale-to-original'
      }
    };
    const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel';
    export default { 
      name: 'pictureView',
      props: { 
      	showTool:{ //展示工具栏（与分页位置冲突，不可同时使用）
      		type:Boolean,
      		default:false
      	},
      	showpage:{ //展示分页
      		type:Boolean,
      		default:false
      	},
        urlList: { //图片数组
          type: Array,
          default: () => []
        },
        zIndex: { 
          type: Number,
          default: 2000
        },
        onSwitch: { 
          type: Function,
          default: () => { }
        },
        onClose: { 
          type: Function,
          default: () => { }
        },
        initialIndex: { 
          type: Number,
          default: 0
        }
      },
      data() { 
        return { 
          index: this.initialIndex,
          isShow: false,
          infinite: true,
          loading: false,
          mode: Mode.CONTAIN,
          transform: { 
            scale: 1,
            deg: 0,
            offsetX: 0,
            offsetY: 0,
            enableTransition: false
          }
        };
      },
      computed: { 
        isSingle() { 
          return this.urlList.length <= 1;
        },
        isFirst() { 
          return this.index === 0;
        },
        isLast() { 
          return this.index === this.urlList.length - 1;
        },
        currentImg() { 
          return this.urlList[this.index].img;
        },
        imgStyle() { 
          const {  scale, deg, offsetX, offsetY, enableTransition } = this.transform;
          const style = { 
            transform: `scale(${ scale}) rotate(${ deg}deg)`,
            transition: enableTransition ? 'transform .3s' : '',
            'margin-left': `${ offsetX}px`,
            'margin-top': `${ offsetY}px`
          };
          if (this.mode === Mode.CONTAIN) { 
            style.maxWidth = style.maxHeight = '100%';
          }
          return style;
        }
      },
      watch: { 
        index: { 
          handler: function(val) { 
            this.reset();
            this.onSwitch(val);
          }
        },
        currentImg(val) { 
          this.$nextTick(_ => { 
            const $img = this.$refs.img[0];
            if (!$img.complete) { 
              this.loading = true;
            }
          });
        }
      },
      mounted() { 
        this.deviceSupportInstall();
        this.$refs['el-image-viewer__wrapper'].focus();
      },
      methods: { 
        hide() { 
          this.deviceSupportUninstall();
          this.onClose();
        },
        deviceSupportInstall() { 
          this._keyDownHandler = rafThrottle(e => { 
            const keyCode = e.keyCode;
            switch (keyCode) { 
              // ESC
              case 27:
                this.hide();
                break;
              // SPACE
              case 32:
                this.toggleMode();
                break;
              // LEFT_ARROW
              case 37:
                this.prev();
                break;
              // UP_ARROW
              case 38:
                this.handleActions('zoomIn');
                break;
              // RIGHT_ARROW
              case 39:
                this.next();
                break;
              // DOWN_ARROW
              case 40:
                this.handleActions('zoomOut');
                break;
            }
          });
          this._mouseWheelHandler = rafThrottle(e => { 
            const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
            if (delta > 0) { 
              this.handleActions('zoomIn', { 
                zoomRate: 0.015,
                enableTransition: false
              });
            } else { 
              this.handleActions('zoomOut', { 
                zoomRate: 0.015,
                enableTransition: false
              });
            }
          });
          on(document, 'keydown', this._keyDownHandler);
          on(document, mousewheelEventName, this._mouseWheelHandler);
        },
        deviceSupportUninstall() { 
          off(document, 'keydown', this._keyDownHandler);
          off(document, mousewheelEventName, this._mouseWheelHandler);
          this._keyDownHandler = null;
          this._mouseWheelHandler = null;
        },
        handleImgLoad(e) { 
          this.loading = false;
        },
        handleImgError(e) { 
          this.loading = false;
          e.target.alt = '加载失败';
        },
        handleMouseDown(e) { 
          if (this.loading || e.button !== 0) return;
    
          const {  offsetX, offsetY } = this.transform;
          const startX = e.pageX;
          const startY = e.pageY;
          this._dragHandler = rafThrottle(ev => { 
            this.transform.offsetX = offsetX + ev.pageX - startX;
            this.transform.offsetY = offsetY + ev.pageY - startY;
          });
          on(document, 'mousemove', this._dragHandler);
          on(document, 'mouseup', ev => { 
            off(document, 'mousemove', this._dragHandler);
          });
    
          e.preventDefault();
        },
        reset() { 
          this.transform = { 
            scale: 1,
            deg: 0,
            offsetX: 0,
            offsetY: 0,
            enableTransition: false
          };
        },
        toggleMode() { 
          if (this.loading) return;
          const modeNames = Object.keys(Mode);
          const modeValues = Object.values(Mode);
          const index = modeValues.indexOf(this.mode);
          const nextIndex = (index + 1) % modeNames.length;
          this.mode = Mode[modeNames[nextIndex]];
          this.reset();
        },
        prev() { 
          if (this.isFirst && !this.infinite) return;
          const len = this.urlList.length;
          this.index = (this.index - 1 + len) % len;
        },
        next() { 
          if (this.isLast && !this.infinite) return;
          const len = this.urlList.length;
          this.index = (this.index + 1) % len;
        },
        handleActions(action, options = { }) { 
          if (this.loading) return;
          const {  zoomRate, rotateDeg, enableTransition } = { 
            zoomRate: 0.2,
            rotateDeg: 90,
            enableTransition: true,
            ...options
          };
          const {  transform } = this;
          switch (action) { 
            case 'zoomOut':
              if (transform.scale > 0.2) { 
                transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3));
              }
              break;
            case 'zoomIn':
              transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
              break;
            case 'clocelise':
              transform.deg += rotateDeg;
              break;
            case 'anticlocelise':
              transform.deg -= rotateDeg;
              break;
          }
          transform.enableTransition = enableTransition;
        }
      }
    };
    </script>
    <style type="text/css">
    	.info { color: #fff; z-index: 10; font-size: 14px; position: absolute; bottom: 100px;}
    	.page { color: #fff; z-index: 10; font-size: 32px; position: absolute; bottom: 40px;}
    </style>

使用：

<picture-view 
    	v-if="showViewer" 
    	:on-close="closeViewer" 
    	:url-list="srcList"
    	:showpage='true'>
    </picture-view>
    <script>
    	export default { 
    		data(){ 
    			return { 
    				showViewer:false,
    				srcList: [
    		          { 
    		          	img:'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
    		          	info:[{ label:'asasa',value:'ssssss'}]
    		          },
    		          { 
    		          	img:'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
    		          	info:[{ label:'xxxx',value:'sssqqqqsss'}]
    		          }
    		        ]
    			}
    		},
    		methods:{ 
    			closeViewer(){ 
                    this.showViewer=false
                }
    		}
    	}
    </script>

如果只展示一个图片只需要控制 srcList 数组只有一个元素就可以了。

[49df6ae090944d6e35ce8467ec7c1c8c.png_pic_left]: /images/20220829/086c7cf9bdba4d0396bc8c95f4aaeb34.png