fast-vue3-ui
Version:
<h1 align="center"> fast-ui </h1>
2 lines (1 loc) • 7.05 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("./style/index.css");const s=require("@element-plus/icons-vue"),v=require("./types.js"),q=require("../api/modules/upload.js"),L=require("@vueuse/core"),U=require("element-plus"),j={class:"uploadAvatar-container"},I=["src"],P={class:"avatar-upload-preview-box"},H={class:"avatar-upload-preview"},O=["src"],$={class:"avatar-upload-preview1"},G=["src"],J=e.createElementVNode("br",null,null,-1),K=e.defineComponent({name:"fast-upload-avatar"}),Q=e.defineComponent({...K,props:v.uploadProps,emits:v.uploadEmits,setup(C,{emit:m}){const c=C,d=e.ref("cropper"),r=e.reactive({open:!1,title:"\u56FE\u7247\u88C1\u526A",visible:!1,screenWidth:0,key:0,isShow:!0,component:null});let{open:u,title:_,visible:x,isShow:w,component:V}=e.toRefs(r);const t=e.reactive({img:"",outputSize:1,outputType:"png",info:!0,canScale:!0,autoCrop:!0,autoCropWidth:200,autoCropHeight:200,fixed:!1,fixedNumber:[1,1],full:!0,fixedBox:!0,canMove:!0,canMoveBox:!0,original:!0,centerBox:!1,height:!1,infoTrue:!1,maxImgSize:3e3,enlarge:1,mode:"100% 100%",previews:{url:"",img:""}}),N=L.useDebounceFn(()=>{r.screenWidth=document.body.clientWidth},500);e.onMounted(()=>{c.modelValue&&(t.img="",D(c.modelValue,o=>{e.nextTick(()=>{t.img=o})})),r.screenWidth=document.body.clientWidth,window.onresize=()=>(()=>{N()})(),r.component=!0}),e.watch(()=>r.screenWidth,(o,l)=>{console.log(`watch\u76D1\u542C\u53D8\u5316\u524D\u7684\u6570\u636E\uFF1A${l}`),console.log(`watch\u76D1\u542C\u53D8\u5316\u540E\u7684\u6570\u636E\uFF1A${o}`),r.isShow=!1,o>=540?(t.autoCropWidth=200,t.autoCropHeight=200):(t.autoCropWidth=140,t.autoCropHeight=140),setTimeout(()=>{r.isShow=!0},0)},{immediate:!0,deep:!1});const f=()=>{u.value=!0};function y(o){if(console.log("\u4E0A\u4F20\u9884\u5904\u7406"),o.type.indexOf("image/")===-1)U.ElMessage({type:"error",message:"\u6587\u4EF6\u683C\u5F0F\u9519\u8BEF\uFF0C\u8BF7\u4E0A\u4F20\u56FE\u7247\u7C7B\u578B,\u5982\uFF1AJPG\uFF0CPNG\u540E\u7F00\u7684\u6587\u4EF6\u3002"});else{const l=new FileReader;l.readAsDataURL(o),l.onload=()=>{t.img=l.result}}}const B=()=>{},E=()=>{d.value.rotateLeft()},k=()=>{d.value.rotateLeft()};function g(o){o=o||1,d.value.changeScale(o)}const F=()=>{t.img="",t.previews={url:"",img:""}},b=()=>{d.value.getCropBlob(o=>{console.log("xxxxxxxxxxxxxxxx===============xxxxxxxxxxxxxxxx",o);let l=new FormData;l.append("file",o,"logo.png"),l.append("type","avatar");let a=window.URL.createObjectURL(o);m("update:modelValue",a),t.img="",u.value=!1,q.uploadImg(l).then(n=>{console.log("xxxxxxxxx",n),u.value=!1,t.img=n.data.url,m("update:modelValue",n.data.url)})})},S=function(o){console.log("xxxxxxxxxxxx",o),t.previews=o},T=()=>{x.value=!0},M=()=>{x.value=!1},W=o=>{let l=document.createElement("canvas");return l.width=o.width,l.height=o.height,l.getContext("2d").drawImage(o,0,0,o.width,o.height),l.toDataURL("image/jpeg")},D=(o,l)=>{let a=new Image;a.src=o+"?v="+Math.random(),a.crossOrigin="",a.onload=function(){let n=W(a);l&&l(n)}};return(o,l)=>{const a=e.resolveComponent("vue-cropper"),n=e.resolveComponent("el-col"),h=e.resolveComponent("el-row"),R=e.resolveComponent("el-icon"),i=e.resolveComponent("el-button"),z=e.resolveComponent("el-upload"),A=e.resolveComponent("el-dialog");return e.openBlock(),e.createElementBlock("div",j,[e.createElementVNode("div",null,[c.modelValue?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["fast-upload-avatar",c.shape=="circle"?"circle":""]),onClick:f},[e.createElementVNode("img",{src:c.modelValue,class:"img-circle img-lg",alt:""},null,8,I)],2)):(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["upload-avatar",c.shape=="circle"?"circle":""]),onClick:f},[e.createVNode(e.unref(s.Plus),{class:"plus"})],2))]),e.createVNode(A,{title:e.unref(_),modelValue:e.unref(u),"onUpdate:modelValue":l[2]||(l[2]=p=>e.isRef(u)?u.value=p:u=p),width:"1000px",style:{"max-width":"90%"},onOpened:T,onClose:M},{default:e.withCtx(()=>[e.createVNode(h,null,{default:e.withCtx(()=>[e.createVNode(n,{xs:24,md:12},{default:e.withCtx(()=>[e.unref(V)&&e.unref(u)&&e.unref(w)?(e.openBlock(),e.createBlock(a,{key:0,class:"vueCropper",ref_key:"cropper",ref:d,img:t.img,outputSize:t.outputSize,outputType:t.outputType,info:t.info,canScale:t.canScale,autoCrop:t.autoCrop,autoCropWidth:t.autoCropWidth,autoCropHeight:t.autoCropHeight,fixedBox:t.fixedBox,fixed:t.fixed,fixedNumber:t.fixedNumber,canMove:t.canMove,canMoveBox:t.canMoveBox,original:t.original,centerBox:t.centerBox,infoTrue:t.infoTrue,full:t.full,enlarge:t.enlarge,mode:t.mode,onRealTime:S},null,8,["img","outputSize","outputType","info","canScale","autoCrop","autoCropWidth","autoCropHeight","fixedBox","fixed","fixedNumber","canMove","canMoveBox","original","centerBox","infoTrue","full","enlarge","mode"])):e.createCommentVNode("",!0)]),_:1}),e.createVNode(n,{class:"avatar-box",xs:24,md:12},{default:e.withCtx(()=>[e.createElementVNode("div",P,[e.createElementVNode("div",H,[e.createElementVNode("img",{src:t.previews.url,style:e.normalizeStyle(t.previews.img),alt:""},null,12,O)]),e.createElementVNode("div",$,[e.createElementVNode("img",{src:t.previews.url,style:e.normalizeStyle(t.previews.img),alt:""},null,12,G)])])]),_:1})]),_:1}),J,e.createVNode(h,null,{default:e.withCtx(()=>[e.createVNode(n,{xs:8,sm:4,md:4,lg:4},{default:e.withCtx(()=>[e.createVNode(z,{action:"#","http-request":B,"show-file-list":!1,"before-upload":y},{default:e.withCtx(()=>[e.createVNode(i,null,{default:e.withCtx(()=>[e.createVNode(R,{class:"el-icon--right"},{default:e.withCtx(()=>[e.createVNode(e.unref(s.Upload))]),_:1}),e.createTextVNode(" \u9009\u62E9 ")]),_:1})]),_:1})]),_:1}),e.createVNode(n,{xs:4,sm:2,md:2,lg:2},{default:e.withCtx(()=>[e.createVNode(i,{icon:e.unref(s.Plus),onClick:l[0]||(l[0]=p=>g(1))},null,8,["icon"])]),_:1}),e.createVNode(n,{xs:4,sm:2,md:2,lg:2},{default:e.withCtx(()=>[e.createVNode(i,{icon:e.unref(s.Minus),onClick:l[1]||(l[1]=p=>g(-1))},null,8,["icon"])]),_:1}),e.createVNode(n,{xs:4,sm:2,md:2,lg:2},{default:e.withCtx(()=>[e.createVNode(i,{icon:e.unref(s.RefreshLeft),onClick:E},null,8,["icon"])]),_:1}),e.createVNode(n,{xs:4,sm:2,md:2,lg:2},{default:e.withCtx(()=>[e.createVNode(i,{icon:e.unref(s.RefreshRight),onClick:k},null,8,["icon"])]),_:1}),e.createVNode(n,{class:"btns",xs:12,sm:6,md:6,lg:6,style:{display:"flex","justify-content":"center"}},{default:e.withCtx(()=>[t.img?(e.openBlock(),e.createBlock(i,{key:0,type:"danger",style:{padding:"0 50px"},onClick:F},{default:e.withCtx(()=>[e.createTextVNode("\u6E05\u9664 ")]),_:1})):e.createCommentVNode("",!0)]),_:1}),e.createVNode(n,{class:"btns",xs:12,sm:6,md:6,lg:6,style:{display:"flex","justify-content":"center"}},{default:e.withCtx(()=>[t.img?(e.openBlock(),e.createBlock(i,{key:0,type:"primary",style:{padding:"0 50px"},onClick:b},{default:e.withCtx(()=>[e.createTextVNode("\u63D0 \u4EA4")]),_:1})):e.createCommentVNode("",!0)]),_:1})]),_:1})]),_:1},8,["title","modelValue"])])}}});exports.default=Q;