t-fighting-design/lib/image/src/index2.js

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=require("./index3.js"),_=require("../../_utils/index2.js"),i=require("../../_utils/index3.js"),p=require("../../_hooks/use-filter-props/index.js");require("../../_hooks/use-message/index.js");require("../../loading-bar/src/index2.js");const h=["draggable","referrer-policy","alt","title"],y={key:1,class:"f-image__error"},v={class:"f-image__error-text"},k=e.defineComponent({name:"FImage"}),S=e.defineComponent({...k,props:f.Props,setup(d){const s=d,l=e.ref(!0),n=e.ref(null),a=e.ref(s.lazy),g=()=>{const r=n.value,o=u=>{l.value=u,a.value=u},t=p.useFilterProps(s,["src","errSrc","rootMargin","lazy","load","error"]);_.loadImage(r,t,o)};e.onMounted(()=>{g()});const m=e.computed(()=>{const{fit:r,noSelect:o}=s;return["f-image__img",{[`f-image__${r}`]:r,"f-image__select":o}]}),c=e.computed(()=>{const{width:r,height:o,round:t}=s;return{"--f-image-width":i.sizeChange(r),"--f-image-height":i.sizeChange(o),"--f-image-border-radius":i.sizeChange(t)}});return(r,o)=>l.value?(e.openBlock(),e.createElementBlock("div",{key:0,role:"img",class:e.normalizeClass(["f-image",{"f-image__block":r.block}]),style:e.normalizeStyle(e.unref(c))},[e.withDirectives(e.createElementVNode("img",{ref_key:"FImageImg",ref:n,src:"",class:e.normalizeClass(e.unref(m)),style:e.normalizeStyle(e.unref(c)),draggable:r.draggable,"referrer-policy":r.referrerPolicy,alt:r.alt,title:r.title},null,14,h),[[e.vShow,a.value]])],6)):(e.openBlock(),e.createElementBlock("div",y,[e.renderSlot(r.$slots,"error",{},()=>[e.createElementVNode("span",v,e.toDisplayString(r.alt||"\u52A0\u8F7D\u5931\u8D25"),1)])]))}});exports.default=S;