点击按钮预览图片,可以预览多组图片(vue+element) 2022-08-30 23:59 410阅读 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 文章版权声明:注明蒲公英云原创文章,转载或复制请以超链接形式并注明出处。
相关 uni-app点击预览图片 <image :src="info.shopLogoUrl" @tap="_previewImage(info.shopLogoUrl)" mode="widthFi 忘是亡心i/ 2021年07月25日 05:31/ 1 赞/ 844 阅读
相关 uniapp 上传图片、点击预览图片 1、在回调中打开本地相册 uni.chooseImage({ count:上传照片数量, //浏览器无法限制,默认上传数量为9 比眉伴天荒/ 2021年07月24日 19:07/ 0 赞/ 1241 阅读
相关 图片预览 定制上传按钮: ![ExpandedBlockStart.gif][] ![复制代码][copycode.gif] <div 「爱情、让人受尽委屈。」/ 2021年12月22日 17:21/ 0 赞/ 279 阅读
相关 页面点击预览按钮弹出图片窗口 jsp: <script type="text/javascript" src="$\{ctx \}/resources/javascript/imageView.js"> 墨蓝/ 2022年01月21日 11:41/ 0 赞/ 238 阅读
相关 点击图片上传实时预览 html源代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset 快来打我*/ 2022年05月08日 20:16/ 0 赞/ 286 阅读
相关 微信图片点击预览 $(function(){ var imgsurl=[]; var nowurl=''; var imgObj=$(".swi 快来打我*/ 2022年06月08日 17:50/ 0 赞/ 234 阅读
相关 图片预览 插件:uploadPreview.min.js <tr> <th>商品图片</th> Love The Way You Lie/ 2022年07月11日 13:40/ 0 赞/ 142 阅读
相关 点击按钮预览图片,可以预览多组图片(vue+element) elementUI 提供的 Image 组件直接可以点击图片查看图片预览,我的需求也是查看预览图片,但是有很多小的区别! > 1、点击按钮预览图片; > 2、可以预览多个 た 入场券/ 2022年08月30日 23:59/ 0 赞/ 411 阅读
相关 uni-app点击预览图片 <image :src="info.shopLogoUrl" @tap="_previewImage(info.shopLogoUrl)" mode="widthFi 朴灿烈づ我的快乐病毒、/ 2022年12月02日 08:43/ 0 赞/ 166 阅读
相关 微信小程序点击单个图片进行预览图片,点击预览pdf文件 这里介绍的是单个图片点击预览的,也可以多张,方法差不多 index.wxml <view class="page"> <view class="pag 待我称王封你为后i/ 2022年12月10日 16:55/ 0 赞/ 147 阅读
还没有评论,来说两句吧...