index-b6e4b252.js
2.39 KB
import{d as A,k as n,a8 as s,_ as p,a9 as h,aa as u,f as o,a0 as c,$ as i,ac as l,a1 as F}from"./vue-5a35c3f5.js";import{P as I}from"./index-f532aa07.js";import{aW as E,ab as y,_ as B}from"./index.js";import{C as D,a as k}from"./index-53323c44.js";import{u as b}from"./upload-3c8f625d.js";import{h as w}from"./header-55b09394.js";import"./useContentViewHeight-d0a5c58e.js";import"./useWindowSizeFn-cc2fb57c.js";import"./onMountedOrActivated-52afb7a7.js";import"./antd-6b087f69.js";import"./index-c1c2669a.js";import"./base64Conver-39fc0d26.js";const $=A({components:{PageWrapper:I,CropperImage:D,CollapseContainer:E,CropperAvatar:k},setup(){var a;const e=n(""),d=n(""),m=n(""),C=n(""),v=y(),g=n(((a=v.getUserInfo)==null?void 0:a.avatar)||"");function _({imgBase64:t,imgInfo:f}){e.value=f,d.value=t}function r({imgBase64:t,imgInfo:f}){m.value=f,C.value=t}return{img:w,info:e,circleInfo:m,cropperImg:d,circleImg:C,handleCropend:_,handleCircleCropend:r,avatar:g,uploadApi:b}}});const P={class:"container p-4"},W={class:"cropper-container mr-10"},N=["src"],S={key:0},V={class:"container p-4"},U={class:"cropper-container mr-10"},j=["src"],q={key:0};function z(e,d,m,C,v,g){const _=s("CropperAvatar"),r=s("CollapseContainer"),a=s("CropperImage"),t=s("PageWrapper");return p(),h(t,{title:"图片裁剪示例",content:"需要开启测试接口服务才能进行上传测试！"},{default:u(()=>[o(r,{title:"头像裁剪"},{default:u(()=>[o(_,{uploadApi:e.uploadApi,value:e.avatar},null,8,["uploadApi","value"])]),_:1}),o(r,{title:"矩形裁剪",class:"my-4"},{default:u(()=>[c("div",P,[c("div",W,[o(a,{ref:"refCropper",src:e.img,onCropend:e.handleCropend,style:{width:"40vw"}},null,8,["src","onCropend"])]),e.cropperImg?(p(),i("img",{key:0,src:e.cropperImg,class:"croppered",alt:""},null,8,N)):l("v-if",!0)]),e.cropperImg?(p(),i("p",S,"裁剪后图片信息："+F(e.info),1)):l("v-if",!0)]),_:1}),o(r,{title:"圆形裁剪"},{default:u(()=>[c("div",V,[c("div",U,[o(a,{ref:"refCropper",src:e.img,onCropend:e.handleCircleCropend,style:{width:"40vw"},circled:""},null,8,["src","onCropend"])]),e.circleImg?(p(),i("img",{key:0,src:e.circleImg,class:"croppered"},null,8,j)):l("v-if",!0)]),e.circleImg?(p(),i("p",q,"裁剪后图片信息："+F(e.circleInfo),1)):l("v-if",!0)]),_:1})]),_:1})}const Z=B($,[["render",z],["__scopeId","data-v-cb5db3b9"],["__file","E:/allcode/erp/test7901/order-erp-front/src/views/demo/comp/cropper/index.vue"]]);export{Z as default};