zn-components 0.0.2 → 0.0.3

package/dist/0.zn-ui.min.js

@@ -0,0 +1 @@
+(this.webpackJsonpZnUI=this.webpackJsonpZnUI||[]).push([[0],{270:function(e,t,n){"use strict";n.r(t);var i=function render(){var e=this,t=e._self._c;return t("transition",{attrs:{name:"viewer-fade"}},[t("div",{ref:"el-image-viewer__wrapper",staticClass:"el-image-viewer__wrapper",style:{"z-index":e.viewerZIndex},attrs:{tabindex:"-1"}},[t("div",{staticClass:"el-image-viewer__mask",on:{click:function(t){return t.target!==t.currentTarget?null:e.handleMaskClick.apply(null,arguments)}}}),t("span",{staticClass:"el-image-viewer__btn el-image-viewer__close",on:{click:e.hide}},[t("i",{staticClass:"el-icon-close"})]),e.isSingle?e._e():[t("span",{staticClass:"el-image-viewer__btn el-image-viewer__prev",class:{"is-disabled":!e.infinite&&e.isFirst},on:{click:e.prev}},[t("i",{staticClass:"el-icon-arrow-left"})]),t("span",{staticClass:"el-image-viewer__btn el-image-viewer__next",class:{"is-disabled":!e.infinite&&e.isLast},on:{click:e.next}},[t("i",{staticClass:"el-icon-arrow-right"})])],t("div",{staticClass:"el-image-viewer__btn el-image-viewer__actions"},[t("div",{staticClass:"el-image-viewer__actions__inner"},[t("i",{staticClass:"el-icon-zoom-out",on:{click:function(t){return e.handleActions("zoomOut")}}}),t("i",{staticClass:"el-icon-zoom-in",on:{click:function(t){return e.handleActions("zoomIn")}}}),t("i",{staticClass:"el-image-viewer__actions__divider"}),t("i",{class:e.mode.icon,on:{click:e.toggleMode}}),t("i",{staticClass:"el-image-viewer__actions__divider"}),t("i",{staticClass:"el-icon-refresh-left",on:{click:function(t){return e.handleActions("anticlocelise")}}}),t("i",{staticClass:"el-icon-refresh-right",on:{click:function(t){return e.handleActions("clocelise")}}})])]),t("div",{staticClass:"el-image-viewer__canvas"},e._l(e.urlList,function(n,i){return i===e.index?t("img",{key:n,ref:"img",refInFor:!0,staticClass:"el-image-viewer__img",style:e.imgStyle,attrs:{src:e.currentImg},on:{load:e.handleImgLoad,error:e.handleImgError,mousedown:e.handleMouseDown}}):e._e()}),0)],2)])};i._withStripped=!0;var s=n(3),a=n.n(s);const o=a.a.prototype.$isServer,l=(o||Number(document.documentMode),!o&&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)}),r=!o&&document.removeEventListener?function(e,t,n){e&&t&&e.removeEventListener(t,n,!1)}:function(e,t,n){e&&t&&e.detachEvent("on"+t,n)};function hasClass(e,t){if(!e||!t)return!1;if(-1!==t.indexOf(" "))throw new Error("className should not contain space.");return e.classList?e.classList.contains(t):(" "+e.className+" ").indexOf(" "+t+" ")>-1}function addClass(e,t){if(e){for(var n=e.className,i=(t||"").split(" "),s=0,a=i.length;s<a;s++){var o=i[s];o&&(e.classList?e.classList.add(o):hasClass(e,o)||(n+=" "+o))}e.classList||e.setAttribute("class",n)}}function removeClass(e,t){if(e&&t){for(var n=t.split(" "),i=" "+e.className+" ",s=0,a=n.length;s<a;s++){var o=n[s];o&&(e.classList?e.classList.remove(o):hasClass(e,o)&&(i=i.replace(" "+o+" "," ")))}e.classList||e.setAttribute("class",(i||"").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,""))}}let isFunction=e=>e&&"[object Function]"==={}.toString.call(e);"object"==typeof Int8Array||!a.a.prototype.$isServer&&document.childNodes;Object.prototype.hasOwnProperty;function rafThrottle(e){let t=!1;return function(...n){t||(t=!0,window.requestAnimationFrame(i=>{e.apply(this,n),t=!1}))}}let d,c=!1,h=!1;const getModal=function(){if(a.a.prototype.$isServer)return;let e=m.modalDom;return e?c=!0:(c=!1,e=document.createElement("div"),m.modalDom=e,e.addEventListener("touchmove",function(e){e.preventDefault(),e.stopPropagation()}),e.addEventListener("click",function(){m.doOnModalClick&&m.doOnModalClick()})),e},u={},m={modalFade:!0,getInstance:function(e){return u[e]},register:function(e,t){e&&t&&(u[e]=t)},deregister:function(e){e&&(u[e]=null,delete u[e])},nextZIndex:function(){return m.zIndex++},modalStack:[],doOnModalClick:function(){const e=m.modalStack[m.modalStack.length-1];if(!e)return;const t=m.getInstance(e.id);t&&t.closeOnClickModal&&t.close()},openModal:function(e,t,n,i,s){if(a.a.prototype.$isServer)return;if(!e||void 0===t)return;this.modalFade=s;const o=this.modalStack;for(let t=0,n=o.length;t<n;t++){if(o[t].id===e)return}const l=getModal();if(addClass(l,"v-modal"),this.modalFade&&!c&&addClass(l,"v-modal-enter"),i){i.trim().split(/\s+/).forEach(e=>addClass(l,e))}setTimeout(()=>{removeClass(l,"v-modal-enter")},200),n&&n.parentNode&&11!==n.parentNode.nodeType?n.parentNode.appendChild(l):document.body.appendChild(l),t&&(l.style.zIndex=t),l.tabIndex=0,l.style.display="",this.modalStack.push({id:e,zIndex:t,modalClass:i})},closeModal:function(e){const t=this.modalStack,n=getModal();if(t.length>0){const i=t[t.length-1];if(i.id===e){if(i.modalClass){i.modalClass.trim().split(/\s+/).forEach(e=>removeClass(n,e))}t.pop(),t.length>0&&(n.style.zIndex=t[t.length-1].zIndex)}else for(let n=t.length-1;n>=0;n--)if(t[n].id===e){t.splice(n,1);break}}0===t.length&&(this.modalFade&&addClass(n,"v-modal-leave"),setTimeout(()=>{0===t.length&&(n.parentNode&&n.parentNode.removeChild(n),n.style.display="none",m.modalDom=void 0),removeClass(n,"v-modal-leave")},200))}};Object.defineProperty(m,"zIndex",{configurable:!0,get:()=>(h||(d=d||(a.a.prototype.$ELEMENT||{}).zIndex||2e3,h=!0),d),set(e){d=e}});a.a.prototype.$isServer||window.addEventListener("keydown",function(e){if(27===e.keyCode){const e=function(){if(!a.a.prototype.$isServer&&m.modalStack.length>0){const e=m.modalStack[m.modalStack.length-1];if(!e)return;return m.getInstance(e.id)}}();e&&e.closeOnPressEscape&&(e.handleClose?e.handleClose():e.handleAction?e.handleAction("cancel"):e.close())}});var f=m;Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const p={CONTAIN:{name:"contain",icon:"el-icon-full-screen"},ORIGINAL:{name:"original",icon:"el-icon-c-scale-to-original"}},g=!a.a.prototype.$isServer&&window.navigator.userAgent.match(/firefox/i)?"DOMMouseScroll":"mousewheel";var v={name:"elImageViewer",props:{urlList:{type:Array,default:()=>[]},zIndex:{type:Number,default:2e3},onSwitch:{type:Function,default:()=>{}},onClose:{type:Function,default:()=>{}},initialIndex:{type:Number,default:0},appendToBody:{type:Boolean,default:!0},maskClosable:{type:Boolean,default:!0}},data(){return{index:this.initialIndex,isShow:!1,infinite:!0,loading:!1,mode:p.CONTAIN,transform:{scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}}},computed:{isSingle(){return this.urlList.length<=1},isFirst(){return 0===this.index},isLast(){return this.index===this.urlList.length-1},currentImg(){return this.urlList[this.index]},imgStyle(){const{scale:e,deg:t,offsetX:n,offsetY:i,enableTransition:s}=this.transform,a={transform:`scale(${e}) rotate(${t}deg)`,transition:s?"transform .3s":"","margin-left":`${n}px`,"margin-top":`${i}px`};return this.mode===p.CONTAIN&&(a.maxWidth=a.maxHeight="100%"),a},viewerZIndex(){const e=f.nextZIndex();return this.zIndex>e?this.zIndex:e}},watch:{index:{handler:function(e){this.reset(),this.onSwitch(e)}},currentImg(e){this.$nextTick(e=>{this.$refs.img[0].complete||(this.loading=!0)})}},methods:{hide(){this.deviceSupportUninstall(),this.onClose()},deviceSupportInstall(){this._keyDownHandler=e=>{e.stopPropagation();switch(e.keyCode){case 27:this.hide();break;case 32:this.toggleMode();break;case 37:this.prev();break;case 38:this.handleActions("zoomIn");break;case 39:this.next();break;case 40:this.handleActions("zoomOut")}},this._mouseWheelHandler=rafThrottle(e=>{(e.wheelDelta?e.wheelDelta:-e.detail)>0?this.handleActions("zoomIn",{zoomRate:.015,enableTransition:!1}):this.handleActions("zoomOut",{zoomRate:.015,enableTransition:!1})}),l(document,"keydown",this._keyDownHandler),l(document,g,this._mouseWheelHandler)},deviceSupportUninstall(){r(document,"keydown",this._keyDownHandler),r(document,g,this._mouseWheelHandler),this._keyDownHandler=null,this._mouseWheelHandler=null},handleImgLoad(e){this.loading=!1},handleImgError(e){this.loading=!1,e.target.alt="加载失败"},handleMouseDown(e){if(this.loading||0!==e.button)return;const{offsetX:t,offsetY:n}=this.transform,i=e.pageX,s=e.pageY;this._dragHandler=rafThrottle(e=>{this.transform.offsetX=t+e.pageX-i,this.transform.offsetY=n+e.pageY-s}),l(document,"mousemove",this._dragHandler),l(document,"mouseup",e=>{r(document,"mousemove",this._dragHandler)}),e.preventDefault()},handleMaskClick(){this.maskClosable&&this.hide()},reset(){this.transform={scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}},toggleMode(){if(this.loading)return;const e=Object.keys(p),t=(Object.values(p).indexOf(this.mode)+1)%e.length;this.mode=p[e[t]],this.reset()},prev(){if(this.isFirst&&!this.infinite)return;const e=this.urlList.length;this.index=(this.index-1+e)%e},next(){if(this.isLast&&!this.infinite)return;const e=this.urlList.length;this.index=(this.index+1)%e},handleActions(e,t={}){if(this.loading)return;const{zoomRate:n,rotateDeg:i,enableTransition:s}={zoomRate:.2,rotateDeg:90,enableTransition:!0,...t},{transform:a}=this;switch(e){case"zoomOut":a.scale>.2&&(a.scale=parseFloat((a.scale-n).toFixed(3)));break;case"zoomIn":a.scale=parseFloat((a.scale+n).toFixed(3));break;case"clocelise":a.deg+=i;break;case"anticlocelise":a.deg-=i}a.enableTransition=s}},mounted(){this.deviceSupportInstall(),this.appendToBody&&document.body.appendChild(this.$el),this.$refs["el-image-viewer__wrapper"].focus()},destroyed(){this.appendToBody&&this.$el&&this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el)}},w=n(4),_=Object(w.a)(v,i,[],!1,null,null,null);t.default=_.exports}}]);