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

import{R as B}from"./index-B9RHPT66.js";import{d as R,a as o,z as j,b as _,w as r,e as i,A as z,f as l,g as s,h as p,i as c,B as N,k as g,u as v,j as h,t as u,aM as V}from"./index-AFhnwzwZ.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(M){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=i("el-link"),b=i("el-image"),x=i("el-popover"),C=i("el-card"),y=z("loading");return l(),_(C,{shadow:"never"},{header:r(()=>[s("div",I,[s("span",A,[e[2]||(e[2]=p(" 图片裁剪，基于开源的 ")),c(a,{href:"https://fengyuanchen.github.io/cropperjs/",target:"_blank",style:{margin:"0 4px 5px","font-size":"16px"}},{default:r(()=>e[1]||(e[1]=[p(" cropperjs ")])),_:1}),e[3]||(e[3]=p(" 进行二次封装（提示：右键下面左侧裁剪区可开启功能菜单） "))])]),c(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]=[p(" 代码位置 src/views/components/cropping ")])),_:1})]),default:r(()=>[N((l(),g("div",L,[c(x,{ref_key:"popoverRef",ref:f,visible:d.value,placement:"right",width:"300px"},{reference:r(()=>[c(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?(l(),_(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?(l(),g("div",J,[s("p",null," 图像大小："+u(parseInt(t.value.width))+" × "+u(parseInt(t.value.height))+"像素 ",1),s("p",null," 文件大小："+u(v(V)(t.value.size))+"（"+u(t.value.size)+" 字节） ",1)])):h("",!0)])]),_:1},8,["visible"])])),[[y,!d.value]])]),_:1})}}});export{U as default};