imagvue.js

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.imagvue=e()}(this,function(){"use strict";var t,S=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t};return function(t,e){!function(){function m(t){return parseInt(t,10)}function e(t){var e=m(t);return 0<=e&&e<=100}t.exports={name:"imagvue",props:{value:{type:String,required:!0},onerror:{type:Function,default:function(){}},height:{type:[String,Number],default:"auto"},width:{type:[String,Number],default:"auto"},blur:{type:[String,Number],default:"0",validator:function(t){return 0<=m(t)}},contrast:{type:[String,Number],default:"100",validator:function(t){return 0<=m(t)}},brightness:{type:[String,Number],default:"100",validator:function(t){return 0<=m(t)}},grayscale:{type:[String,Number],default:"0",validator:function(t){return e(t)}},hueRotate:{type:[String,Number],default:"0",validator:function(t){var e=m(t);return 0<=e&&e<=360}},invert:{type:[String,Number],default:"0",validator:function(t){return e(t)}},opacity:{type:[String,Number],default:"100",validator:function(t){return e(t)}},saturate:{type:[String,Number],default:"100",validator:function(t){return 0<=m(t)}},sepia:{type:[String,Number],default:"0",validator:function(t){return e(t)}},dropShadow:{type:Object,default:null},filters:{type:Boolean,default:!0},customData:{type:Object,default:null}},data:function(){return{lazyLoadMode:!1,lazyTime:0,lazyLoadImage:"",io:null,options:{rootMargin:null,threshold:null}}},render:function(t){var e=this.$slots.default;if(e&&1===e.length){var r=e[0];if(r.componentOptions&&"transition-group"===r.componentOptions.tag){var n=r.data.attrs,i=n.src,o=n.lazy,a=n.rootMargin,s=void 0===a?"0px":a,u=n.threshold,l=void 0===u?0:u;this.lazyLoadMode=!0,this.lazyLoadImage=i,this.lazyTime=o||500,this.options.rootMargin=s,this.options.threshold=m(l)}}var d=e,h=null,f=function(t,e){var r,n,i;r=h,n=t,null==(i=e)||((r=r||{})[n]=i),h=r},c=S({},this.$attrs,{src:this.lazyLoadMode?this.lazyLoadImage:this.value,width:this.width,height:this.height},this.lazyLoadMode?{"data-src":this.value}:{}),p={filter:"\n            blur("+this.blur+"px) \n            contrast("+this.contrast+"%)\n            brightness("+this.brightness+"%)\n            grayscale("+this.grayscale+"%)\n            hue-rotate("+this.hueRotate+"deg)\n            opacity("+this.opacity+"%)\n            invert("+this.invert+"%)\n            saturate("+this.saturate+"%)\n            sepia("+this.sepia+"%)\n            "+function(t){if(null===t)return"";var e=t.offset,r=t.blurRadius,n=void 0===r?0:r,i=t.spreadRadius,o=void 0===i?0:i,a=t.color;return"drop-shadow("+e+"px "+n+"px "+o+"px "+(void 0===a?"black":a)+")"}(this.dropShadow)+"\n          "},v={error:this.onerror};if(this.filters&&f("style",p),f("attrs",c),f("on",v),this.customData){var y=this.customData,g=y.on,b=y.props;f("on",S({},g,v)),f("props",b)}return t("img",h,d)},methods:{listenScrollEvent:function(t){var r=this;t.forEach(function(e){0<e.intersectionRatio&&setTimeout(function(){r.unObserve();var t=e.target;t.src=t.getAttribute("data-src"),t.removeAttribute("data-src")},r.lazyTime)})},unObserve:function(){this.io&&this.io.unobserve(this.$el)}},mounted:function(){if(this.lazyLoadMode&&"IntersectionObserver"in window){var t=this.options,e=t.rootMargin,r=t.threshold;this.io=new IntersectionObserver(this.listenScrollEvent,{rootMargin:e,threshold:r}),this.io.observe(this.$el)}},beforeDestroy:function(){this.unObserve()}}}()}(t={exports:{}},t.exports),t.exports});