vue-pure-admin/static/js/index-DK5kFLR6.js

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