Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-img-viewr

Package Overview
Dependencies
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-img-viewr - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

6

CHANGELOG.md

@@ -14,1 +14,7 @@ # 更新日志

* 修改enter、leave动画,去掉transform效果
#### 1.0.3 (2021-01-21)
* 增加点击蒙层关闭功能,可通过closeOnClickMask(默认:true)进行控制是否启用该功能
* zIndex由默认2000调整为3000
* 更换关闭按钮图标

2

lib/vue-img-viewr.js

@@ -1,1 +0,1 @@

module.exports=function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(i,o,function(t){return e[t]}.bind(null,o));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(e,t){e.exports=require("vue")},function(e,t,n){e.exports=n(2)},function(e,t,n){"use strict";n.r(t),n.d(t,"showImages",function(){return w});var i=n(0),o=n.n(i),r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"img-viewr-fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],ref:"img-viewr__wrapper",staticClass:"img-viewr__wrapper",style:{"z-index":e.zIndex},attrs:{tabindex:"-1"}},[n("div",{staticClass:"img-viewr__mask"}),e._v(" "),n("span",{staticClass:"img-viewr__btn img-viewr__close",on:{click:e.hide}},[n("i",{staticClass:"img-viewr__icon icon__circle-close"})]),e._v(" "),e.isSingle?e._e():[n("span",{staticClass:"img-viewr__btn img-viewr__prev",class:{"is-disabled":!e.infinite&&e.isFirst},on:{click:e.prev}},[n("i",{staticClass:"img-viewr__icon icon__arrow-left"})]),e._v(" "),n("span",{staticClass:"img-viewr__btn img-viewr__next",class:{"is-disabled":!e.infinite&&e.isLast},on:{click:e.next}},[n("i",{staticClass:"img-viewr__icon icon__arrow-right"})])],e._v(" "),n("div",{staticClass:"img-viewr__btn img-viewr__actions"},[n("div",{staticClass:"img-viewr__actions__inner"},[n("i",{staticClass:"img-viewr__icon icon__zoom-out",on:{click:function(t){return e.handleActions("zoomOut")}}}),e._v(" "),n("i",{staticClass:"img-viewr__icon icon__zoom-in",on:{click:function(t){return e.handleActions("zoomIn")}}}),e._v(" "),n("i",{staticClass:"img-viewr__actions__divider"}),e._v(" "),n("i",{class:e.mode.icon,on:{click:e.toggleMode}}),e._v(" "),n("i",{staticClass:"img-viewr__actions__divider"}),e._v(" "),n("i",{staticClass:"img-viewr__icon icon__download-image",on:{click:function(t){return e.handleActions("download")}}}),e._v(" "),n("i",{staticClass:"img-viewr__actions__divider"}),e._v(" "),n("i",{staticClass:"img-viewr__icon icon__refresh-left",on:{click:function(t){return e.handleActions("anticlocelise")}}}),e._v(" "),n("i",{staticClass:"img-viewr__icon icon__refresh-right",on:{click:function(t){return e.handleActions("clocelise")}}})])]),e._v(" "),n("div",{staticClass:"img-viewr__canvas"},[e._l(e.urls,function(t,i){return[i===e.index?n("img",{key:t,ref:"img",refInFor:!0,staticClass:"img-viewr__img",style:e.imgStyle,attrs:{src:e.currentImg},on:{load:e.handleImgLoad,error:e.handleImgError,mousedown:e.handleMouseDown}}):e._e()]})],2)],2)])};r._withStripped=!0;var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},a=o.a.prototype.$isServer,c=!a&&document.addEventListener?function(e,t,n){e&&t&&n&&e.addEventListener(t,n,!1)}:function(e,t,n){e&&t&&n&&e.attachEvent("on"+t,n)},l=!a&&document.removeEventListener?function(e,t,n){e&&t&&e.removeEventListener(t,n,!1)}:function(e,t,n){e&&t&&e.detachEvent("on"+t,n)},u=function(e){var t=!1;return function(){for(var n=arguments.length,i=Array(n),o=0;o<n;o++)i[o]=arguments[o];t||(t=!0,window.requestAnimationFrame(function(n){e.apply(void 0,i),t=!1}))}},d={CONTAIN:{name:"contain",icon:"img-viewr__icon icon__full-screen"},ORIGINAL:{name:"original",icon:"img-viewr__icon icon__scale-to-original"}},f=!o.a.prototype.$isServer&&window.navigator.userAgent.match(/firefox/i)?"DOMMouseScroll":"mousewheel";var m=function(e,t,n,i,o,r,s,a){var c,l="function"==typeof e?e.options:e;if(t&&(l.render=t,l.staticRenderFns=n,l._compiled=!0),i&&(l.functional=!0),r&&(l._scopeId="data-v-"+r),s?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(s)},l._ssrRegister=c):o&&(c=a?function(){o.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:o),c)if(l.functional){l._injectStyles=c;var u=l.render;l.render=function(e,t){return c.call(t),u(e,t)}}else{var d=l.beforeCreate;l.beforeCreate=d?[].concat(d,c):[c]}return{exports:e,options:l}}({name:"ImgViewr",computed:{isSingle:function(){return this.urls.length<=1},isFirst:function(){return 0===this.index},isLast:function(){return this.index===this.urls.length-1},currentImg:function(){return this.urls[this.index]||this.urls[0]},imgStyle:function(){var e=this.transform,t=e.scale,n=e.deg,i=e.offsetX,o=e.offsetY,r={transform:"scale("+t+") rotate("+n+"deg)",transition:e.enableTransition?"transform .3s":"","margin-left":i+"px","margin-top":o+"px"};return this.mode===d.CONTAIN&&(r.maxWidth=r.maxHeight="100%"),r}},props:{visible:{type:Boolean,default:!1},urls:{type:Array,default:function(){return[]}},zIndex:{type:Number,default:2e3},onSwitch:{type:Function,default:function(){}},onClose:{type:Function,default:function(){}},initialIndex:{type:Number,default:0}},data:function(){return{index:0,isShow:!1,infinite:!0,loading:!1,mode:d.CONTAIN,transform:{scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}}},watch:{initialIndex:function(e){e!==this.index&&(this.index=e)},index:{handler:function(e){this.reset(),this.onSwitch(e)}},currentImg:function(e){var t=this;e&&this.$nextTick(function(e){var n=t.$refs.img;n&&n.length>0&&(n[0].complete||(t.loading=!0))})}},mounted:function(){this.deviceSupportInstall(),this.$refs["img-viewr__wrapper"].focus()},beforeDestroy:function(){this.deviceSupportUninstall()},methods:{hide:function(){this.onClose()},deviceSupportInstall:function(){var e=this;this._keyDownHandler=u(function(t){switch(t.keyCode){case 27:e.hide();break;case 32:e.toggleMode();break;case 37:e.prev();break;case 38:e.handleActions("zoomIn");break;case 39:e.next();break;case 40:e.handleActions("zoomOut")}}),this._mouseWheelHandler=u(function(t){(t.wheelDelta?t.wheelDelta:-t.detail)>0?e.handleActions("zoomIn",{zoomRate:.05,enableTransition:!1}):e.handleActions("zoomOut",{zoomRate:.05,enableTransition:!1})}),c(document,"keydown",this._keyDownHandler),c(document,f,this._mouseWheelHandler)},deviceSupportUninstall:function(){l(document,"keydown",this._keyDownHandler),l(document,f,this._mouseWheelHandler),this._keyDownHandler=null,this._mouseWheelHandler=null},handleImgLoad:function(e){this.loading=!1},handleImgError:function(e){this.loading=!1,e.target.alt="加载失败"},handleMouseDown:function(e){var t=this;if(!this.loading&&0===e.button){var n=this.transform,i=n.offsetX,o=n.offsetY,r=e.pageX,s=e.pageY;this._dragHandler=u(function(e){t.transform.offsetX=i+e.pageX-r,t.transform.offsetY=o+e.pageY-s}),c(document,"mousemove",this._dragHandler),c(document,"mouseup",function(e){l(document,"mousemove",t._dragHandler)}),e.preventDefault()}},reset:function(){this.transform={scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}},toggleMode:function(){if(!this.loading){var e=Object.keys(d),t=(Object.values(d).indexOf(this.mode)+1)%e.length;this.mode=d[e[t]],this.reset()}},prev:function(){if(!this.isFirst||this.infinite){var e=this.urls.length;this.index=(this.index-1+e)%e}},next:function(){if(!this.isLast||this.infinite){var e=this.urls.length;this.index=(this.index+1)%e}},handleActions:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!this.loading){var n=s({zoomRate:.2,rotateDeg:90,enableTransition:!0},t),i=n.zoomRate,o=n.rotateDeg,r=n.enableTransition,a=this.transform;switch(e){case"zoomOut":a.scale>.2&&(a.scale=parseFloat((a.scale-i).toFixed(3)));break;case"zoomIn":a.scale=parseFloat((a.scale+i).toFixed(3));break;case"clocelise":a.deg+=o;break;case"anticlocelise":a.deg-=o;break;case"download":this.downloadImg(this.currentImg,Date.now(),"png")}a.enableTransition=r}},downloadImg:function(e,t,n){var i=new Image,o=document.createElement("canvas"),r=o.getContext("2d"),s=document.createElement("a");i.setAttribute("crossOrigin","anonymous"),i.src=e,i.onerror=function(){window.open(e)},i.onload=function(){o.width=i.width,o.height=i.height,r.drawImage(i,0,0,i.width,i.height),s.setAttribute("href",o.toDataURL("image/"+n)),s.setAttribute("target","_blank"),s.setAttribute("download",t+"."+n),s.click()}}}},r,[],!1,null,null,null);m.options.__file="src/img-viewr/main.vue";var _=m.exports,h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},v="function"==typeof Symbol&&"symbol"===h(Symbol.iterator)?function(e){return void 0===e?"undefined":h(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":void 0===e?"undefined":h(e)},g=o.a.extend(_),p=void 0,w=function(e){if(!o.a.prototype.$isServer){if("object"!==v(e))throw new Error("Argument must be an Object!");if(!(e.urls&&e.urls.length>0))throw new Error("At least one picture in urls array!");if(e=Object.assign({urls:[],zIndex:2e3,onSwitch:function(){},onClose:function(){return!0},index:0},e),p||(p=new g({el:document.createElement("div")}),document.body.appendChild(p.$el),o.a.nextTick(function(){p.visible=!0})),!p.visible)for(var t in e)"onClose"!==t&&(p[t]=e[t]);p.onClose=function(){var t=!e.onClose();t||(p.visible=t,setTimeout(function(){p.urlList=[],p.initialIndex=-1},300))},p.visible=!0}};"undefined"!=typeof window&&window.Vue&&function(e){e.component(_.name,_)}(window.Vue),_.showImages=w;t.default=_}]).default;
module.exports=function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(i,o,function(t){return e[t]}.bind(null,o));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(e,t){e.exports=require("vue")},function(e,t,n){e.exports=n(2)},function(e,t,n){"use strict";n.r(t),n.d(t,"showImages",function(){return w});var i=n(0),o=n.n(i),r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"img-viewr-fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],ref:"img-viewr__wrapper",staticClass:"img-viewr__wrapper",style:{"z-index":e.zIndex},attrs:{tabindex:"-1"}},[n("div",{staticClass:"img-viewr__mask",on:{click:function(t){return t.target!==t.currentTarget?null:e.handleMaskClick(t)}}}),e._v(" "),n("span",{staticClass:"img-viewr__btn img-viewr__close",on:{click:e.hide}},[n("i",{staticClass:"img-viewr__icon icon__circle-close"})]),e._v(" "),e.isSingle?e._e():[n("span",{staticClass:"img-viewr__btn img-viewr__prev",class:{"is-disabled":!e.infinite&&e.isFirst},on:{click:e.prev}},[n("i",{staticClass:"img-viewr__icon icon__arrow-left"})]),e._v(" "),n("span",{staticClass:"img-viewr__btn img-viewr__next",class:{"is-disabled":!e.infinite&&e.isLast},on:{click:e.next}},[n("i",{staticClass:"img-viewr__icon icon__arrow-right"})])],e._v(" "),n("div",{staticClass:"img-viewr__btn img-viewr__actions"},[n("div",{staticClass:"img-viewr__actions__inner"},[n("i",{staticClass:"img-viewr__icon icon__zoom-out",on:{click:function(t){return e.handleActions("zoomOut")}}}),e._v(" "),n("i",{staticClass:"img-viewr__icon icon__zoom-in",on:{click:function(t){return e.handleActions("zoomIn")}}}),e._v(" "),n("i",{staticClass:"img-viewr__actions__divider"}),e._v(" "),n("i",{class:e.mode.icon,on:{click:e.toggleMode}}),e._v(" "),n("i",{staticClass:"img-viewr__actions__divider"}),e._v(" "),n("i",{staticClass:"img-viewr__icon icon__download-image",on:{click:function(t){return e.handleActions("download")}}}),e._v(" "),n("i",{staticClass:"img-viewr__actions__divider"}),e._v(" "),n("i",{staticClass:"img-viewr__icon icon__refresh-left",on:{click:function(t){return e.handleActions("anticlocelise")}}}),e._v(" "),n("i",{staticClass:"img-viewr__icon icon__refresh-right",on:{click:function(t){return e.handleActions("clocelise")}}})])]),e._v(" "),n("div",{staticClass:"img-viewr__canvas"},[e._l(e.urls,function(t,i){return[i===e.index?n("img",{key:t,ref:"img",refInFor:!0,staticClass:"img-viewr__img",style:e.imgStyle,attrs:{src:e.currentImg},on:{load:e.handleImgLoad,error:e.handleImgError,mousedown:e.handleMouseDown}}):e._e()]})],2)],2)])};r._withStripped=!0;var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},a=o.a.prototype.$isServer,c=!a&&document.addEventListener?function(e,t,n){e&&t&&n&&e.addEventListener(t,n,!1)}:function(e,t,n){e&&t&&n&&e.attachEvent("on"+t,n)},l=!a&&document.removeEventListener?function(e,t,n){e&&t&&e.removeEventListener(t,n,!1)}:function(e,t,n){e&&t&&e.detachEvent("on"+t,n)},u=function(e){var t=!1;return function(){for(var n=arguments.length,i=Array(n),o=0;o<n;o++)i[o]=arguments[o];t||(t=!0,window.requestAnimationFrame(function(n){e.apply(void 0,i),t=!1}))}},d={CONTAIN:{name:"contain",icon:"img-viewr__icon icon__full-screen"},ORIGINAL:{name:"original",icon:"img-viewr__icon icon__scale-to-original"}},f=!o.a.prototype.$isServer&&window.navigator.userAgent.match(/firefox/i)?"DOMMouseScroll":"mousewheel";var m=function(e,t,n,i,o,r,s,a){var c,l="function"==typeof e?e.options:e;if(t&&(l.render=t,l.staticRenderFns=n,l._compiled=!0),i&&(l.functional=!0),r&&(l._scopeId="data-v-"+r),s?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(s)},l._ssrRegister=c):o&&(c=a?function(){o.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:o),c)if(l.functional){l._injectStyles=c;var u=l.render;l.render=function(e,t){return c.call(t),u(e,t)}}else{var d=l.beforeCreate;l.beforeCreate=d?[].concat(d,c):[c]}return{exports:e,options:l}}({name:"ImgViewr",computed:{isSingle:function(){return this.urls.length<=1},isFirst:function(){return 0===this.index},isLast:function(){return this.index===this.urls.length-1},currentImg:function(){return this.urls[this.index]||this.urls[0]},imgStyle:function(){var e=this.transform,t=e.scale,n=e.deg,i=e.offsetX,o=e.offsetY,r={transform:"scale("+t+") rotate("+n+"deg)",transition:e.enableTransition?"transform .3s":"","margin-left":i+"px","margin-top":o+"px"};return this.mode===d.CONTAIN&&(r.maxWidth=r.maxHeight="100%"),r}},props:{visible:{type:Boolean,default:!1},urls:{type:Array,default:function(){return[]}},zIndex:{type:Number,default:3e3},onSwitch:{type:Function,default:function(){}},onClose:{type:Function,default:function(){}},initialIndex:{type:Number,default:0},closeOnClickMask:{type:Boolean,default:!0}},data:function(){return{index:0,isShow:!1,infinite:!0,loading:!1,mode:d.CONTAIN,transform:{scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}}},watch:{initialIndex:function(e){e!==this.index&&(this.index=e)},index:{handler:function(e){this.reset(),this.onSwitch(e)}},currentImg:function(e){var t=this;e&&this.$nextTick(function(e){var n=t.$refs.img;n&&n.length>0&&(n[0].complete||(t.loading=!0))})}},mounted:function(){this.deviceSupportInstall(),this.$refs["img-viewr__wrapper"].focus()},beforeDestroy:function(){this.deviceSupportUninstall()},methods:{handleMaskClick:function(){this.closeOnClickMask&&this.hide()},hide:function(){this.onClose()},deviceSupportInstall:function(){var e=this;this._keyDownHandler=u(function(t){switch(t.keyCode){case 27:e.hide();break;case 32:e.toggleMode();break;case 37:e.prev();break;case 38:e.handleActions("zoomIn");break;case 39:e.next();break;case 40:e.handleActions("zoomOut")}}),this._mouseWheelHandler=u(function(t){(t.wheelDelta?t.wheelDelta:-t.detail)>0?e.handleActions("zoomIn",{zoomRate:.05,enableTransition:!1}):e.handleActions("zoomOut",{zoomRate:.05,enableTransition:!1})}),c(document,"keydown",this._keyDownHandler),c(document,f,this._mouseWheelHandler)},deviceSupportUninstall:function(){l(document,"keydown",this._keyDownHandler),l(document,f,this._mouseWheelHandler),this._keyDownHandler=null,this._mouseWheelHandler=null},handleImgLoad:function(e){this.loading=!1},handleImgError:function(e){this.loading=!1,e.target.alt="加载失败"},handleMouseDown:function(e){var t=this;if(!this.loading&&0===e.button){var n=this.transform,i=n.offsetX,o=n.offsetY,r=e.pageX,s=e.pageY;this._dragHandler=u(function(e){t.transform.offsetX=i+e.pageX-r,t.transform.offsetY=o+e.pageY-s}),c(document,"mousemove",this._dragHandler),c(document,"mouseup",function(e){l(document,"mousemove",t._dragHandler)}),e.preventDefault()}},reset:function(){this.transform={scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}},toggleMode:function(){if(!this.loading){var e=Object.keys(d),t=(Object.values(d).indexOf(this.mode)+1)%e.length;this.mode=d[e[t]],this.reset()}},prev:function(){if(!this.isFirst||this.infinite){var e=this.urls.length;this.index=(this.index-1+e)%e}},next:function(){if(!this.isLast||this.infinite){var e=this.urls.length;this.index=(this.index+1)%e}},handleActions:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!this.loading){var n=s({zoomRate:.2,rotateDeg:90,enableTransition:!0},t),i=n.zoomRate,o=n.rotateDeg,r=n.enableTransition,a=this.transform;switch(e){case"zoomOut":a.scale>.2&&(a.scale=parseFloat((a.scale-i).toFixed(3)));break;case"zoomIn":a.scale=parseFloat((a.scale+i).toFixed(3));break;case"clocelise":a.deg+=o;break;case"anticlocelise":a.deg-=o;break;case"download":this.downloadImg(this.currentImg,Date.now(),"png")}a.enableTransition=r}},downloadImg:function(e,t,n){var i=new Image,o=document.createElement("canvas"),r=o.getContext("2d"),s=document.createElement("a");i.setAttribute("crossOrigin","anonymous"),i.src=e,i.onerror=function(){window.open(e)},i.onload=function(){o.width=i.width,o.height=i.height,r.drawImage(i,0,0,i.width,i.height),s.setAttribute("href",o.toDataURL("image/"+n)),s.setAttribute("target","_blank"),s.setAttribute("download",t+"."+n),s.click()}}}},r,[],!1,null,null,null);m.options.__file="src/img-viewr/main.vue";var h=m.exports,_="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},v="function"==typeof Symbol&&"symbol"===_(Symbol.iterator)?function(e){return void 0===e?"undefined":_(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":void 0===e?"undefined":_(e)},g=o.a.extend(h),p=void 0,w=function(e){if(!o.a.prototype.$isServer){if("object"!==v(e))throw new Error("Argument must be an Object!");if(!(e.urls&&e.urls.length>0))throw new Error("At least one picture in urls array!");if(e=Object.assign({urls:[],zIndex:3e3,onSwitch:function(){},onClose:function(){return!0},index:0},e),p||(p=new g({el:document.createElement("div")}),document.body.appendChild(p.$el),o.a.nextTick(function(){p.visible=!0})),!p.visible)for(var t in e)"onClose"!==t&&(p[t]=e[t]);p.onClose=function(){var t=!e.onClose();t||(p.visible=t,setTimeout(function(){p.urlList=[],p.initialIndex=-1},300))},p.visible=!0}};"undefined"!=typeof window&&window.Vue&&function(e){e.component(h.name,h)}(window.Vue),h.showImages=w;t.default=h}]).default;
{
"name": "vue-img-viewr",
"version": "1.0.2",
"version": "1.0.3",
"description": "vue图片查看组件(vue image viewer component)",

@@ -5,0 +5,0 @@ "author": "jekorx",

@@ -180,10 +180,11 @@ # vue-img-viewr

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :----------- | :----------------------------------------- | :------------- | :------------- | :----- |
| urls | 需要展示的图片url数组(必须参数) | array&#60;string&#62; | — | — |
| visible | 是否显示组件(仅限于通过组件方式参数) | boolean | true / false | — |
| initialIndex | 初始显示的图片索引(仅限于通过组件方式参数)| number | — | 0 |
| index | 显示的图片索引(仅限于通过js方法调用参数) | number | — | 0 |
| onSwitch | 图片切换函数 Function (index) | function | — | — |
| onClose | 关闭函数(通过js方法调用,返回true才会关闭;组件方式可以直接设置visible为false) | function | — | — |
| zIndex | 层级 | number | — | 2000 |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :--------------- | :----------------------------------------- | :------------- | :------------- | :----- |
| urls | 需要展示的图片url数组(必须参数) | array&#60;string&#62; | — | — |
| visible | 是否显示组件(仅限于通过组件方式参数) | boolean | true / false | — |
| initialIndex | 初始显示的图片索引(仅限于通过组件方式参数)| number | — | 0 |
| index | 显示的图片索引(仅限于通过js方法调用参数) | number | — | 0 |
| onSwitch | 图片切换函数 Function (index) | function | — | — |
| onClose | 关闭函数(通过js方法调用,返回true才会关闭;组件方式可以直接设置visible为false) | function | — | — |
| zIndex | 层级 | number | — | 3000 |
| closeOnClickMask | 点击蒙层关闭 | boolean | true / false | true |

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc