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