v-preview-pc/dist/index.js

Vue图片预览插件，用于PC端，支持多张图片切换，缩放，旋转

!function(i,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((i=i||self).vPreview={})}(this,(function(i){"use strict";function t(){var i=void 0,t=void 0;return window.innerWidth?t=window.innerWidth:document.body&&document.body.clientWidth&&(t=document.body.clientWidth),window.innerHeight?i=window.innerHeight:document.body&&document.body.clientHeight&&(i=document.body.clientHeight),document.documentElement&&document.documentElement.clientHeight&&document.documentElement.clientWidth&&(i=document.documentElement.clientHeight,t=document.documentElement.clientWidth),{winWidth:t,winHeight:i}}var e=function(i,t,e,n,o,s,r,a,h,d){"boolean"!=typeof r&&(h=a,a=r,r=!1);var c="function"==typeof e?e.options:e;i&&i.render&&(c.render=i.render,c.staticRenderFns=i.staticRenderFns,c._compiled=!0,o&&(c.functional=!0)),n&&(c._scopeId=n);var l=void 0;if(s?(l=function(i){(i=i||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(i=__VUE_SSR_CONTEXT__),t&&t.call(this,h(i)),i&&i._registeredComponents&&i._registeredComponents.add(s)},c._ssrRegister=l):t&&(l=r?function(i){t.call(this,d(i,this.$root.$options.shadowRoot))}:function(i){t.call(this,a(i))}),l)if(c.functional){var u=c.render;c.render=function(i,t){return l.call(t),u(i,t)}}else{var f=c.beforeCreate;c.beforeCreate=f?[].concat(f,l):[l]}return e}({render:function(){var i=this,t=i.$createElement,e=i._self._c||t;return e("div",{directives:[{name:"show",rawName:"v-show",value:i.isShow,expression:"isShow"}],staticClass:"vp-dialog",on:{mousedown:i.mousedown}},[e("div",{directives:[{name:"show",rawName:"v-show",value:!i.isLoading,expression:"!isLoading"}],staticClass:"vp-img-box",class:{transition:!i.isMouseDown&&i.isLoadingDelay},style:i.imgStyle},[e("img",{attrs:{src:i.currentImage},on:{mousedown:function(i){i.preventDefault()}}})]),i._v(" "),e("div",{directives:[{name:"show",rawName:"v-show",value:i.isLoading,expression:"isLoading"}],staticClass:"vp-loading"},[e("span",{staticClass:"iconfont icon-loading vp-rotate vp-loading-icon"})]),i._v(" "),e("div",{staticClass:"vp-img-toolbar"},[e("div",{staticClass:"tool",on:{click:i.smaller}},[e("span",{staticClass:"iconfont icon-suoxiao"})]),i._v(" "),e("div",{staticClass:"tool",on:{click:i.bigger}},[e("span",{staticClass:"iconfont icon-fangda"})]),i._v(" "),i.images&&i.images.length>1?[e("div",{staticClass:"tool",on:{click:i.prev}},[e("span",{staticClass:"iconfont icon-xiangqian-copy"})]),i._v(" "),e("div",{staticClass:"tool",on:{click:i.next}},[e("span",{staticClass:"iconfont icon-xiangqian"})])]:i._e(),i._v(" "),e("div",{staticClass:"tool",on:{click:function(t){i.info.rotate-=90}}},[e("span",{staticClass:"iconfont icon-zuoxuanzhuan"})]),i._v(" "),e("div",{staticClass:"tool",on:{click:function(t){i.info.rotate+=90}}},[e("span",{staticClass:"iconfont icon-youxuanzhuan"})])],2),i._v(" "),e("div",{staticClass:"vp-close",on:{click:i.hide}},[e("span",{staticClass:"iconfont icon-guanbi"})]),i._v(" "),e("transition",{attrs:{name:"vpfade"}},[e("div",{directives:[{name:"show",rawName:"v-show",value:i.isShowToolTip&&!i.isLoading,expression:"isShowToolTip && !isLoading"}],staticClass:"vp-tooltip"},[i._v(i._s(i.currentRatio)+"%")])])],1)},staticRenderFns:[]},void 0,{name:"vPreview",data:function(){return{images:[],initW:800,isShow:!1,isLoading:!1,isLoadingDelay:!1,isShowToolTip:!1,toolTipTimer:null,isError:!1,currentIndex:0,startX:0,startY:0,moveX:0,moveY:0,diffX:0,diffY:0,isMouseDown:!1,browerInfo:{winWidth:0,winHeight:0},info:{w:0,h:0,l:0,t:0,rW:0,rH:0,rotate:0}}},created:function(){this.browerInfo=t()},beforeDestory:function(){this.removeEvent()},methods:{showToolTip:function(){this.toolTipTimer&&clearTimeout(this.toolTipTimer),this.isShowToolTip=!0,this.hideToolTip()},hideToolTip:function(){var i=this;this.toolTipTimer=setTimeout((function(){i.isShowToolTip=!1}),1e3)},bigger:function(){this.showToolTip();var i=this.height,t=Math.ceil(.1*Math.min(this.width,this.info.rW));this.info.w=this.width+t;var e=this.height-i;this.info.l=this.marginLeft-Math.ceil(t/2),this.info.t=this.marginTop-Math.ceil(e/2)},smaller:function(){this.showToolTip();var i=this.height,t=Math.ceil(.1*Math.min(this.width,this.info.rW));this.info.w=this.width-t;var e=this.height-i;this.info.l=this.marginLeft+Math.ceil(t/2),this.info.t=this.marginTop-Math.ceil(e/2)},prev:function(){this.images&&this.images.length>1&&(this.currentIndex<=0?this.currentIndex=this.images.length-1:this.currentIndex--,this.loadImage(this.currentImage))},next:function(){this.images&&this.images.length>1&&(this.currentIndex>=this.images.length-1?this.currentIndex=0:this.currentIndex++,this.loadImage(this.currentImage))},loadImage:function(i){var t=this;this.isLoading=!0,this.isLoadingDelay=!1,this.isError=!1;var e=new Image;e.src=i;var n=Math.min(this.initW,Math.ceil(.8*this.browerInfo.winWidth)),o=function(){t.info.rW=e.width,t.info.rH=e.height,t.info.w=n>e.width?e.width:n,t.info.l=t.browerInfo.winWidth/2-t.width/2,t.info.t=t.browerInfo.winHeight/2-t.height/2,t.info.rotate=0,t.isLoading=!1,t.$nextTick((function(){t.isLoadingDelay=!0}))};e.complete?o():(e.onload=function(){o()},e.onError=function(){this.isError=!0})},resetData:function(){},show:function(i){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};Array.isArray(i)&&(this.images=i);var n=e.currentIndex,o=void 0===n?0:n,s=e.initW,r=void 0===s?800:s;this.isShow||this.addEvent(),this.browerInfo=t(),"number"==typeof o?o<0?o=0:o>this.images.length-1&&(o=this.images.length-1):o=0,"number"==typeof r&&(r<=0?window.console.log("初始宽度不可小于0"):this.initW=r),this.currentIndex=o,this.isShow=!0,this.loadImage(this.currentImage)},hide:function(){this.removeEvent(),this.isShow=!1},addEvent:function(){window.addEventListener("resize",this.resizeFunc),window.addEventListener("keydown",this.keydownFunc),window.addEventListener("DOMMouseScroll",this.scrollFunc),window.addEventListener("wheel",this.scrollFunc),window.addEventListener("mousewheel",this.scrollFunc)},removeEvent:function(){window.removeEventListener("keydown",this.keydownFunc),window.removeEventListener("DOMMouseScroll",this.scrollFunc),window.removeEventListener("wheel",this.scrollFunc),window.removeEventListener("mousewheel",this.scrollFunc)},resizeFunc:function(){this.browerInfo=t(),this.loadImage(this.currentImage)},keydownFunc:function(i){return(i=i||event||window.event)&&27==i.keyCode?this.hide():i&&37==i.keyCode?this.prev():i&&39===i.keyCode?this.next():void 0},scrollFunc:function(i){(i=i||window.event).wheelDelta?i.wheelDelta>0?this.bigger():i.wheelDelta<0&&this.smaller():i.detail&&(i.detail<0?this.bigger():i.detail>0&&this.smaller())},mousedown:function(i){var t=this;"vp-dialog"!==i.target.className&&-1===i.target.parentNode.className.indexOf("vp-img-box")||(t.startX=i.clientX,t.startY=i.clientY,t.isMouseDown=!0,window.addEventListener("mousemove",t.mousemove),window.addEventListener("mouseup",t.mouseup))},mousemove:function(i){this.isMouseDown&&(this.isMouseDown=!0,this.moveX=i.clientX,this.moveY=i.clientY,this.diffX=i.clientX-this.startX,this.diffY=i.clientY-this.startY)},mouseup:function(){this.isMouseDown&&(this.isMouseDown=!1,this.info.l=this.info.l+this.diffX,this.info.t=this.info.t+this.diffY,this.diffX=0,this.diffY=0,window.removeEventListener("mousemove",this.mousemove),window.removeEventListener("mouseup",this.mouseup))}},computed:{imgStyle:function(){var i=Math.ceil;return{width:i(this.width)+"px",height:i(this.height)+"px",marginLeft:i(this.marginLeft+this.diffX)+"px",marginTop:i(this.marginTop+this.diffY)+"px",transform:"rotate("+this.rotate+"deg)","-webkit-transform":"rotate("+this.rotate+"deg)","-ms-transform":"rotate("+this.rotate+"deg)","-moz-transform":"rotate("+this.rotate+"deg)","-o-transform":"rotate("+this.rotate+"deg)"}},boxEl:function(){return this.$refs.box},currentImage:function(){return this.images[this.currentIndex]},ratio:function(){return this.info.rW/this.info.rH},rotate:function(){return this.info.rotate},marginLeft:function(){return this.info.l},marginTop:function(){return this.info.t},width:function(){return this.info.w},height:function(){return this.info.w/this.ratio},currentRatio:function(){return Math.ceil(this.info.w/this.info.rW*100)}}},void 0,!1,void 0,!1,void 0,void 0,void 0),n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(i){return typeof i}:function(i){return i&&"function"==typeof Symbol&&i.constructor===Symbol&&i!==Symbol.prototype?"symbol":typeof i},o=void 0,s=void 0,r=function(){s=new o({render:function(i){return i(e)}}).$mount(),document.body.appendChild(s.$el)},a={show:function(){var i;!s&&r(),(i=s.$children[0]).show.apply(i,arguments)}},h=function(i){o=i;var t={};Object.keys(a).forEach((function(i){t[i]=a[i]})),o.prototype.$vPreview=t};void 0!==("undefined"==typeof window?"undefined":n(window))&&window.Vue&&h(window.Vue);var d={install:h};i.default=d,Object.defineProperty(i,"__esModule",{value:!0})}));