vue 封装图片预览组件

因项目需要,自己封装了个vue图片预览组件

<template><div class="imgs_previews animated" @mousewheel.prevent="wheellEvent($event)" v-if="isOpen" :class="isShow ? 'fadeIn' : 'fadeOut'"><div class="mask" @click="closeLayer()"></div><a href="javascript:void(0);" class="close" @click="closeLayer()"><i class="iconfont"></i></a><div class="preview_content" @click.stop="closeLayer('mask')"><div class="img_list"><img :src="mainImg" height="778" /></div><div class="thumb_imgs"><ul><li :class="{select : item.select}" @click.stop="changeImg(index)" @mouseenter.stop="changeImg(index)" v-for="(item, index) in viewsImg" :key="index"><div class="mask"></div><img :src="item.thumb" width="78" height="60" /><p>{{ item.title }}</p></li></ul></div><div class="preview_prev prev_next_btn" ><img src="/image/icon/icon_left.png" @click.stop="prev" width="44" height="44" /></div><div class="preview_next prev_next_btn"  @click.stop="next"><img src="/image/icon/icon_right.png" width="44" height="44" /></div></div></div>
</template><script>
export default {name : "ImgsPreview",props: {isOpen:{type: Boolean,default: true},imgsList : {type : Object,default: []},pindex : {type : Number,default: 0},maskClose : {type : Boolean,default : false},type : {type : String,default: ''}},data() {return {isShow : true,mainImg : "",viewsImg : [],index : 0,len : 0,id: 0}},watch: {isOpen() {//this.isShow = this.isOpen;},index (){this.init();}},mounted() {this.index = this.pindex;this.imgsList.list.map((item,index) => {// console.log(item)let term = {};term.select = (index == this.index)?true:false;term.title = item.title;term.thumb = item.thumb;term.img = item.img;term.id = item.id;this.viewsImg.push(term);});this.init();this.len = this.viewsImg.length;window.onkeyup = this.keyEvent;},methods : {init (){this.mainImg = this.viewsImg[this.index].img;this.id = this.viewsImg[this.index].id;},closeLayer(mask){//关闭窗口if (mask == "mask") {if (!this.maskClose) return;};this.isShow = false;setTimeout(()=>{this.$emit("closeLayer");},500);},changeImg(index){this.setSelect(index);this.index = index;},prev(){this.index--;if(this.index<0)this.index = this.len-1;this.setSelect(this.index);},next(){this.index++;if(this.index>=this.len)this.index = 0;this.setSelect(this.index);},setSelect (index){this.viewsImg.map((item,index) => {item.select = false;});this.viewsImg[index].select = true;},wheellEvent  (e) {e = e || window.event;if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件if (e.wheelDelta > 0) { //当滑轮向上滚动时this.prev();}if (e.wheelDelta < 0) { //当滑轮向下滚动时this.next();}} else if (e.detail) {  //Firefox滑轮事件if (e.detail> 0) { //当滑轮向上滚动时this.prev();}if (e.detail< 0) { //当滑轮向下滚动时this.next();}}},keyEvent (event) {var e = event || window.event || arguments.callee.caller.arguments[0];if(e && e.keyCode==37){//上,左this.prev();}if(e && e.keyCode==39){//下,右this.next()}}},destroyed(){window.onkeyup = null;}
}
</script><style lang="less" scoped>
/* 图片预览 */
.flex_center(){justify-content:center;}
.flex(){display: flex;}
.wh100(){width: 100%;height: 100%;}
.imgs_previews{position: fixed;.wh100;top: 0;left: 0;z-index: 1998;.mask{position: absolute;.wh100;top: 0;left: 0;background: rgba(0, 0, 0,.8);z-index: 0;}.preview_content{top:0;border-radius: 2px;position: relative;.img_list{margin: 44px auto 0;text-align: center;img{max-width:100%;max-height:778px;}}}.thumb_imgs{z-index: 11;position: fixed;bottom: 0;left: 0;width:100%;height: 98px;background:#222;overflow: hidden;ul{.flex;.flex_center;width:100%;margin-top: 10px;li{width: 78px;height: 78px;margin-right: 6px;position: relative;cursor: pointer;img{height: 60px;}.mask{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0,.5);}p{line-height: 18px;color: rgba(255, 255, 255,.9);font-size: 12px;text-align: center;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}}li.select .mask{display: none;}li:last-child{margin-right: 0;}}}a.close{position: absolute;top: 10px;right: 20px;width: 24px;height: 24px;i{background-position: -380px -119px;}}.prev_next_btn{position: fixed;top: 50%;width: 44px;height: 44px;cursor: pointer;}.preview_prev{left: 20px;}.preview_next{right: 20px;}}</style>

在需要用的组件里引入使用

import MyImgsPreview from "@/components/utils/MyImgsPreview";
data() {return {isOpenPreview : false,imgsList : {}}
},closeLayer(){this.isOpenPreview = false;
},<my-imgs-preview v-if="isOpenPreview" :imgsList="imgsList" :maskClose="true" :isOpen="isOpenPreview" @closeLayer="closeLayer" />

组件使用的imgsList 数组,自行修改

预览效果:

组件已经实现左右键,鼠标滚动,鼠标移入切换图片。

vue 封装图片预览组件相关推荐

VUE+ELE图片预览组件
1.首先添加图片点击事件 <el-image :src="xxx" @click="handlePreview()" /> 2.增加预览组件imag ...
基于vue的图片预览组件-图片列表
不多说,开局一张图: 主要的使用方法也简单,在控制台执行npm install sen-preview-photo --save然后在 import senPreviewPhoto from 's ...
基于 vue 编写的vue图片预览组件，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果，可自定义背景、按钮颜色等
hevue-img-preview 简介完整版下载地址:基于 vue 编写的vue图片预览组件本组件是一个基于 vue 编写的 vue 图片预览组件,支持 pc 和手机端,支持单图和多图预览,仅传 ...
自己封装的图片预览组件
自己封装的定制化图片预览组件 1.针对Vue2, 2.支持图片列表切换.图片的旋转.放大.缩小.全屏 3.定制化:显示当前图片的名称,样式自定义 0.效果图一.图片预览组件 <template ...
pc 图片预览放大端vue_移动端Vue.js的图片预览组件，支持放缩、滑动功能！
功能:图片预览组件,支持双手指放大/缩小,双击放大/缩小,单击消失隐藏. 注:touch事件请手机预览源码分享组件参数 data() { return { loading: 2, // 1成功 2 ...
实现一个vue的图片预览插件
vue-image-swipe 基于photoswipe实现的vue图片预览组件安装 1 第一步 npm install vue-image-swipe -D 2 第二步 vue 入口文件引入 im ...
基于React的图片预览组件
一. 需求:最近项目中遇到要进行图片预览的需求,在网上找了一大圈可用的图片预览组件,起初选择react-wx-images-viewer作为预览组件二次开发,但后来发现虽然这个组件在Git上113个s ...
vue实现图片预览功能
图片预览点击放大缩小旋转切换上下张图片首先自己定义共用的一个组件 ViewImg.vue <template><div><el-image-viewerv-if=& ...
图片预览组件PhotoView
图片预览组件PhotoView PhotoView是一款图片预览组件,广泛应用于大图的查看.该组件支持图片手势缩放.旋转等功能.它可以很好的和ViewPager.Picasso等组件结合,实现各种复杂 ...

vue 封装图片预览组件

vue 封装图片预览组件相关推荐

最新文章

热门文章