vue-pure-admin/dist/static/js/index-BNpS1WXz.js

import{R as B}from"./index-B9BgcYOF.js";import{d as R,r as t,s as j,f as m,j as r,k as a,v as z,e as n,g as o,l as v,m as d,z as N,x as h,u,K as g,t as l,cY as V}from"./index-DftJury9.js";const D="/vue-pure-admin/static/png/avatar-BYZ7LL6-.png",I={class:"card-header"},L={class:"font-medium"},Y={"element-loading-background":"transparent"},A={class:"flex flex-wrap justify-center items-center text-center"},E={key:1,class:"mt-1"},T=R({name:"Cropping",__name:"index",setup(J){const e=t(),_=t(),x=t(),c=t(!1),s=t("");function k({base64:f,blob:i,info:p}){e.value=p,s.value=f}return j(()=>{_.value.hide()}),(f,i)=>{const p=a("el-link"),w=a("el-image"),C=a("el-popover"),y=a("el-card"),b=z("loading");return n(),m(y,{shadow:"never"},{header:r(()=>[o("div",I,[o("span",L,[v(" 图片裁剪，基于开源的 "),d(p,{href:"https://fengyuanchen.github.io/cropperjs/",target:"_blank",style:{margin:"0 4px 5px","font-size":"16px"}},{default:r(()=>[v(" cropperjs ")]),_:1}),v(" 进行二次封装（提示：右键下面左侧裁剪区可开启功能菜单） ")])])]),default:r(()=>[N((n(),h("div",Y,[d(C,{ref_key:"popoverRef",ref:_,visible:c.value,placement:"right",width:"300px"},{reference:r(()=>[d(u(B),{ref_key:"refCropper",ref:x,class:"w-[30vw]",src:u(D),circled:"",onCropper:k,onReadied:i[0]||(i[0]=K=>c.value=!0)},null,8,["src"])]),default:r(()=>[o("div",A,[s.value?(n(),m(w,{key:0,src:s.value,"preview-src-list":Array.of(s.value),fit:"cover"},null,8,["src","preview-src-list"])):g("",!0),e.value?(n(),h("div",E,[o("p",null," 图像大小："+l(parseInt(e.value.width))+" × "+l(parseInt(e.value.height))+"像素 ",1),o("p",null," 文件大小："+l(u(V)(e.value.size))+"（"+l(e.value.size)+" 字节） ",1)])):g("",!0)])]),_:1},8,["visible"])])),[[b,!c.value]])]),_:1})}}});export{T as default};