https://eleadmin.cn/assets/index-9qYiy967.js

1import{_ as P,r as i,j as a,o as g,m as w,e as l,f as n,S as L,d as e,T,H as Z,q as d,I as j,n as q}from"./index-C1KeoJ38.js";import E from"./ImageCropper-B_5GFfnm.js";import"./index-DJYSk9ds.js";const H={class:"image-cropper-content"},R={__name:"index",props:{title:{type:String,default:""},width:{type:Number,default:220},height:{type:Number,default:220}},emits:["imgData"],setup(x,{emit:y}){const s=x,V=y,m=i(!1),t=i({}),k=u=>{t.value=u,V("imgData",t.value)},f=u=>{t.value.showOverlay===!1&&(t.value.showOverlay=!0)},_=u=>{t.value.showOverlay===!0&&(t.value.showOverlay=!1)},c=i(!1),r=i([]),I=i(0),b=()=>{c.value=!1,r.value=[]},C=()=>{r.value=[t.value.url],c.value=!0},D=()=>{r.value=[],t.value={}};return(u,o)=>{const M=a("Plus"),p=a("el-icon"),v=a("el-button"),z=a("el-image"),N=a("ZoomIn"),O=a("Delete"),S=a("el-image-viewer"),B=a("el-card");return g(),w(B,{shadow:"never"},{header:l(()=>o[2]||(o[2]=[n("b",null,"图片在线裁剪",-1)])),default:l(()=>[o[4]||(o[4]=n("div",{style:{"margin-bottom":"20px","line-height":"25px","text-indent":"2em","margin-top":"10px",color:"#999"}}," 本组件允许开发者在网页上实现图片裁剪功能。提供了简单易用的接口，使得开发者能够轻松地在 Vue 应用中集成图片裁剪功能。裁剪区域和图片可以自适应不同大小的屏幕，确保在各种设备上都能良好工作。用户可以自由调整裁剪框的大小和位置，以满足不同的裁剪需求。 ",-1)),n("div",{class:"image-cropper-container img-uploader",style:L({"--screenshot-width":s.width+"px","--screenshot-height":s.height+"px"})},[n("div",H,[e(z,{class:"",src:t.value.url,onMouseenter:f,onMouseleave:_},{error:l(()=>[n("div",{onClick:o[0]||(o[0]=h=>m.value=!0),class:"image-upload-button"},[e(v,{link:""},{default:l(()=>[e(p,{size:"28",color:"#999"},{default:l(()=>[e(M)]),_:1}),o[3]||(o[3]=n("span",{style:{color:"#999","font-size":"16px"}},"请选择图片",-1))]),_:1})])]),_:1},8,["src"]),e(T,{name:"el-fade-in"},{default:l(()=>[Z(n("div",{class:"overlay",onMouseenter:d(f,["stop"]),onMouseleave:d(_,["stop"])},[e(v,{link:""},{default:l(()=>[e(p,{color:"#fff",size:"20",onClick:d(C,["stop"])},{default:l(()=>[e(N)]),_:1})]),_:1}),e(v,{link:""},{default:l(()=>[e(p,{color:"#fff",size:"20",onClick:d(D,["stop"])},{default:l(()=>[e(O)]),_:1})]),_:1})],544),[[j,t.value.showOverlay]])]),_:1})]),e(E,{modelValue:m.value,"onUpdate:modelValue":o[1]||(o[1]=h=>m.value=h),title:s.title,info:!1,width:s.width,height:s.height,onImgData:k},null,8,["modelValue","title","width","height"]),c.value?(g(),w(S,{key:0,onClose:b,"url-list":r.value,"z-index":9999,"initial-index":I.value,"hide-on-click-modal":!0},null,8,["url-list","initial-index"])):q("",!0)],4)]),_:1})}}},F=P(R,[["__scopeId","data-v-d6b187a7"]]);export{F as default};