vue-pure-admin/dist/static/js/index15.js

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