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

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