UNPKG

@ophiuchus/image

Version:
7 lines (6 loc) 4.22 kB
/*! * @ophiuchus/image v1.0.1 Sun Sep 26 2021 14:37:13 GMT+0800 (中国标准时间) * (c) 2021 @mws_ophiuchus * Released under the MIT License. */ import t from"vue";import r from"@ophiuchus/icon";function o(){return(o=Object.assign||function(t){for(var r,o=1;o<arguments.length;o++)for(var i in r=arguments[o])Object.prototype.hasOwnProperty.call(r,i)&&(t[i]=r[i]);return t}).apply(this,arguments)}var i=["attrs","props","domProps"],e=["class","style","directives"],n=["on","nativeOn"],s=function(t,r){return function(){t&&t.apply(this,arguments),r&&r.apply(this,arguments)}},a=function(t){return t.reduce((function(t,r){for(var a in r)if(t[a])if(-1!==i.indexOf(a))t[a]=o({},t[a],r[a]);else if(-1!==e.indexOf(a)){var c=t[a]instanceof Array?t[a]:[t[a]],l=r[a]instanceof Array?r[a]:[r[a]];t[a]=c.concat(l)}else if(-1!==n.indexOf(a))for(var h in r[a])if(t[a][h]){var d=t[a][h]instanceof Array?t[a][h]:[t[a][h]],f=r[a][h]instanceof Array?r[a][h]:[r[a][h]];t[a][h]=d.concat(f)}else t[a][h]=r[a][h];else if("hook"==a)for(var u in r[a])t[a][u]=t[a][u]?s(t[a][u],r[a][u]):r[a][u];else t[a]=r[a];else t[a]=r[a];return t}),{})};function c(t,r){return r?"string"==typeof r?` ${t}--${r}`:Array.isArray(r)?r.reduce(((r,o)=>r+c(t,o)),""):Object.keys(r).reduce(((o,i)=>o+(r[i]?c(t,i):"")),""):""}function l(t){return function(r,o){return r&&"string"!=typeof r&&(o=r,r=""),`${r=r?`${t}__${r}`:t}${c(r,o)}`}}const h=/-(\w)/g;const d={methods:{slots(t="default",r){const{$slots:o,$scopedSlots:i}=this,e=i[t];return e?e(r):o[t]}}};function f(t){const{name:r}=this;t.component(r,this),t.component(`-${r}`.replace(h,((t,r)=>r.toUpperCase())),this)}function u(t){return{functional:!0,props:t.props,model:t.model,render:(r,o)=>t(r,o.props,function(t){const r=t.scopedSlots||t.data.scopedSlots||{},o=t.slots();return Object.keys(o).forEach((t=>{r[t]||(r[t]=()=>o[t])})),r}(o),o)}}function p(t){return function(r){return"function"==typeof r&&(r=u(r)),r.functional||(r.mixins=r.mixins||[],r.mixins.push(d)),r.name=t,r.install=f,r}}function g(t){if(m(t))return t=String(t),/^\d+(\.\d+)?$/.test(t)?`${t}px`:t}const y="undefined"!=typeof window;function m(t){return null!=t}t.prototype.$isServer;const[$,L]=[p(v="sf-"+(v="image")),l(v)];var v,w=$({props:{src:String,fit:String,alt:String,round:Boolean,width:[Number,String],height:[Number,String],radius:[Number,String],lazyLoad:Boolean,iconPrefix:String,showError:{type:Boolean,default:!0},showLoading:{type:Boolean,default:!0},errorIcon:{type:String,default:"photo-fail"},loadingIcon:{type:String,default:"photo"}},data:()=>({loading:!0,error:!1}),watch:{src(){this.loading=!0,this.error=!1}},computed:{style(){const t={};return m(this.width)&&(t.width=g(this.width)),m(this.height)&&(t.height=g(this.height)),m(this.radius)&&(t.overflow="hidden",t.borderRadius=g(this.radius)),t}},created(){const{$Lazyload:t}=this;t&&y&&(t.$on("loaded",this.onLazyLoaded),t.$on("error",this.onLazyLoadError))},beforeDestroy(){const{$Lazyload:t}=this;t&&(t.$off("loaded",this.onLazyLoaded),t.$off("error",this.onLazyLoadError))},methods:{onLoad(t){this.loading=!1,this.$emit("load",t)},onLazyLoaded({el:t}){t===this.$refs.image&&this.loading&&this.onLoad()},onLazyLoadError({el:t}){t!==this.$refs.image||this.error||this.onError()},onError(t){this.error=!0,this.loading=!1,this.$emit("error",t)},onClick(t){this.$emit("click",t)},genPlaceholder(){const t=this.$createElement;return this.loading&&this.showLoading?t("div",{class:L("loading")},[this.slots("loading")||t(r,{attrs:{name:this.loadingIcon,classPrefix:this.iconPrefix},class:L("loading-icon")})]):this.error&&this.showError?t("div",{class:L("error")},[this.slots("error")||t(r,{attrs:{name:this.errorIcon,classPrefix:this.iconPrefix},class:L("error-icon")})]):void 0},genImage(){const t=this.$createElement,r={class:L("img"),attrs:{alt:this.alt},style:{objectFit:this.fit}};if(!this.error)return this.lazyLoad?t("img",a([{ref:"image",directives:[{name:"lazy",value:this.src}]},r])):t("img",a([{attrs:{src:this.src},on:{load:this.onLoad,error:this.onError}},r]))}},render(){return(0,arguments[0])("div",{class:L({round:this.round}),style:this.style,on:{click:this.onClick}},[this.genImage(),this.genPlaceholder(),this.slots()])}});export default w;